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软件 开发 技术 联盟 编著 


内 容 简 介 


《Java Web 开发 实例 大 全 〈 基 础 卷 ) 》 筛 选 、 汇 集 了 Java Web 开发 从 基础 知识 到 高 级 应 用 各 个 层面 约 600 个 实例 
及 源 代 码 ， 每 个 实例 按 实 例 说明 、 关 键 技术 、 设 计 过 程 、 详 尽 注释 、 秘 笈 心 法 的 顺序 进行 了 分 析 解 读 。 全 书 分 为 6 篇 
23 章 ， 主 要 内 容 有 开发 环境 搭建 、Java 语言 基础 、HTML/CSS 技术 、JSP 基础 与 内 置 对 象 、JavaBean 技术 、Servlet 技 
术 、 过 滤器 与 监听 器 技术 、JSTL 标签 库 、JavaScript 技术 、Ajax 技术 、 文件 基本 操作 及 文件 上 传 下载 、 文 件 的 批量 管理 、 
图 像 生成 、 图 像 操作 、 多 媒体 应 用 、 窗 口 的 应 用 、 导 航 条 的 应 用 、 表 单 的 应 用 、 表 格 的 操作 、JSP 操作 Word、JSP 操作 
Excel、 报 表 与 打印 、 综 合 应 用 等 。 配 书 光盘 附 有 实例 源 代码 及 部 分 讲解 视频 。 

《Java Web 开发 实例 大 全 (基础 卷 ) 》 既 适合 Java Web 程序 员 参 考 和 查阅 ,也 适合 Java Web 初学 者 ， 如 高 校 学 生 、 
软件 开发 培训 学 员 及 相关 求职 人 员 学 习 、 练 习 、 速 查 使 用 。 
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特别 说 明 : 
《Java Web 开发 实例 大 全 》 分 为 基础 卷 ( 即 本 书 ) 和 提高 卷 两 册 。 本 书 的 前 身 是 《Java Web 开发 实战 1200 
例 ( 第 I 卷 ) 》。 


编写 目的 


1. 方便 程序 员 查 阅 

程序 开发 是 一 项 艰辛 的 工作 ， 挑 灯 夜 战 、 加 班 加 点 是 常 有 的 事 。 在 开发 过 程 中 ， 一 个 技术 问题 可 能 会 占用 几 
天 甚至 更 长 时 间 。 如 果 有 一 本 开发 实例 大 全 可 供 翻阅 ， 从 中 找到 相似 的 实例 作 参 考 ， 也 许 几 分 钟 就 可 以 解决 问题 。 
本 书 编写 的 主要 目的 就 是 方便 程序 员 查 阅 、 提 高 开发 效率 。 

2. 通过 分 析 大 量 源 代 码 ， 达 到 快速 学 习 之 目的 

本 书 提供 了 约 600 个 开发 实例 及 源 代码 ， 附 有 相应 的 注释 、 实 例 说 明 、 关 键 技术 、 设 计 过 程 和 秘笈 心 法 ， 对 
实例 中 的 源 代 码 进行 了 比较 透彻 的 解析 。 相 信 这 种 办 法 对 激发 学 习 情 趣 、 提 高 学 习 效 率 极 有 帮助 。 


3. 通过 阅读 大 量 源 代 码 ， 达 到 提高 熟练 度 之 目的 


俗话 说 “ 熟 能 生 巧 ”， 读 者 只 有 通过 阅读 、 分 析 大 量 源 代码 ， 并 亲自 动手 去 做 ， 才 能 够 深刻 理解 、 运 用 自如 ， 
进而 提高 编程 熟练 度 ， 适 应 工作 之 需要 。 


4. 实例 源 程序 可 以 “ 拿 来 ”就 用 ， 提 高 了 效率 


本 书 的 很 多 实例 ， 可 以 根据 实际 应 用 需求 稍 加 改动 ， 拿 来 就 用 ， 不 必 再 去 从 头 编写 ， 从 而 节约 了 时 间 ， 提 高 
了 工作 效率 。 


本 书 内 容 


全 书 分 为 6 篇 23 章 ， 主 要 内 容 有 开发 环境 搭建 、Java 语言 基础 、HTML/CSS 技术 、JSP 基础 与 内 置 对 象 、 
JavaBean 技术 、Servlet 技术 、 过 滤器 与 监听 器 技术 、JSTL 标签 库 、JavaScript 技术 、Ajax 技术 、 文 件 基本 操作 
及 文件 上 传 下 载 、 文 件 的 批量 管理 、 图 像 生成 、 图 像 操 作 、 多 媒体 应 用 、 窗 口 的 应 用 、 导 航 条 的 应 用 、 表 单 的 
应 用 、 表 格 的 操作 、JSP 操作 Word、JSP 操作 Excel、 报 表 与 打印 、 综 合 应 用 等 。 

书 中 所 选 实例 均 来 源 于 一 线 开 发 人 员 的 项 目 开发 实践 ， 襄 括 了 开发 中 经 常 碰 到 和 需要 解决 的 热点 、 难 点 问题 ， 
使 读者 可 以 快速 解决 开发 中 的 难题 ， 提 高 编程 效率 。 本 书 知 识 结构 如 下 图 所 示 。 

本 书 在 讲解 实例 时 采用 统一 的 编排 样式 ， 多 数 实例 由 “实例 说 明 ”“ 关 键 技术 ” “设计 过 程 ”“ 秘 笈 心 法 ” 
4 部 分 构成 。 其 中 ，“ 实 例 说 明 ” 部 分 采用 图 文 结合 的 方式 介绍 实例 的 功能 和 运行 效果 ; “关键 技术 ”部 分 介 
绍 了 实例 使 用 的 重点 、 难 点 技术 ; “设计 过 程 ”部 分 讲解 了 实例 的 详细 开发 过 程 ; “秘笈 心 法 ”部 分 给 出 了 与 
实例 相关 的 技巧 和 经 验 总 结 。 


Java Web 开发 实例 大 全 (基础 卷 ) 


亮点 内 容 导航 


第 1 篇 。 基 础 篇 (252 个 实例 ) 


第 2 篇 文件 管理 篇 (74 个 实例 ) 


第 3 篇 图 像 与 多 媒体 篇 (90 个 实例 ) 
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第 4 篇 窗 体 应 用 篇 (110 个 实例 ) 
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第 5 篇 操作 Word、Excel、 报 表 与 打印 篇 (54 个 实例 ) 
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本 书 特点 
1. 实例 极为 丰富 
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第 6 篇 综合 应 用 篇 (20 个 实例 ) 


本 书 精 选 了 约 600 个 实例 ， 另 外 一 册 《Java Web 开发 实例 大 全 〈 提 高 卷 ) 》 也 精 选 了 提高 部 分 约 600 个 实 
例 ， 这 样 ， 两 册 图 书 总 计 约 1200 个 实例 ， 可 以 说 是 目前 市 场 上 实例 最 多 、 知 识 点 最 全 面 、 内 容 最 丰富 的 软件 开 
发 类 图 书 ， 涵 盖 了 编程 中 各 个 方面 的 应 用 。 


2. 程序 解释 详尽 


本 书 提供 的 实例 及 源 代 码 ， 附 有 相应 的 注释 、 实 例 说 明 、 关 键 技术 、 设 计 过 程 和 秘笈 心 法 。 分 析 解 释 详尽 


便于 快速 学 习 。 
3. 实践 实战 性 强 


本 书 的 实例 及 源 代码 很 多 来 自 现实 开发 中 ， 光 盘 中 给 出 了 绝 大 多 数 实例 的 全 部 源 代码 ， 读 者 可 以 直接 调用 、 


研读 、 练 习 。 
关于 光盘 


1. 实例 学 习 注意 事项 


读者 在 按照 本 书 学 习 、 练 习 的 过 程 中 ， 可 以 从 光盘 中 复制 源 代码 ， 修 改 时 注意 去 掉 源 码 文件 的 只 读 属性 。 
有 些 实例 需要 使 用 相应 的 数据 库 或 第 三 方 资源 ， 在 使 用 前 需要 进行 相应 配置 ， 具 体 步 骤 请 参考 书 中 或 者 光盘 中 


的 配置 说 明 。 


臣 
ol 


2. 实例 源 代码 及 视频 位 置 

本 书 光盘 提供 了 实例 的 源 代码 ， 位 置 在 光盘 中 的 “MR\ 章 号 \ 实 例 序 号 ”文件 夹 下 ， 例 如 ，“MR\04\096” 表 示 
实例 096， 位 于 第 4 章 。 部 分 实例 提供 的 视频 讲解 ， 也 可 根据 以 上 方式 查找 。 由 于 有 些 实例 源 代码 较 长 ， 限 于 篇 
幅 ， 图 书 中 只 给 出 了 关键 代码 ， 完 整 代码 放置 在 光盘 中 。 

3. 视频 使 用 说 明 

本 书 提供 了 部 分 实例 的 视频 讲解 ， 在 目录 中 标题 前 边 有 视频 图 标的 实例 ， 即 表示 在 光盘 中 有 视频 讲解 。 视 
频 采 用 EXE 文件 格式 ， 无 须 使 用 播放 器 ， 双 击 就 可 以 直接 播放 。 


读者 对 象 
Java Web 程序 员 ，Java Web 初学 者 ， 如 高 校 大 学 生 、 求 职 人 员 、 培 训 机 构 学 员 等 。 
本 书 服务 


如 果 您 使 用 本 书 的 过 程 中 遇 到 问题 ， 可 以 通过 如 下 方式 与 我 们 联系 。 
服务 QQ: 4006751066 
服务 网 站 : http://www.mingribook.com 


本 书 作者 


本 书 由 软件 开发 技术 联盟 组 织 编写 ， 具体 参与 编写 的 程序 员 有 赛 奎 春 、 王 小 科 、 王 国 辉 、 王 占 龙 、 高 春 艳 、 
张 钨 、 杨 丽 、 辛 洪 郁 、 周 佳 星 、 申 小 琦 、 张 宝 华 、 葛 忠 月 、 王 雪 、 李 贺 、 吕 艳 妃 、 王 喜平 、 张 领 、 杨 贵 发 、 李 
根 福 、 刘 志 铭 、 宁 各 蒙 、 刘 丽 艳 、 刘 莉莉 、 王 雨 竹 、 刘 红 艳 、 隋 光宇 、 郭 独 、 崔 佳音 、 张 金 炊 、 王 敬 洁 、 打 品 、 
刘 佳 、 陈 英 、 张 舌 、 张 世 辉 、 高 茹 、 陈 威 、 张 彦 国 、 高 飞 、 李 严 。 本 书 出 版 方面 的 项 目 负责 人 刘 利 民 编辑 和 杨 
静 华 编辑 以 及 其 他 编校 人 员 为 本 书 的 出 版 付出 了 努力 ， 在 此 一 并 致谢 ! 
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1.1 JDK 开发 工具 包 


“ 工 欲 善 其 事 ， 必 先 利 其 器 。” 在 学 习 一 门 编程 语言 之 前 ， 通 常情 况 下 都 需要 安装 编程 语言 的 开发 环境 ， 学 
习 Java Web 也 不 例外 ， 需 要 Java 配置 的 运行 环境 与 安装 测试 JDK 开发 包 。 
JDK 是 Java Development Kit 的 缩写 ， 由 于 Sun 公司 已 经 被 Oracle (甲骨 文 ) 公司 所 收购 ， 所 以 现在 可 以 说 
是 Oracle 公司 提供 的 JDK, 其 中 包括 运行 Java 程序 所 必需 的 JRE 环境 及 开发 过 程 中 常用 的 Java 基本 类 库 文件 。 
在 开发 Java Web 应 用 之 前 ， 首 先 应 该 安装 JDK 组 件 。 


图 实例 说 明 

开发 Java 程序 必须 有 Java 开发 环境 ， 即 JDK 开发 工具 包 ， 这 个 工具 包 包 含 了 编译 、 运 行 、 调 试 等 关键 的 
命令 。 哪 怕 运 行 Eclipse、NetBeans 等 开发 工具 也 要 有 JDK 或 JRE 的 支持 ， 所 以 开发 Java 程序 之 前 的 第 一 步 准 
备 工作 就 是 获取 JDK 开发 工具 包 ， 该 工具 包 需 要 到 官方 网 站 去 下 载 ， 本 实例 将 介绍 其 关键 的 下 载 步 又。 首先 要 
打开 浏览 器 并 浏览 JDK 的 下 载 页 面 ， 如 图 1.1 所 示 。 
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图 1.1 JDK 下 载 页 面 


图 关键 技术 
现在 的 Java 属于 Oracle 公司 ， 而 且 在 下 载 页 面 中 也 会 有 Oracle 公司 的 标志 ， 这 里 要 做 的 就 是 找到 Java SE 
的 下 载 网 址 。 而 在 Oracle 官方 网 站 的 主页 上 可 以 看 到 一 个 Downloads 选项 卡 ， 通 过 这 个 选项 卡 可 以 找到 相应 的 
下 载 页 面 。 
设计 过 程 
由 于 推出 JDK 的 Sun 公司 已 经 被 Oracle 公司 收购 了 ,所 以 JDK 可 以 到 Oracle 官方 网 站 (http://www.oracle. 
comyindex.html) 中 下 载 。 下 面 以 目前 最 新 版 本 的 JDK 7 Update 45 为 例 介绍 下 载 DK 的 方法 ， 具 体 下 载 步 又 如 下 。 
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(1) 打开 正 浏览 器 ， 在 地 址 栏 中 输入 URL 地 址 “http://www.oracle.com/index.html”， 并 按 下 Enter 键 ， 进 入 到 
Oracle 官方 网 站 的 主页 。 在 该 页 面 中 ， 将 鼠标 移动 到 Downloads 选项 卡 上 ， 将 显示 如 图 1.2 所 示 的 内 容 。 
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图 1.2 Oracle 官方 主页 


(2) 在 Downloads 选项 卡 的 Popular Downloads 栏 中 , 单 击 Java for Developers 超 链接 , 进入 到 如 图 1.3 所 示 的 Java 
SE 下 载 页 面 。 
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图 1.3 Java SE 下 载 页 面 
说明: 在 JDK 中 ， 已 经 包含 了 JRE。JDK 用 于 开发 Java 程序 ，JRE 用 于 运行 Java 程序 。 


(3) 在 图 1.3 所 示 的 页 面 中 ， 单 击 Java Platform (JDK) 7u45 上 方 的 DOWNLOAD 按钮 ， 将 进入 到 如 图 1.4 所 示 
的 下 载 列 表 页 面 ， 选 中 Accept License Agreement 单 选 按钮 同意 协议 后 ， 将 显示 如 图 1.5 所 示 的 页 面 ， 这 时 可 以 单 击 当 
前 系统 对 应 的 JDK 下 载 超 链接 ， 下 载 适合 当前 系统 的 JDK。 例 如 ， 要 安装 在 32 位 的 Windows 操作 系统 中 ， 可 以 下 载 
jdk-7u45-windows-i586.exe 文件 。 


图 秘笈 心 法 
法 领悟 001: 应 对 可 能 变化 的 下 载 页 面 。 
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图 14 JDK 资源 选择 页 面 图 1.5 ”接受 许可 协议 后 的 页 面 
在 下 载 Java SE 的 JDK 安装 文件 时 ， 由 于 时 间 的 推移 和 网 页 不 断 地 改进 ， 下 载 页 面 可 能 会 发 生 -一些 变 化 ， 
但 是 无 论 如 何 改变 网 页 的 布局 ， 只 要 记 住 在 网 页 中 找到 Java SE 的 资源 网 页 ， 然 后 在 其 中 找到 Downloads 超 链 
接 , 通过 这 个 超 链接 找到 JDK 的 下 载 页 面 , 并 在 页 面 中 进行 简单 设置 ,再 选择 要 下 载 哪个 平台 的 JDK 安装 文件 ， 
并 执行 下 载 任务 即 可 。 


力 实例 说 明 

安装 JDK 开发 工具 包 意 味 着 编写 Java 程序 的 开始 。 在 一 台 计算 机 中 安装 JDK， 可 以 为 计算 机 增加 编译 、 
运行 和 调试 Java 程序 的 能 力 。 本 实例 将 介绍 如 何 安装 JDK 开 
发 工具 包 到 指定 的 磁盘 位 置 ， 这 比 简单 的 默认 安装 要 稍微 复 
杂 一 些 ， 但 是 这 样 能 够 详细 地 了 解 安装 的 步骤 。JDK 安装 向 


导 启 动 界面 如 图 1.6 所 示 。 ET 
关键 技术 9 


在 安装 JDK 开发 工具 包 时 应 注意 ， 系 统 中 已 经 安装 的 某 
些 杀 毒 软件 或 者 系统 防范 工具 对 安装 的 提示 信息 ， 因 为 JDK 
开发 工具 包 会 在 系统 中 添加 一 些 方便 以 后 升级 的 启动 项 ， 在 
杀毒 软件 提示 是 否 允 许 这 项 操作 时 ， 请 让 它 通 过 ， 或 者 干脆 
暂时 关闭 杀毒 软件 ， 以 确保 JDK 能 够 完整 地 安装 ， 并 随时 保 we 
持 可 升级 状态 。 图 1.6 JDK 安装 向 导 启动 界面 
图 设计 过 程 

在 网 站 下 载 的 JDK 安装 向 导 根 据 版 本 的 不 同 ， 安 装 文件 的 名 称 也 有 所 改变 。 这 里 以 jdk-7u45-windows- 
i586.exe 安装 文件 为 例 介 绍 安装 过 程 ， 首 先 运行 这 个 安装 文件 。 

(1) 双击 JDK 的 安装 文件 ， 将 弹出 如 图 1.7 所 示 的 欢迎 对 话 框 。 

(2) 单 击 “ 下 一 步 ” 按 钮 ， 将 弹出 “ 自 定义 安装 ”对 话 框 ， 在 该 对 话 框 中 ， 可 以 选择 安装 的 功能 组 件 ， 这 
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里 选择 默认 设置 ， 如 图 1.8 所 示 。 
S| ET ES 
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欢迎 使 用 Java SE Development Kit 7 Update 45 安装 向 导 | Wn 支 装 完成 后 ， 您 可 以 使 用 深 制 面板 中 的 添加 / 


此 向 导 将 引导 您 完成 Java SE Development Kit 7 Upcate 35 的 安装 过 程 。 | 


Java Mission Control 分 析 和 诊断 工具 套件 现在 作为 JOK 的 一 部 分 提供 。 


[Es “| [Li-$® |[F-SM> 取消 | 
图 1.7 欢迎 对 话 框 1.8 ”JDK“ 自 定义 安装 ”对 话 框 


(3) 单 击 “ 更 改 ” 按 钮 ， 将 弹出 更 改 文 件 夹 的 对 话 框 ， 在 该 对 话 框 中 将 JDK 的 安装 路 径 更 改 为 
C:Navayjdk1.7.0 4S\， 如 图 1.9 所 示 ， 单 击 “ 确 定 ”按钮 ， 将 返回 到 “ 自 定 义 安装 ”对 话 框 中 。 

(4) 单 击 “ 下 一 步 ” 按 钮 ， 开 始 安装 JDK。 在 安装 过 程 中 会 弹出 JRE 的 “目标 文件 夹 ”对 话 框 ， 这 里 更 
改 JRE 的 安装 路 径 为 CJavayre7\， 然 后 单 击 “ 下 一 步 ” 按 钮 ， 安 装 向 导 会 继续 完成 安装 进程 。 
[加 说 明 : JRE 全 称 为 Java Runtime Environment， 它 是 Java 运行 环境 ， 主 要 负责 Java 程序 的 运行 ， 而 JDK 包 

含 了 Java 程序 开发 所 需要 的 编译 、 调 试 等 工具 ， 另 外 还 包含 了 JDK 的 源 代码 。 

(5) 安装 完成 后 ， 将 弹出 如 图 1.10 所 示 的 对 话 框 ， 单 击 “ 后 续 步 骤 ” 按 钮 ， 将 联网 访问 教程 、API 文档 、 

开发 人 员 指南 等 内 容 ， 如 果 不 想 查看 ， 可 以 单 击 “ 关 闭 ” 按 钮 ， 完 成 JDK 的 安装 。 
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图 1.9 更 改 JDK 的 安装 路 径 对 话 框 图 1.10 完成 对 话 框 

图 秘笈 心 法 

心 法 领悟 002: JDK 与 JRE 的 区 别 。 

在 JDK 开 发 工具 包 的 安装 向 导 中 包含 了 JRE， 而 JRE 到 底 是 什么 ? 它 和 JDK 有 什么 区 别 ? 

这 个 问题 可 以 从 名 字 上 进行 区 分 ，JDK 的 意义 是 “Java 开发 工具 ”， 而 JRE 的 意义 是 “Java 运行 时 环境 ”， 
也 就 是 说 ，JDK 负责 开发 程序 ， 因 为 它 拥 有 代码 编译 、 调 试 和 运行 的 所 有 命令 。JRE 是 负责 运行 Java 程序 的 ， 
当然 是 经 过 编译 后 的 Java 程序 。JRE 只 能 运行 Java 程序 的 命令 与 一 些 类 库 等 其 他 资源 ,， 所 以 它 的 体积 要 比 JDK 
小 很 多 。 而 JDK 中 集成 IRE 是 为 了 在 系统 中 提供 Java 运行 环境 ， 虽然 DK 也 有 运行 Java 的 命令 ， 但 是 它 不 像 
JRE 那样 与 操作 系统 集成 ， 并 可 以 直接 使 用 命令 ，JDK 需要 经 过 环境 变量 的 设置 才能 像 JRE 那样 。 
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实例 003 


力 实例 说 明 
在 JDK 安装 完成 之 后 ,最 为 重要 的 步骤 就 是 设置 它 运行 时 的 Windows 环境 变量 ,只 有 设置 了 环境 变量 之 后 ， 
在 应 用 程序 中 才能 正常 使 用 JDK 中 提供 的 类 库 和 JRE 运行 环境 。 


图 关键 技术 
在 为 JDK 配置 环境 变量 的 过 程 中 ， 需 要 注意 的 是 ， 设 置 path 属性 的 变量 值 ， 一 定 不 要 替换 原来 path 变量 
的 值 ， 因 为 里 面 配置 的 值 可 能 是 系统 其 他 应 用 程序 的 path 值 ， 蔡 换 掉 可 能 会 导致 其 他 程序 不 能 正常 运行 。 
图 设计 过 程 
(1) 在 “开始 ”菜单 的 “计算 机 ”图 标 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ,在 弹出 
的 “属性 ”对 话 框 左 侧 单 击 “ 高 级 系统 设置 ” 超 链 接 ， 将 出 现 如 图 1.11 所 示 的 “系统 属性 ”对 话 框 。 
(2) 单 击 “ 环 境 变量 ”按钮 ， 将 弹出 “环境 变量 ”对 话 框 ， 如 图 1.12 所 示 ， 单 击 “ 系 统 变量 ” 栏 中 的 “新 
建 ” 按 钮 ， 创 建新 的 系统 变量 。 
< 注意 : 新 建 环境 变量 时 ， 一 定 要 确认 是 在 “系统 变量 ”列表 框 中 新 建 ， 这 样 新 建 的 环境 变量 在 整个 系统 中 
都 起 作用 。 
(3) 弹出 “新 建 系统 变量 ”对 话 框 ， 分 别 输入 变量 名 “JAVA_HOME” 和 变量 值 ( 即 JDK 的 安装 路 径 ) ， 
其 中 变量 值 是 笔者 的 JDK 安装 路 径 ， 读 者 需要 根据 自己 的 计算 机 环境 进行 修改 ， 如 图 1.13 所 示 。 单 击 “ 确 定 ” 
(4) 在 系统 变量 中 查看 CLASSPATH 变量 ， 如 果 不 存在 ， 则 新 建 变量 CLASSPATH， 变 量 的 值 为 
“WJAVA HOME%\ib\dt.jar:%JAVA HOME%\ib\tools.jar 
< 注意 : JAVA_HOME 变量 的 变量 值 一 定 要 确保 其 路 径 的 正确 性 ， 所 以 建议 从 JDK 实际 安装 路 径 去 复制 并 粘 
贴 到 “变量 值 ”文本 框 中 ， 以 确保 其 变量 值 与 JDK 的 对 应 。CLASSPATH 变量 中 的 %JAVA_HOME% 
是 对 JAVA_HOME 变量 值 的 引用 形式 。 
(5) 在 图 1.12 所 示 的 “环境 变量 ”对 话 框 中 双击 Path 变量 对 其 进行 修改 , 在 原 变量 值 最 前 端 添加 “.:%JAVA_ 
HOME%Vbin;” 变 量 值 〈 注 意 : 最 后 的 “:” 不 要 丢掉 ， 它 用 于 分 割 不 同 的 变量 值 ) ， 如 图 1.14 所 示 。 单 击 “ 确 
定 ”按钮 完成 环境 变量 的 设置 。 
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< 注意 : 不 能 删除 系统 变量 Path 中 的 原 有 变量 值 ， 并 且 “%6JAVA_HOME9%\bin” 与 原 有 变量 值 之 间 用 英文 半 
角 的 “;” 号 分 隔 ， 否 则 会 产生 错误 。 


图 实例 说 明 

在 安装 和 配置 DK 之 后 ， 本 实例 将 应 用 Windows 系统 的 命令 行 工具 cmd.exe 来 测试 JDK 是 否 安装 成 功 。 
图 设计 过 程 

(1) 选择 “开始 ”/“ 运 行 ”命令 ， 在 打开 的 对 话 框 中 输入 “cmd” 命 令 ， 将 进入 DOS 环境 ， 在 命令 提示 
符 中 直接 输入 “javac” 命 令 ， 查 看 是 否 有 信息 提示 ， 如 图 1.15 所 示 。 

(2) 测试 Oracle Java Mission Control， 它 是 一 个 用 于 对 Java 应 用 程序 进行 管理 、 监 视 、 概 要 分 析 和 故障 排 


除 的 工具 套件 。 选 择 “ 开 始 ”/“ 运 行 ”命令 ， 在 弹出 的 对 话 框 中 输入 “jmc” 后 按 Enter 键 ， 打 开 如 图 1.16 所 
示 的 窗口 。 
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图 1.16 ”Oracle Java Mission Control 工具 套件 
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国 实例 说 明 


用 记事 本 编写 一 个 简单 的 * java 源码 文件 ， 并 运行 命令 提示 符 工 具 ， 在 其 中 输入 编译 Java 文件 的 命令 ， 并 
输出 “Hello Word!”。 


图 关键 技术 


在 调试 JDK 时 , 可 以 在 命令 行 提示 符 工具 中 输入 “javac -version ”命令 来 查看 JDK 的 相关 信息 与 命令 , javac 
命令 用 于 将 *.java 源 文件 编译 转换 成 *.class 文件 ， 然 后 再 用 Java 命令 运行 编译 后 的 文件 。 
图 设计 过 程 
(1) 选择 “开始 ”/“ 运 行 ”命令 ， 在 打开 的 对 话 框 中 输入 “cmd”， 将 弹出 命令 行 工 具 的 控制 台 界 面 。 
(2) 编译 文件 。 例 如 ， 在 C 盘 根 目录 下 有 一 个 名 为 HelloWord.java 的 Java 文件 ， 将 它 编译 为 class 文件 。 


在 控制 台中 输入 “javac HelloWord.java”， 并 按 Enter 键 之 后 ，Java 源 文件 将 被 编译 为 class 文件 。 可 以 发 现 ， 会 
在 C 盘 根 目录 下 自动 生成 一 个 名 为 HelloWord.class 的 文件 ， 这 就 是 编译 后 的 文件 ， 如 图 1.17 所 示 。 
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(3) 在 控制 台中 继续 输入 命令 “java HelloWord” 后 ， 会 输出 “HelloWord!” 字 符 串 ， 如 图 1.18 所 示 。 


图 1.17 编译 后 自动 生成 的 .class 文件 图 1.18 控制 台 执行 编译 后 的 文件 结果 
1.2 Tomcat 服务 器 


Tomcat 服务 器 是 Apache Jakarta 项 目 组 开发 的 产品 。 当 前 的 最 新 版 本 是 Tomcat 8， 它 能 够 支持 Servlet 3.1 
和 JSP 2.3 规范 ， 并 且 具 有 免费 和 跨 平台 等 诸多 特性 ， 是 学 习 开 发 Java Web 应 用 的 首选 服务 器 。 由 于 到 目前 为 
止 ，Tomcat 8 还 是 Alpah 版 ， 不 推荐 在 产品 中 使 用 ， 所 以 本 书 中 采用 的 是 Tomcat 7.0 版 本 ， 该 版 本 是 一 个 比较 
成 熟 的 版 本 。 下 面 将 以 Tomecat 7.0.47 为 例 介绍 下 载 与 调试 Tomcat 的 具体 步骤 。 


实例 006 


图 实例 说 明 
Tomecat 归于 Apache 基金 组 织 下 ， 其 应 用 范围 很 广泛 ， 既 可 用 来 学 习 Java Web 开发 ， 也 可 以 用 来 构架 各 类 
中 小 型 商业 应 用 。 本 书 使 用 的 Tomcat 7 已 经 实现 了 Java EE 6 中 Web 层 的 各 种 规范 。 
图 设计 过 程 
(1) 在 正 浏 览 器 地 址 栏 中 输入 “http://tomcat.apache.org”， 进 入 到 Tomcat 官方 网 站 ， 如 图 1.19 所 示 。 
(2) 在 左 侧 的 Download 列表 中 可 以 下 载 Tomcat 服务 器 的 各 种 版 本 。 单 击 Tomcat 7.0 超 链接 ， 进 入 到 


单 击 该 超 链接 


ao3-0-0 


图 1.19 Tomcat 官方 网 站 首页 图 1.20 ”Tomcat 7.0 的 下 载 页 面 
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(3) 在 图 1.17 中 ， 在 Core 节点 中 包含 了 Tomcat 7.0 服务 器 安装 文件 的 不 同 平台 下 的 不 同 版 本 ， 此 处 单 击 
的 是 32-bit/64-bit Windows Service Installer(pgp,md5) 超 链接 ， 单 击 该 链接 可 下 载 安 装 版 本 的 Tomcat, 然后 将 打开 
文件 下 载 对 话 框 ， 在 对 话 框 中 单 击 “ 保 存 ” 按 钮 ， 即 可 将 Tomcat 的 安装 文件 下 载 到 本 地 计算 机 中 。 
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力 实例 说 明 


本 实例 将 介绍 如 何 安装 Tomcat 服务 器 。Tomcat 安装 文件 下 载 完毕 后 ， 就 可 以 通过 该 文件 安装 Tomcat 服 
务 器 。 
图 设计 过 程 
(1) 双击 apache-tomecat-7.0.47.exe， 弹 出 安装 向 导 界 面 (如 图 1.21 所 示 )， 单 击 Next 按钮 ， 打 开 Apache 
的 许可 协议 对 话 框 。 
(2) 单 击 IAgree 同意 协议 ， 打 开 Apache 的 主 程序 与 组 件 安装 对 话 框 ， 在 该 对 话 框 中 选择 要 安装 的 组 件 ， 
如 图 1.22 所 示 。 
ET 


Choose Components 
Welcome to the Apache Tomcat Choose whch features of Apache Tomcat you want to nstal， 


Setup Wizard 


This wizard ml guide you through the instalation of Apache 
Tomcat. 


Chedk the components you want to instal and uncheck the components you don't want to 


to contnue, 
Itis recommended that you dose al other applcations 


before starting Setup, This wl make it possible to update 
relevant System fies without having to reboot your 


Clck Next to continue. 


http:/ /tomcat.apache.org 


Apache Tomcat 7 


图 1.21 安装 向 导 界面 图 1.22 Apache 的 主 程序 与 组 件 安装 对 话 框 


(3) 单 击 Next 按钮 ， 在 打开 的 对 话 框 中 设置 访问 Tomcat 服务 器 的 端口 及 用 户 名 和 和 密码， 通常 设置 端口 为 
8080、 用 户 名 为 admin、 密 码 为 111， 如 图 1.23 所 示 。 
[加 说 明 : 一 般 情况 下 ， 不 要 修改 默认 的 端口 号 ， 除 非 8080 端口 已 经 被 占用 。 

(4) 单 击 Next 按钮 ， 在 打开 的 Java Virtual Machine 对 话 框 中 选择 Java 虚拟 机 路 径 ， 这 里 选择 JDK 的 安装 
路 径 ， 如 图 1.24 所 示 。 

(5) 单 击 Next 按钮 ， 将 打开 Choose Install Location 对 话 框 。 在 该 对 话 框 中 可 通过 单 击 Browse 按钮 更 改 
Tomecat 的 安装 路 径 ， 这 里 将 其 更 改 为 C:\Program Files\Tomcat 7.0 目录 下 ， 如 图 1.25 所 示 。 

(6) 单 击 Install 按钮 ， 开 始 安装 Tomcat。 在 打开 安装 完成 的 提示 对 话 框 中 ， 取 消 选 中 Run Apache Tomcat 
和 Show Readme 复 选 框 ， 单 击 Finish 按钮 ， 即 可 完成 Tomcat 的 安装 。 

(7) Tomcat 服务 器 安装 成 功 后 ， 在 Tomcat 的 安装 目录 下 会 出 现 7 个 文件 夹 和 4 个 文件 ， 如 图 1.26 所 示 。 
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ADP1L3Connector Port 
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1.24 选择 Java 虚拟 机 路 径 


Choose the falder n which to nstal Apache Tomeat. 


Setup wd nstal Apache Tomcatn the folowng folder. To natal na different folder, cick 
Browse and select another folder. Cick Instal to Start the natalason 
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esanason Fade 人 
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力 实例 说 明 


熟悉 Tomcat 服务 器 的 内 部 结构 后 ， 可 以 启动 Err rm 
Tomcat 服务 器 来 测试 Tomcat 是 否 能 够 成 功 运行 。 Home Documentation confiouraon Examples_Wi_Malina Lists FinaHelp 


i Apache Tomcat7.0.47 Apache Software Foundation 
力 设计 过 程 


(1) 启动 Tomcat。 选 择 “ 开 始 ”/“ 所 有 程序 ”/ ee 

Apache Tomcat 7.0 Tomcat 7/Monitor Tomcat 命令 ， jd = on OWTO 

在 任务 栏 右 侧 的 系统 托盘 中 将 出 现 乐 图 标 ， 在 该 图 
标 上 单 击 鼠 标 右键 ， 在 打开 的 快捷 菜单 中 选择 Start 
service 命令 ， 启 动 Tomcat。 


Documentation Getting Help 


“http://localhost:8080” 访 问 Tomcat 服务 器 ， 若 出 有 P| | 到 ee 


于 1.27 所 示 ， 则 表示 安装 成 功 。 - 
现 如 图 1.27 所 示 的 页 面 ， 则 表示 Tomcat 安装 成 功 127 Tomcat 的 启动 界面 
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和 " 
实用 指数 : 会 | 


实例 009 


图 实例 说 明 
本 实例 介绍 如 何在 Eclipse 中 部 署 Web 应 用 ， 以 及 在 Eclipse 中 启动 Tomcat 服务 器 的 具体 方法 。 
图 设计 过 程 
(1) 打开 Eclipse， 在 菜单 中 创建 一 个 动态 Web 项 目 ， 如 图 1.28 所 示 。 


(2) 选择 Dynamic Web Project 命令 后 ， 打 开 New Dynamic Web Project 窗口 ， 在 Project name 文本 框 中 输 
入 项 目 名 称 ， 如 图 1.29 所 示 。 


AhrsNhrN ?| PA Project 
Enterprice Ag 


Targe: runtime 


i 
加 


Cenfiguration 
[Default confguration 
The defoul confguratien provid 
new funcicnalo to the prqject 
4 Pr EAR memberskip 
ep) cup |B en add project to an EAR 
HIT) 中 ze LiEAR 
a 00. 于 
局 AWD). M0) Co rp TD 
1 uO, 


属性 RN) AhvEneer 
1 ThreadSslespDemojava [11.04/srd/] 

2 syleess RO/WebContertess) 

3 cnlendarjsp [20/WebContert/paoes] 

4 IndexAcicnjava (20/src/com/yral] 

过 400 


图 1.28 创建 动态 Web 项 目 图 1.29 New Dynamic Web Project 窗口 

(3) 单 击 New Runtime 按钮 ， 新 建 一 个 运行 时 服务 器 ， 将 弹出 如 图 1.30 所 示 的 对 话 框 。 在 该 对 话 框 中 选 
择 Apache/Apache Tomcat v7.0 选项 ， 单 击 “ 下 一 步 ” 按 钮 ， 打 开 指 定安 装 目录 窗口 ， 如 图 1.31 所 示 。 
[加 说 明 : 由 于 前 面 下 载 的 是 Tomcat 7.0.47 版 本 ， 所 以 此 处 选择 Apache Tomcat v7.0 选项 ， 与 下 载 的 版 本 相对 应 。 

(4) 单 击 Browse 按钮 ， 显 示 “ 浏 览 文件 夹 ”对 话 框 ， 在 该 对 话 框 中 选择 Tomcat 的 根 目录 ， 如 图 1.32 所 
示 ， 单 击 “ 确 定 ” 按 钮 ， 返 回 到 指定 安装 目录 对 话 框 ， 单 击 “ 完 成 ”按钮 ， 完 成 运行 时 服务 器 的 创建 ， 返 回 到 
New Dynamic Web Project 窗口 中 。 
[上 说明: 如 果 在 Eclipse 中 ， 已 经 创建 过 运行 时 服务 器 ， 那 么 上 面 的 步骤 (3) 和 (4) 可 以 省 略 。 

(5) 这 时 ， 在 Target runtime 下 拉 列 表 中 将 自动 选择 新 创建 的 运行 时 服务 器 。 单 击 “ 完 成 ”按钮 ， 项 目 创 
建成 功 。 此 时 ， 可 以 在 Eclipse 的 项 目 资源 管理 器 中 查看 到 已 经 创建 的 项 目 “1.1”， 如 图 1.33 所 示 。 

(6) 在 Eclipse 的 项 目 资源 管理 器 中 ， 选 中 WebContent 文件 夹 并 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 
“新 建 ”/JSP File 命令 ,打开 New JSP File 窗口 。 在 该 窗口 的 “文件 名 ”文本 框 中 输入 文件 名 index:jsp， 其 他 采 


12 


第 1 章 开发 环境 搭建 


用 默认 ， 如 图 1.34 所 示 。 


New Server | 三 


New Server Runtime Environment = 
Define a new server runtime ervironment 


Downiosd additional sever adaoters 


Select the type of runtime environment: 


粳 入 过 洁 器 文本 
:Apache Specify the installation directory 
目 Apache Tomeat v3.2 
目 Apache Tomcatv40 Name: 


目 Apache Tomeat val 
目 Apache Tomcat v5.0 
目 Apache Tomcatv55 Tomcat installation directory: 


| | ee Ee CA\Program Files\Tomcat 7.0 Browse… 
pache Tomeaty 
apache-tomcat-7.012 [Download and Install, 


Apache Tomcat v7.0 


上 后 Basic 
Apache Tomcat v7.0 supports DEE 12, 1.3, 14, and Java FE 5 and 6 Web madules. RE 


[Workbench default JRE 了 | Installed JREs,, | 


Dreate a new lccal server 


图 1.30 新 建 服务 器 运行 时 窗口 


由 肥 项 目 资源 管理 器 2 
“ 避 313 
bh Tencert bp 是 JAX-WS Web Services 
Hh Tomcat 70| 闪 Deployment Descriptor 11 
vB TortoiseCVS 
内 UltraEdit 
DUninstall Information 
-a » & build 
EL - . 4 区 WebContent 
文件 类 国 ，Tonest 7.0 » > META-INF 


EE ET st 


二 = 忆 ib 
图 1.32 “浏览 文件 夹 ” 对 话 框 图 1.33 项 目 创建 成 功 


(7) 单 击 “ 完 成 ”按钮 ， 在 Eclipse 中 打开 index.jsp 页 面 的 代码 窗口 ， 在 此 页 面 中 编写 输出 “欢迎 来 到 明 


日 图 书 网 ”的 内 容 ， 代 码 如 下 : 
<9%(@ page language="java" contentType="text/html: charset=UTF-8" 
pageEncoding="UTF-8"%> 

<!DOCTYPE html PUBLIC "-WW3CWDTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type” content="text/html: charset=UTF-8"> 

<title>Hello Welcome to MR</title> 

</head> 


BE RemoteSystemsTempfFiles 
官 Severs 


文中 : indexjsp 


b> BW Java Resources 


» Bi JavaScript Resources 


<center> 欢 迎 来 到 明日 图 书 网 </center> 
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(8) 在 项 目 名 称 节 点 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “运行 方式 ”/Run on Server 命令 ， 即 可 
启动 Tomcat 服务 器 运行 本 项 目 ， 运 行 结果 如 图 1.35 所 示 。 


一己 
六 papyllocalhostag P= SO) hao welcome to MR 
欢迎 来 到 明日 图 书 网 
成 100% ~ 
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国 实例 说 明 
本 实例 主要 介绍 修改 Tomcat 端口 号 的 方法 ， 以 及 当 端 口号 发 生 冲 突 时 如 何 解 决 。 
国 关键 技术 
Connector 子 元 素 下 的 port 是 设置 服务 器 端口 ， 而 connection Timeout 则 是 服务 器 连接 超时 ， 单 位 为 毫秒 。 
图 设计 过 程 
(1) 使 用 记事 本 打开 Tomcat 安装 目录 下 的 conf 文件 夹 下 的 servlet.xml 文件 。 


(2) 在 servlet.xml 文件 中 找到 以 下 代码 : 
<Connector port="8080" protocol="HTTP/1.1" 
connectionTimeout="20000" 
redirectPort="8443" /> 


(3) 将 上 面 代码 中 的 port="8080" 修 改 为 port="8081"， 即 可 将 Tomcat 的 默认 端口 设置 为 8081。 在 修改 端 
口 时 ， 应 避免 与 公用 端口 冲突 义 采 用 默认 的 8080 端口 ， 不 要 修改 ， 除 非 8080 端口 被 其 他 程序 所 占用 。 
(4) 修改 成 功 后 ， 为 了 使 新 设置 的 端口 生效 ， 还 需要 重新 启动 Tomcat 服务 器 。 
(5) 将 Tomecat 端口 号 更 改 为 8081 后 ， 重 新 启动 的 界面 如 图 1.36 所 示 。 
Ww cprogram Files\Tomcat 7.0\bin\Tomcat7.exe ee Pb” 


ey 


图 1.36 更 改 端口 号 后 重新 启动 的 界面 


14 


第 1 章 开发 环境 搭建 


实例 011 


图 实例 说 明 
本 实例 介绍 如 何 配置 Tomcat 的 虚拟 主机 。 


图 关键 技术 


关于 serverxml 中 Host 这 个 元 素 ， 只 有 在 设置 虚拟 主机 时 才 需 要 修改 。 虚 拟 主机 是 一 种 在 一 个 Web 服务 器 
上 服务 多 个 域名 的 机 制 ， 对 每 个 域名 而 言 ， 都 好 像 独 享 了 整个 主机 。 实 际 上 ， 大 多 数 的 小 型 商务 网 站 都 是 采用 
虚拟 主机 实现 的 , 这 主要 是 因为 虚拟 主机 能 直接 连接 到 Intemet 并 提供 相应 的 带宽 , 以 保障 合理 的 访问 响应 速度 。 
另外 ， 虚 拟 主机 还 能 提供 一 个 稳定 的 固定 人 P。 


图 设计 过 程 


(1) 打开 Tomecat 根 目录 下 的 conf 文件 夹 ， 然 后 用 记事 本 打开 serverxml 文件 ， 并 在 其 中 添加 如 下 代码 : 
host name="www.example.com" appBase="/home/example/webapp"> 
<Context path=" docBase="."/> </host> 


(2) Tomcat 的 server.xml 文件 在 初始 状态 下 ， 只 包括 一 个 虚拟 主机 ， 但 是 它 很 容易 被 扩充 到 支持 多 个 虚拟 
主机 。 上 面 展示 的 是 一 个 简单 的 server.xml 版 本 ， 其 中 粗 体 部 分 就 是 用 于 添加 一 个 虚拟 主机 。 每 一 个 Host 元 素 
必须 包括 一 个 或 多 个 context 元 素 ， 所 包含 的 context 元 素 中 必须 有 一 个 是 默认 的 context， 这 个 默认 的 context 
的 显示 路 径 应 该 为 空 〈 例 如 ，path=“”)。 


力 实例 说 明 


通过 对 Tomcat 目录 的 了 解 可 知 , webappas 文件 夹 是 存放 工程 包 的 位 置 .。 本 实例 主要 介绍 如 何 手动 部 署 Web 
应 用 。 


图 关键 技术 


这 种 context 片段 提供 了 一 种 便利 的 方法 来 部 署 Web 应 用 ， 不 需要 编辑 serverxml， 除 非 想 改变 默认 的 部 署 
特性 ， 在 安装 一 个 新 的 Web 应 用 时 不 需要 重新 启动 Tomcat。 
图 设计 过 程 

(1) 复制 war 文件 或 者 Web 应 用 文件 夹 (包括 Web 下 所 有 内 容 ) 到 $CATALINA_BASE\webapps 目录 下 。 

(2) 为 Web 服务 建立 一 个 只 包括 context 内 容 的 XML 片段 文件 ， 并 把 该 文件 放 到 $CATALINA_BASE\ 
webapps 目录 下 ， 这 个 Web 应 用 文件 本 身 可 以 存储 在 硬盘 的 任何 地 方 。 

(3) 部 署 Web 应 用 文件 的 另 一 种 方式 是 写 一 个 Context XML 片段 文件 ， 然 后 把 该 文件 复制 到 
$CATALINA_BASE\webapps 目录 下 。 一 个 Context 片段 并 不 是 一 个 完整 的 XML 文件 ， 只 是 一 个 context 元 素 ， 
以 及 对 该 应 用 文件 的 相应 描述 。 这 种 片段 文件 就 像 是 从 serverxml 中 提取 出 来 的 context 元 素 一 样 ， 所 以 这 种 片 
段 被 命名 为 “context 片段 ”。 如 果 想 部 署 一 个 名 叫 MyWeb.war 的 应 用 文件 ， 该 应 用 文件 使 用 realm 作为 访问 控 


制 方式 ， 可 以 使 用 下 面 这 个 片段 并 添加 以 下 代码 : 
<context path="/demo" docBase="webapps/MyWeb. war” debug="0" privileged="true"> 
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<Realm className="org.apache.catalina.realm.UserDatabaseRealm" resourceName="UserDatabase"/> 
</context> 


力 实例 说 明 


有 时 需要 限制 对 Tomcat Web 应 用 的 访问 ， 如 只 有 指定 的 主机 或 他 地 址 可 以 访问 指定 的 应 用 。 这 样 一 来 ， 
就 只 有 那些 指定 的 客户 端 可 以 访问 服务 的 内 容 。 本 实例 将 介绍 如 何在 Tomcat 下 制定 主机 访问 。 


图 关键 技术 


Tomcat 提供 了 两 个 参数 供用 户 配 置 ， 即 RemoteHostValve 和 RemoteAddrValve。 通 过 配置 这 两 个 参数 ， 可 
以 过 滤 来 自 请 求 的 主机 或 他 地址 ， 并 允许 或 拒绝 哪些 主机 /人 P。 


图 设计 过 程 
(1) 在 Apache 的 httpd 文件 中 有 对 每 个 目录 的 允许 /拒绝 指定 ， 如 可 以 把 Admin Web application 设置 成 只 


允许 本 地 访问 ， 代 码 如 下 : 
<context path="/path/to/secret files" .> 
<Valve className="org.apache.catalina.valves.RemoteAddrValve”" allow="127.0.0.1" deny=""/> 
</context> 


(2) 如 果 没 有 给 出 允许 主机 的 指定 ， 那 么 与 拒绝 主机 匹配 的 主机 就 会 被 拒绝 ， 除 此 之 外 的 都 是 允许 的 。 与 
之 类 似 ， 如 果 没 有 给 出 拒绝 主机 的 指定 ， 那 么 与 允许 主机 匹配 的 主机 就 会 被 允许 ， 除 此 之 外 的 都 是 拒绝 的 。 


实例 014 


图 实例 说 明 


为 Tomcat 添加 管理 员 ， 在 Tomcat 界面 化 管理 平台 中 可 以 看 到 所 有 加 载 的 工程 包 ， 以 及 运行 的 平台 ， 还 可 
以 对 项 目 进行 管理 ， 如 删除 和 添加 ， 来 实现 对 服务 器 的 维护 与 更 新 。 
图 设计 过 程 
(1) 打开 Tomcat 7.0 目录 下 的 conf 文件 夹 中 的 tomcat-users.xml 文件 ， 添 加 以 下 代码 : 
<user Username="zm'" password="zm" roles="admin-gui.manager-gui"/> 
(2) 重新 启动 Tomcat。 在 正 浏览 器 的 地 址 栏 中 输入 “http:Wlocalhost8080/manager”， 在 打开 的 界面 中 输入 
刚刚 添加 的 账号 和 密码 ， 如 图 1.37 所 示 。 


Windons 安 主 ~ 


位 于 Tomcat Maneger Application 的 加 各 要 locahost 委 天 下 广 全 和 
EE. 


| Be mem Ten tn 
的 + 兴 表 。 


LE Lam ] 


1.37 登录 Tomcat 界面 
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(3) 登录 之 后 即 可 进入 到 如 图 1.38 所 示 的 Tomcat Web 应 用 管理 页 面 。 在 该 页 面 中 可 以 对 项 目 进行 添加 与 
删除 管理 。 
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图 1.38 登录 Tomcat 之 后 的 界面 
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国 实例 说 明 


本 实例 介绍 的 是 如 何 优化 Tomecat 服务 器 ， 如 果 用 户 并 发 量 小 ， 系 统 可 能 不 会 出 问题 ,但 是 并 发 量 大 时 ， 系 
统 反 应 速度 迅速 下 降 ， 由 于 不 了 解 原因 拼命 在 自己 的 应 用 中 寻找 问题 ， 从 而 浪费 了 宝贵 的 时 间 。 下 面 来 看 看 
Tomcat 是 如 何 优化 的 。 
国 设计 过 程 
(1) 屏蔽 DNS 查询 
Web 应 用 程序 可 以 通过 Web 容器 提供 的 getRemoteHost0 方 法 获得 访问 Web 应 用 客户 的 他 地 址 和 名 称 ， 但 
是 这 样 会 消耗 Web 容器 的 资源 ， 并 且 还 需要 通过 人 P 地 址 和 DNS 服务 器 反 查 用 户 的 名 字 。 因 此 当 系 统 上 线 时 ， 
可 以 将 这 个 属性 关闭 ， 从 而 减少 资源 消耗 ， 那 么 Web 应 用 也 就 只 能 记录 下 也 地址 。 修 改 的 属性 是 
enableLoopups="false"。 
(2) 调整 线程 数 
Tomcat 通过 线程 池 来 为 用 户 访问 提供 响应 , 对 于 上 线 的 系统 初步 估计 用 户 并 发 数量 后 , 再 调整 线程 池 容 量 。 
例如 ， 用 户 并 发 数量 在 100 左右 时 ， 可 以 设置 minProcessors="100"，maxProcessors="100"。 将 最 大 和 最 小 设置 
为 一 样 后， 线程 池 不 会 再 释放 空闲 的 线程 ， 当 用 户 访问 突然 增加 时 ， 不 需要 再 消耗 系统 资源 去 创建 新 的 线程 。 


qd 
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(3) 调整 最 大 连接 数 

这 个 其 实 最 复杂 ， 即 使 用 户 并 发 量 大 ， 但 是 系统 反应 速度 快 ， 也 没 必要 把 这 个 值 设 置 太 高 ， 高 了 系统 需要 
消耗 大 量 的 资源 去 切换 线程 ， 但 是 如 果 设 置 太 低 也 会 造成 应 用 无 法 满足 用 户 并 发 需要 。 因 此 设置 这 个 最 好 能 
结合 整个 系统 的 跟踪 与 调 优 ， 使 系统 达到 最 好 的 平稳 状态 ， 一 般 设置 为 maxProcessors 的 1.5 倍 即 可 。 

(4) 调整 网 络 超时 

主要 是 HITP 协议 也 有 个 连接 过 程 ， 客 户 端 连 接 到 服务 器 上 后 ， 如 果 长 时 间 没 有 得 到 处 理 就 会 被 释放 。 如 
果 服 务 器 处 理 速度 较 慢 ， 但 是 希望 每 个 用 户 都 能 得 到 有 效 处 理 ， 或 者 网 络 环境 不 好 ， 需 要 保证 用 户 不 会 因为 超 
时 中 断 ， 也 可 以 把 时 间 加 长 。 但 是 一 般 设 置 成 connectionTimeout="30000" 即 可 。 太 长 对 系统 来 说 价值 不 大 ， 反 
而 会 浪费 系统 资源 在 无 谓 的 长 连接 上 。 

(5) 具体 修改 如 下 
minProcessors: 最 小 空闲 连接 线程 数 ， 用 于 提高 系统 处 理性 能 ， 默 认 值 为 10。 
maxProcessors: 最 大 连接 线程 数 ， 即 并 发 处 理 的 最 大 请 求 数 ， 默 认 值 为 75。 
acceptCount: 允许 的 最 大 连接 数 ， 应 大 于 等 于 maxProcessors， 默 认 值 为 100。 
enableLookups: 是 否 反 查 域名 ， 取 值 为 true 或 false。 为 了 提高 处 理 能 力 ， 应 设置 为 false。 
connectionTimeout: 网 络 连 接 超时 ， 单 位 为 毫秒 。 设 置 为 0 表示 永 不 超时 ， 但 这 样 设置 存在 隐患 ， 通 
常 可 设置 为 20000 毫秒 。 
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1.3 Linux 系统 配置 JDK 与 Tomcat 服务 器 
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图 实例 说 明 


本 实例 介绍 的 是 如 何在 Linux 系统 下 安装 配置 JDK。 具 体 是 通过 shell 命令 来 实现 JDK 的 安装 以 及 配置 ， 
应 用 的 是 Linux 5.4 服务 器 版 本 。 
上 说明: 在 阅读 本 实例 之 前 ， 需 要 读者 对 Linux 系统 环境 有 一 定 的 了 解 ; 否则 ， 可 以 直接 越过 本 实例 。 
图 设计 过 程 
(1) 在 安装 JDK 之 前 ， 首 先 访问 JDK 的 官方 网 站 http://java.sun.com/j2se/1.4.2/download.html)， 下 载 一 
个 Linux Platform 的 JDK, 建议 下 载 RPM, 自 解压 格式 的 (RPM in self-extracting file, j2sdk-1 4 2_06-linux-i586- 
1pm.bin )。 


(2) 上 传 到 Linux 服务 器 上 ， 在 shell 下 执行 以 下 命令 : 


[root@LinuxServer Ipmj# chmod 755 j2sdk-1 4 2 06-linux-i586-rpm.bin 


[root@LinuxServer rpm]# /ij2sdk-1_4_2_06-linux-i586-rpm.bin 
(3) 执行 以 上 命令 之 后 , 会 有 一 段 Sun 的 安装 注册 协议 条 款 , 按 几 次 空格 键 ， 当 询问 是 否 同意 安装 协议 时 ， 
再 输入 “yes” 即 可 ， 代 码 如 下 : 


Sun Microsystems, Inc. 

Binary Code License Agreement 

forthe 

JAVATM 2 SOFTWARE DEVELOPMENT KIT (J2SDK). STANDARD 
EDITION, VERSION 1.4.2 X 


Do you agree to the above license ferma? [yes or nolyes 
Unpacking 
Cedenomee 
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UnZipSFX 5.40 of 28 November 1998. by Info-ZIP (Zip-Bugs@lists.wku.edy). 
inflating: j2sdk-1 4 2_06-linux-i586.pm 


Done. 
(4) 程序 会 自动 生成 一 个 j2sdk-1 4 2 _06-linux-i586.rpm 文件 ， 这 是 主 程序 包 。 下 面 进行 安装 ， 安 装 命令 
如 下 : 
[root@LinuxServer rpmjftmpm -ivh j2sdk-1_ 4 2 _06-linux-i586.pm 
1:j2sdk # # [1009%] 
(5) 安装 完 JDK 之 后 ， 还 需要 配置 JDK 的 环境 变量 ， 这 里 用 export 命令 直接 在 shell 下 设置 ， 具 体 命令 
如 下 : 
[root@LinuxServer ppmj# export JAVA_HOME=/usr/java/j2sdk1.4.2_06 
[root@LinuxServer rpm]# export 


CLASSPATH=.:$JAVA_HOME/lib/dtjar:$JAVA_ HOME/lib/toolsjar 
[root@LinuxServer rpmj# export PATH=$PATH:$JAVA_HOME/bin 


(6) 当然 ， 在 步骤 (5) 中 设置 环境 变量 是 可 以 生效 的 ， 但 是 只 对 当前 shell 生效 。 如 果 从 另外 一 个 shell 
登录 ， 将 不 能 使 用 刚才 设置 的 变量 。 所 以 最 好 的 方法 还 是 修改 .bashrc 文件 ， 具 体 修改 命令 如 下 : 


[root@LinuxServer mpm]#wi .bashre 

set JAVA_HOME=/usr/java/j2sdk1.4.2_06 

export JAVA_HOME 

set PATH=$PATH:$JAVA_HOME/bin 

export PATH 

set CLASSPATH=.:$JAVA_HOME/lib/dtjar:$JAVA_HOME/lib/tools jar 

export CLASSPATH 

(7) 当然 也 可 以 通过 更 改 /etc/profile 来 实现 ， 不 过 不 推荐 这 么 做 ， 因 为 这 样 设置 将 对 所 有 用 户 的 shell 都 生 

效 ， 从 而 对 系统 安全 会 产生 影响 。 下 面 来 验证 一 下 变量 设置 是 否 生效 〈 在 验证 前 先 logout， 再 重新 登录 )， 代 码 
如 下 ; 

[root@LinuxServer rpm]# echo $JAVA HOME 

/usr/java/i2sdk1.4.2_06/ 

[root@LinuxServer rpm]# echo $CLASSPATH 

/usr/java/i2sdk1.4.2_06/lib/dt.jar:/usr/java/j2sdk1.4.2_06/lib/tools.jar 

[root@LinuxServer rpm]# echo $PATH 

/usr/java/j2sdk1.4.2_06/bin/:/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/local/bin: 

/sbin:/bin:/usr/sbin:/usr/bin:/usr/X11R6/bin:/root/bin 

[root@LinuxServer rpm]# JAVA-version 

JAVA version "1.4.2_06" 

JAVA(CTM) 2 Runtime Environment, Standard Edition (build 1.4.2_06-b03) 

JAVA HotSpot(T™) Client VM (build 1.4.2_06-b03, mixed mode) 


(8) 在 安装 配置 完 JDK 之 后 ， 看 看 IDK 是 否 能 正常 工作 。 下 面 来 写 一 个 测试 文件 testjava， 代 码 如 下 : 
[root@LinuxServer rpml]#vi testjava 
class test { 
public static void main(String[] args) 
{ 


} 
(9) 保存 退出 。 下 面 来 编译 、 执 行 ， 具 体 命 令 如 下 : 
[root@LinuxServer text]# javac test.java 
[root@LinuxServer text}# JAVA test 


当 运 行 java test 命令 之 后 ， 将 会 打印 出 字符 串 “Hello World!”。 
(10) 如 果 要 使 某 个 用 户 具有 运行 Java 命令 的 权限 ， 只 要 修改 其 bash 初始 化 文件 即 可 。 如 要 授予 用 户 long 
ware 运行 Java 命令 的 权限 ， 执 行 以 下 命令 : 


[root@LinuxServer rootj# vi /home/longware/.bashre 

set JAVA_ HOME=/usr/java/j2sdk1.4.2_06 

export JAVA_HOME 

set PATH=$PATH:$JAVA_ HOME/bin 

export PATH 

set CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/toolsjar 
export CLASSPATH 


(11) 至 此 ，Linux 系统 上 的 JDK 安装 完毕 。 


System.out println("Hello World!"); 
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实例 017 


图 实例 说 明 


实例 016 介绍 了 如 何在 Linux 系统 下 安装 配置 DK， 在 此 之 后 ， 还 有 一 个 必须 要 完成 的 任务 ， 就 是 安装 配 


置 Tomcat 服务 器 。 本 实例 介绍 的 是 如 何在 Linux 系统 下 安装 配置 Tomcat 服务 器 。 
[说明 : 在 阅读 本 实例 之 前 ， 需 要 读者 对 Linux 系统 环境 有 一 定 的 了 解 ; 否则 ， 可 以 直接 越过 本 实例 。 


图 设计 过 程 
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(1) 首先 要 把 apache-tomcat-6.0.20.tar.gz 上 传 到 Linux， 然 后 开始 执行 下 面 的 命令 : 


(2) 使 用 tar-zxvf apache-tomcat-6.0.20.tar.gz 解压 文件 ， 屏 幕 将 显示 解压 信息 ， 命 令 如 下 : 


(3) 使 用 1 显示 出 Tomcat 文件 夹 apache-tomcat-6.0.20， 命 令 如 下 : 


(4) 使 用 mv apache-tomcat-6.0.20/usrlocal 把 文件 夹 移动 到 其 usr 目录 下 ， 具 体 命令 如 下 : 


(6) 进入 到 tomcat6/bin 目录 下 ，startup.sh 和 catalina.sh 这 两 个 文件 能 启动 Tomcat， 命 令 如 下 : 


(7) 使 用 ./startup.sh 启动 服务 ， 命 令 如 下 : 
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(8) 如 果 没 什么 问题 ， 则 Tomcat 安装 成 功 ， 但 可 能 会 出 现 类 似 如 下 内 容 的 错误 : 
"[root@localhost bin]# ./startup.sh 
Neither the JAVA_HOME nor the JRE_ HOME environment variable is defined 
At least one of these environment variable is needed to run this programy 


(9) 如 果 出 现 以 上 错误 ， 是 由 于 找 不 到 java_home 的 路 径 造 成 的 ， 笔 者 在 安装 时 也 出 现 过 这 些 问 题 。 这 个 
题 的 解决 方法 就 是 ， 按 照 自己 在 配置 JDK 的 环境 变量 时 的 java_home 的 路 径 去 制定 好 java_home 的 路 径 。 使 
JAVA _HOME=/usr/java/jdk1.6.0_16 和 export JAVA_HOME 设置 变量 ， 再 执行 ./startup.sh， 显 示 如 下 信息 : 
"Using CATALINA. BASE: /usr/tomcats 
Using CATALINA_ HOME: /ust/tomcats 
Using CATALINA_TMPDIR: /ust/tomcats/temp 
Using JRE HOME: /usrljavalidk1.6.0 16 
Using CLASSPATH: & /usr/tomeats/bin/bootstrapjar" 
(10) 使 用 ps -ef |grep tomcat 可 以 显示 Tomcat 已 启动 ， 或 者 应 用 以 下 命令 : 


(11) Tomcat 服务 器 默认 为 8080 端口 ， 打 开 
面 ， 说 明 Tomcat 服务 器 已 安装 成 功 。 

(12) 如 果 不 能 访问 Tomcat 的 首页 界面 ， 本 地 上 网 则 先 关 闭 防火 墙 service iptables stop， 应 用 ./shutdown.sh 
命令 结束 Tomcat 服务 ， 也 可 以 使 用 kill PID 命令 杀 死 Tomcat 进程 。 下 面 把 Tomcat 添加 到 开机 启动 ， 修 改 
/etc/rc.local 文件 ， 在 文件 的 最 后 添加 如 下 内 容 : 

JAVA. HOME=/ust/share/jdk1.6.0_13 


export JAVA _ HOME 
/usr/local/tomcat6/bin/startup.sh 


执行 如 下 命令 : 


览 器 ， 测 试 本 地 是 否 能 上 网 ， 如 果 能 访问 Tomcat 的 首页 界 


然后 执行 如 下 命令 : 


最 后 添加 内 容 ， 保 存 退 出 ， 命 令 如 下 : 


至 此 ，Tomecat 开机 即 可 启动 。 
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力 实例 说 明 

程序 开发 中 对 于 业务 代码 的 部 分 功能 需要 配合 调试 信息 以 确定 代码 执行 流程 和 数据 的 正确 性 ， 当 程序 出 现 
严重 问题 时 还 要 输出 警告 信息 ， 这 样 可 以 在 调试 中 完成 程序 开发 。 本 实例 将 介绍 如 何 输出 调试 信息 与 错误 提示 
信息 ， 实 例 运 行 结果 如 图 2.1 所 示 。 


图 关键 技术 


本 实例 使 用 System 类 中 的 out 和 err 两 个 成 员 变 量 来 完成 调试 信息 与 
错误 信息 的 输出 ， 它 们 两 个 都 是 System 的 类 变量 ， 也 就 是 说 是 使 用 static 
关键 字 修饰 的 。out 是 标准 调试 信息 的 输出 流 , err 是 标准 错误 信息 输出 流 。 
本 实例 中 调用 了 两 个 输出 流通 用 的 printin0 方 法 来 输出 一 行 数据 。 该 方法 图 2.1 实例 运行 
的 声明 如 下 : 

public void println(String x) 

参数 说 明 

x: 被 输出 到 控制 台 的 字符 串 。 


图 设计 过 程 
创建 PrintErrorAndDebug 类 ， 并 完成 该 类 的 main0 主 方法 ， 在 该 方法 中 分 别 输出 调试 信息 与 错误 信息 ， 关 
键 代码 如 下 


public class Print { 
Bo static void main(String[] args) 
aid 太 取 好 运行 了 。 

克 出 错误 信息 
Systenm.er7.printin(" 在 运行 期 间 手 动 输出 一 个 错误 信息 :"); 
Systenm.er7.printin("\t 该 软件 没有 买 保险 ， 请 注意 安全 "): 
System.out.printin("PrintErrorAndDebug.main()"): 
System.out.printin("main0 方 法 运行 结束 。"); 

} 


汶 
瀣 


} 
国 秘笈 心 法 


System 类 的 out 与 err 是 两 个 类 成 员 变量 ， 不 用 创建 System 类 的 实例 对 象 就 可 以 直接 使 用 。 虽 然 都 是 标准 输 
出 流 ， 但 是 应 该 灵活 运用 它们 完成 不 同 的 信息 输出 。out 主要 是 输出 调试 信息 的 输出 流 ， 在 Eclipse 控制 台中 以 黑 
色 字体 标识 ; 而 err 是 错误 信息 的 标准 输出 流 ， 用 于 输出 紧急 错误 信息 ， 所 以 在 Eclipse 控制 台中 以 红色 字体 显示 


图 实例 说 明 
System 类 除了 out 和 err 两 个 输出 流 之 外 ,还 有 站 输入 流 的 实例 对 象 作为 类 成 员 ， 它 可 以 接收 用 户 的 输入 。 


的 ) 
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本 实例 通过 该 输入 流 实现 从 控制 台 接收 用 户 输入 文本 , 并 提示 B85 = 站 =e 
该 文本 的 长 度 信息 ， 实 例 运行 结果 如 图 2.2 所 示 。 ete pease ee ene engan i ER EL 
图 关键 技术 Bae 


本 实例 的 关键 技术 用 到 了 System 类 的 输入 流 ， 也 就 是 类 
变量 in, 它 可 以 接收 用 户 的 输入 信息 ,并且 是 标准 的 输入 流 实 
例 对 象 。 另 外 ，Scanner 类 是 Java 的 扫描 器 类 ， 它 可 以 从 输入 2.2 ”实例 运行 结果 
流 中 读 取 指 定 类 型 的 数据 或 字符 串 。 本 实例 使 用 Scanner 类 封 
装 了 输入 流 对 象 ， 并 使 用 nextLine0 方 法 从 输入 流 中 获取 用 户 输入 的 整 行文 本 字符 串 ， 该 方法 的 声明 如 下 : 
public String nextLine0) 
该 方法 从 扫描 器 封装 的 输入 流 中 获取 一 行文 本 字符 串 作 为 方法 的 返回 值 。 
图 设计 过 程 
创建 mputCode 类 ， 在 该 类 的 主 方法 中 创建 Scanner 扫描 器 来 封装 System 类 的 ip 输入 流 ， 然 后 提示 用 户 输 
入 身份 证 号 码 ， 并 输出 用 户 身份 证 号 码 的 位 数 ， 关 键 代 码 如 下 : 


public class InputCode { 
ee static void | args) { 
mew Scanner(System.in); // 创 建 输入 流 扫描 器 
i "请 输入 你 的 身份 证 号 : "); 。 “”// 提 示 用 户 输入 
String line = scannernextLineO: /1/ 获 取 用 户 输入 的 一 行文 本 
/打印 对 输入 文本 的 描述 


System.out.printin(" 原 来 你 身份 证 号 是 " + line.length0 + "位 数字 的 啊 "); 
} 
} 


图 秘笈 心 法 
InputStream 输入 流 以 字 节 为 单位 来 获取 数据 ， 而 且 需要 复杂 的 判断 并 创建 字 节 数组 作为 缓冲 ， 最 主要 的 是 


字 节 转 换 为 字符 时 容易 出 现 中 文 乱码 的 情况 。 所 以 对 于 字符 数据 的 读 取 ， 应 该 使 用 扫描 器 进行 封装 ， 然 后 获取 
字符 串 类 型 的 数据 。 


实例 


图 实例 说 明 

System 类 中 的 out 成 员 变 量 是 Java 的 标准 输出 流 , 程序 常用 它 来 输出 调试 信息 , out 成 员 变 量 被 定义 为 final 
类 型 的 ， 无 法 直接 重新 复制 ， 但 是 可 以 通过 setOut0 方 法 来 设置 新 的 输出 流 。 本 实例 利用 该 方法 实现 了 输出 流 的 
重 定向 ， 把 它 指向 一 个 文件 输出 流 ， 从 而 实现 了 日 志 功能 。 程 序 运行 后 绘制 控制 台 提示 运行 结束 信息 ， 如 图 2.3 
所 示 ; 但 是 在 运行 过 程 中 的 步骤 都 保存 到 了 日 志文 件 中 ， 如 图 2.4 所 示 。 


年 截 变量 成 功 定义 ， 初 始 值 为 18 

上 初始 值 为 女 
个 变量 为 info 闻 符 此 变量， 

吉 这 是 个 女孩 子 ， 让 i 


tid Se i | 


图 2.3 控制 台 运行 结果 图 2.4 日 志文 件 内 容 


图 关键 技术 
本 实例 应 用 的 关键 技术 是 调用 了 System 类 的 setOut0 方 法 改变 了 输出 流 ，System 类 的 out、err 和 了 成 员 变 
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量 是 final 类 型 的 ， 不 能 直接 赋值 ， 要 通过 相应 的 方法 来 改变 流 。 下 面 分 别 介绍 改变 这 3 个 成 员 变 量 的 方法 。 
(1) setOut0 方 法 
该 方法 用 于 重新 分 配 System 类 的 标准 输出 流 ， 该 方法 的 声明 如 下 : 
public static void setOut(PrintStream out) 
参数 说 明 
out: 新 的 PrintStream 输出 流 对 象 。 
(2) setEr0 方 法 
该 方法 将 重新 分 配 System 类 的 标准 错误 输出 流 ， 该 方法 的 声明 如 下 : 
public static void setErr(PrintStream err) 
参数 说 明 
err: 新 的 PrintStream 输出 流 对 象 。 
(3) setIn0 方 法 
该 方法 将 重新 设置 System 类 的 in 成 员 变 量 ， 即 标准 输入 流 。 
图 设计 过 程 
创建 RedirectOutputStream 类 ,编写 该 类 的 main0 主 方法 , 在 该 方法 中 保存 System 类 的 out 成 员 变 量 为 临时 
变量 ， 然 后 创建 一 个 新 的 文件 输出 流 ， 并 把 这 个 输出 流 设置 为 System 类 新 的 输出 流 。 在 程序 关键 位 置 输出 调试 
信息 ， 这 些 调试 信息 将 通过 新 的 输出 流 保存 到 日 志文 件 中 。 最 后 恢复 原 有 输出 流 并 输出 程序 运行 结束 信息 ， 关 


键 代码 如 下 : 
import java.io.FileNotFoundException; 
import java.io.PrintStream:; 
Ppublic class RedirectOut { 
public static void main(String[] args) { 
try{ 
PrintStream out = System.out:// 保 存 原 输出 流 
PrintStream ps=new PrintStream("./log.txt");// 创 建文 件 输出 流 
System.setOut(ps):;// 设 置 使 用 新 的 输出 流 
int age=18;// 定 义 整 型 变量 
System.outprintln(" 年 龄 变量 成 功 定 义 ， 初 始 值 为 18"); 
String sex=" 女 ":/ 定 义 字符 串 变量 
System.out.printin(" 性 别 变量 成 功 定义 ， 初 始 值 为 女 "); 
// 整 合 两 个 变量 
String info=" 这 是 个 "tsex+" 孩 子 ， 应 该 有 "taget+" 岁 了 。 
System.out.printin(" 整 合 两 个 变量 为 info 字符 串 变量 ， 其 站 果 是 "tinfo); 
System.setOut(out):// 恢 复原 有 输出 流 
System.out.printin(" 程 序 运行 完毕 ， 请 查看 日 志文 件 。"): 
}catch een af 
e.printStackTrace(): 
} 
} 
} 


图 秘笈 心 法 
参考 本 实例 的 做 法 ,可 以 把 err 标准 错误 输出 流 也 重 定向 到 其 他 位 置 。 例 如 ， 可 以 定义 在 与 标准 输出 流 相 同 
的 文件 输出 流 中 ， 但 是 在 输出 错误 信息 时 ， 添 加 “警告 : ”字样 ， 这 样 可 以 为 日 志 添加 信息 级 别 。 


实例 021 


图 实例 说 明 


Java 基本 数据 类 型 之 间 存 在 自动 类 型 转换 与 强制 类 型 转换 两 种 转换 方法 。 本 实例 将 演示 这 两 种 类 型 转换 的 
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用 法 ， 实 例 运 行 结果 如 图 2.5 所 示 。 注 意 long 类 型 向 低 类 型 short 转 E 国 | 
换 时 发 生 的 数据 丢失 。 az | 


| 
图 设计 过 程 


革 目 " 
创建 TypeConversion 类 , 在 该 类 的 主 方法 中 创建 各 种 基本 类 型 的 

变量 , 在 输出 语句 中 分 别 输出 所 有 变量 累加 值 .注意 每 次 累加 值 的 数 

据 类 型 ， 所 有 整数 运算 都 被 自动 转换 为 int 类 型 之 后 再 进行 运算 ， 所 

有 浮 点 数值 都 被 自动 转换 为 double 类 型 再 进行 运算 。 最 后 把 高 类 型 

数据 向 低 类 型 数据 进行 强制 类 型 转换 ， 并 注意 运算 结果 是 否 丢 失 数 

据 ， 关 键 代码 如 下 : 


public class TypeConversion { 
public static void main(String[] args) { 
byte b= 127; 
char c="W'; 
short s = 23561; 
inti= 3333; 
long 1 = 400000L; 
float f= 3.14159F; 
double d= 54.523; 
// 低 类 型 向 高 类 型 自动 转换 
System.out.printin(" 累 加 byte 等 于 : "+D): 
System.out.printin(" 累 加 char 等 于 : "+ (b++c); 
System.out.printin(" 累 加 short 等 于 : "+ b+c+Ss) 
System.out.printin(" 累 加 int 等 于 : "+ b+c+s 二 刘 : 
System.out.printin(" 累 加 long 等 于 : "+ b+c+s+i+D); 
System.out.printin(" 累 加 float 等 于 : "+(b+c+s+i+1++ 人 ); 
System.out.printin(" 累 加 double 等 于 : "+(b+c+s+i+1+f+d)); 
System.out.printin(" 把 long 强制 类 型 转换 为 int: "+ (inb D); // 高 类 型 到 低 类 型 的 强制 转换 
System.outprintin(" 把 int 强制 类 型 转换 为 short: "+ (short) D); // 高 类 型 到 低 类 型 转换 会 丢失 数据 
System.out.printin(" 把 double 强制 类 型 转换 为 nt: "+ (int) d); 1/ 实数 到 整数 转换 将 舍弃 小 数 部 分 
System.outprintin(" 把 short 强制 类 型 转换 为 char: "+ (char) s); // 整 数 到 字符 类 型 的 转换 将 获取 对 应 编码 的 字符 
} 
} 


图 秘笈 心 法 

在 输出 语句 中 ， 经 常 对 输出 的 数字 添加 一 个 描述 前 缀 ， 如 “他 的 年 龄 是 : 45”。 但 是 如 果 45 是 一 个 数学 加 
法 的 公式 ， 那 么 很 容易 出 现 错误 的 运算 。 首 先 第 一 个 数字 与 字符 串 会 通过 + 符号 实现 字符 串 连接 ， 而 其 后 的 所 有 
数字 加 法 运算 都 会 被 看 作 字符 串 的 连接 操作 。 解 决 办 法 是 把 所 有 数字 加 法 用 括号 括 起 来 。 


2.5 实例 运行 结果 
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力 实例 说 明 

本 实例 通过 位 运算 的 异 或 运算 符 “^” 把 字符 串 与 一 个 指定 的 值 进行 异 或 运算 ， 从 而 改变 字符 串 每 个 字符 的 
值 ， 这 样 就 可 以 得 到 一 个 加 密 后 的 字符 串 ， 如 图 2.6 所 示 。 当 把 加 密 后 的 字符 串 作 为 程序 输入 内 容 ， 异 或 运算 
会 把 加 密 后 的 字符 串 还 原 为 原 有 字符 串 的 值 ， 如 图 2.7 所 示 。 
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到 其 演 


目 注 He 名 | 区 标 刁 必 和 出 Severs 腾 Daaseurcebnpl 
去 其 滨 | 习 


1 或 村 时 加 主 或 基 守 时 和 下 


人 ean 
图 2.6 加 密 效果 图 2.7 解密 效果 
图 设计 过 程 


创建 Example 类 , 在 该 类 的 主 方法 中 创建 System 类 的 标准 输入 流 的 扫描 器 对 象 ， 提示 用 户 输入 一 个 英文 的 
字符 串 或 者 要 解密 的 字符 串 ， 然 后 通过 扫描 器 获取 用 户 输入 的 字符 串 ， 经 过 加 密 或 解密 后 ， 把 字符 串通 过 错误 
流 输出 到 控制 台 ， 关 键 代码 如 下 : 


import java.util.Scanner; 
public class Example { 
public static void main(String[] args) 的 
Scanner scan = new 


Scanner(Syst 
System.out.printin(" 请 给 入 英文 学 特 下 或 解密 字符 站 


String password = scan.nextLine(); 1/ 获取 用 户 输入 
char[] array = password.toCharArrayO; /获取 字符 数组 
for (inti= 0; i< array.length; i++H) { /遍历 字符 数组 


array[i] = (char) (array[i] ^ 20000); // 对 每 个 数组 元 素 进行 异 或 运算 
} 
System.out.println(" 加 密 或 解密 结果 如 下 : "); 
System.err.printIn(new String(array)); // 输 出 密 钥 
} 


[加 说 明 : 程序 最 后 使 用 标准 错误 输出 流 不 是 用 于 输出 错误 信息 ， 而 是 利用 了 其 在 Eclipse 控制 台 以 红色 显示 的 
特性 来 突出 显示 。 
图 秘笈 心 法 


灵活 运用 位 运算 可 以 实现 很 多 高 级 、 高 效 的 算法 。 例 如 ， 一 个 数字 的 位 移 运算 ， 每 左 移 n 位 就 等 于 这 个 数 
乘 以 2 的 n 次 方 ， 每 右 移 n 位 就 等 于 这 个 数 除 以 2 的 na 次 方 。 而 且 这 个 算法 非常 快 。 


实 俩 
实例 023 实用 指数 : 女友 友 妆 | 


Ns 


力 实例 说 明 


三 元 运算 符 是 让 else 条 件 语 句 的 简写 格式 , 它 可 以 完成 简单 ss Ea Di We i 6 
的 条 件 判 断 。 本 实例 利用 这 个 三 元 运算 符 实现 了 奇偶 数 的 判断 , 程 ep nh 
序 要 求 用 户 输入 一 个 整数 ,然后 程序 判断 是 奇数 还 是 偶数 并 输出 到 
控制 台中 ， 实 例 运 行 结果 如 图 2.8 所 示 。 


图 关键 技术 
2.8 实例 运行 结果 
本 实例 的 关键 内 容 就 是 以 三 元 运算 符 实现 简单 的 条 件 判断 ,其 
语法 格式 如 下 : 
条 件 运 算 ? 运 算 结果 1: 运 算 结 果 2:; 


如 果 条 件 运算 结果 为 tue， 返 回 值 就 是 运算 结果 1， 否 则 返回 结果 2。 
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另外 ， 本 实例 使 用 扫描 器 的 nextLong0 方 法 直接 获取 整 型 数据 ， 避 免 了 类 型 转换 等 业务 代码 ， 该 方法 的 声 
明 如 下 : 

Ppublic long nextLongO 

该 方法 返回 一 个 long 类 型 的 数值 ， 这 个 数 是 从 扫描 器 封装 的 输入 流 中 获取 的 。 
图 设计 过 程 

创建 ParityCheck 类 ， 在 该 类 的 主 方法 中 创建 标准 输入 流 的 扫描 器 对 象 ， 提 示 用 户 输入 一 个 整数 ， 并 通过 扫 
描 器 的 方法 来 接收 一 个 整数 ， 通 过 三 元 运算 符 判 断 该 数字 与 2 的 余数 ， 如 果 余 数 为 0 说 明 其 是 偶数 ， 否 则 是 奇 
数 ， 关 键 代 码 如 下 : 


import java.util.Scanner: 
public class ParityCheck { 
public static void main(String[] args) { 
Scanner scan = new Scanner(System.in); 。“”// 创 建 输入 流 扫描 器 
System.out.printin(" 请 输入 一 个 整数 : "); 
long number = scan nextLongO; /获取 用 户 输入 的 整数 
String check = (number % 2 一 0) ? "这 个 数字 是 :偶数 " : "这 个 数字 是 :奇数 "; 
System.out.printin(check); 
} 
} 


国 秘笈 心 法 
% 运 算 符 的 用 途 非 常 广泛 ， 它 能 够 实现 数据 分 页 ， 最 简单 的 方法 是 可 以 通过 计算 奇偶 数 的 方法 把 数组 交叉 
分 成 两 个 数组 。 它 还 可 以 限制 数字 的 范围 ， 如 (N%5==-0) 可 以 限制 数字 在 0 一 4 的 范围 内 。 


力 实例 说 明 


浮 点 运算 的 典型 实例 是 货币 运算 , 在 商品 金额 计算 中 , 经 常会 涉及 小 数 运算 。 例如, 某 个 商品 的 价格 是 1.10 
元 ， 而 顾客 现 有 金额 是 2 元 整 。 在 计算 机 中 所 有 数字 都 是 使 用 二 进 制 进行 存储 的 ， 而 二 进 制 无 法 精确 地 表示 所 
有 的 小 数 ， 所 以 使 用 基本 数据 类 型 进行 小 数 运算 会 有 一 i = = 
些 误差 ， 本 实例 将 通过 BigDecimal 类 实现 精确 的 小 数 运 司 加 | 


= AccuratelyHlcat LJava 应 王 程 序 ] i ram fil tbe T.0.45\binVavaw' 人 2013， 
， 实 例 运行 结果 如 图 2.9 所 示 。 
算 2 0.8999999999999999 
键 技术 Re 
图 关键 技术 We 


本 实例 在 完成 浮 点 数 精确 计算 的 过 程 中 使 用 了 
BigDecimal 类 ， 它 用 于 大 数字 的 精确 计算 。 本 实例 调用 
了 该 类 的 subtract() 方 法 实现 减法 运算 。 下 面 介 绍 该 类 的 
运算 方法 。 

(1) 加 法 

该 方法 实现 两 个 BigDecimal 类 实例 对 象 的 加 法 运算 , 并 将 运算 结果 作为 方法 的 返回 值 。 该 方法 的 声明 如 下 : 

public BigDecimal add(BigDecimal augend) 

参数 说 明 

augend: 与 当前 对 象 执行 加 法 的 操作 数 。 

(2) 减法 

该 方法 实现 两 个 BigDecimal 类 实例 对 象 的 减法 运算 , 并 将 运算 结果 作为 方法 的 返回 值 。 该 方法 的 声明 如 下 : 

public BigDecimal subtract(BigDecimal subtrahend) 


2.9 ”实例 运行 结果 
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参数 说 明 
subtrahend: 被 当前 对 象 执行 减法 的 操作 数 。 
(3) 乘法 
该 方法 实现 两 个 BigDecimal 类 实例 对 象 的 乘法 运算 , 并 将 运算 结果 作为 方法 的 返回 值 。 该 方法 的 声明 如 下 : 
public BigDecimal multiply(BigDecimal multiplicand) 
参数 说 明 
multiplicand: 乘法 运算 中 的 乘 数 。 
(4) 除法 
该 方法 实现 两 个 BigDecimal 类 实例 对 象 的 除法 运算 , 并 将 运算 结果 作为 方法 的 返回 值 。 该 方法 的 声明 如 下 : 
public BigDecimal divide(BigDecimal divisor) 
参数 说 明 
divisor: 除法 运算 中 的 除数 。 
图 设计 过 程 
创建 AccuratelyFloat 类 ， 在 该 类 的 主 方法 中 创建 double 类 型 的 浮 点 数 变量 并 输出 它们 相 减 的 运算 结果 ， 然 
后 以 BigDecimal 类 的 实例 再 一 次 完成 同样 的 运算 ， 对 比 运行 结果 哪个 更 精确 ， 关 键 代码 如 下 : 
import java.math.BigDecimal; 
public class AccuratelyFloat { 
Ppublic static void main(String[] args) { 
double money = 2; // 现 有 金额 
double price = 1.1; /商品 价格 
double result=money - Pri 
System.out.printin(" 和 "): 
System.outprintln(" 剩 余 金额 : "+result); /| 输出 运算 结果 
1/ 精确 浮 点 数 的 解决 方法 
BigDecimal moneyl = new BigDecimal("2"); // 现 有 金额 
BigDecimal pricel = new BigDecimal("1.1"); // 单 击 商品 
BigDecimal resultl=moneyl.subtract(pricel); 
System.out.printin(" 精 确 计算 "); 
System.outprintln(" 剩 余 金额 : "+result]); /| 输出 精确 结果 
} 
} 


85 技巧 : 这 里 创建 BigDecimal 类 的 实例 时 ， 在 构造 方法 中 一 定 要 使 用 数字 字符 囊 作为 参数 ; 如 果 直 接 使 用 浮 
点 数 或 该 类 型 的 变量 作为 参数 ， 那 么 构造 方法 接收 的 是 经 过 二 进 制 存储 的 浮 点 数 ， 那 样 就 会 是 不 精 
确 的 浮 点 数 。 

图 秘笈 心 法 

对 于 商业 程序 的 开发 ， 一 定 要 注意 其 中 的 货币 运算 。 因 为 计算 机 无 法 通过 二 进 制 精确 地 表示 所 有 小 数 ， 所 

以 计算 机 中 的 小 数 运算 会 有 一 定 的 误差 。 虽 然 误 差 非常 小 ， 但 是 货币 运算 可 能 会 操作 多 个 有 误差 的 运算 结果 ， 

长 期 的 数据 累计 会 造成 更 大 的 误差 ， 特 别 是 银行 使 用 的 系统 不 允许 任何 微小 的 误差 ， 所 以 读者 应 熟练 掌握 

BigDecimal 类 的 用 法 。 


实例 025 


力 实例 说 明 
程序 开发 中 常用 的 乘法 运算 是 通过 “*” 运 算 符 或 者 BigDecimal 类 的 multiply0 方 法 实现 的 。 但 是 本 实例 将 
介绍 在 这 两 种 方法 之 外 如 何 实现 乘法 ， 而 且 实现 的 运算 效率 非常 高 ， 实 例 运 行 结 果 如 图 2.10 所 示 。 
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时 0s 和 司 属 & 入 Saves 狂 babsourceBph 


Snppe 


读数 字 于 以 16 的 运算 续 宁 为 : 720 四 


图 2.10 实例 运行 结果 
图 设计 过 程 
创建 Example 类 ， 在 该 类 的 主 方法 中 接收 用 户 输入 的 一 个 整数 ， 然 后 对 该 整数 执行 位 运算 中 的 左 移 操作 ， 
并 输出 运算 结果 ， 关 键 代码 如 下 : 


import java.util.Scanner; 
public class Example { 
public static void main(String[] args) { 
Scanner scan=new Scanner(System.in);// 创 建 扫描 器 
System.out.printin(" 请 输入 一 个 整数 "); 
long number = scan nextLong0:// 获 取 输 入 的 整数 
System.outprintin(" 你 输入 的 数字 是 : "+number); 
System.outprintln(" 该 数字 乘 以 2 的 运算 结果 为 : "+(number<<1)); 
System.outprintin(" 该 数字 乘 以 4 的 运算 结果 为 :“"+(number<<2)); 
System.ovtprintin(" 该 数字 乘 以 8 的 运算 结果 为 : "+(number<<3)); 
System.out.printin(" 该 数字 乘 以 16 的 运算 结果 为 :“"+(number<<4)); 
} 
} 


图 秘笈 心 法 


通过 本 实例 可 以 看 出 ， 一 个 整数 每 次 执行 位 移 运算 中 的 左 移 运算 n 次 ， 相 当 于 这 个 整数 乘 以 2 的 n 次 方 。 
相反 ， 如 果 执 行 右 移 n 次 运算 ， 则 相当 于 这 个 整数 除 以 2 的 n 次 方 。 


人 人 2 
实例 026 助 第 3 个 变量 ) 高 级 
实用 指数 : 太 女 太 页 
实例 说 明 
变量 的 互 换 常见 于 数组 排序 算法 中 ， 当 判断 两 个 数组 元 素 需要 交互 时 ， 将 创建 一 个 临时 变量 来 共同 完成 互 
换 ， 临 时 变量 的 创建 增加 了 系统 资源 的 消耗 。 如 果 需 要 交换 的 是 两 个 -有 
整数 类 型 的 变量 ， 那 么 可 以 使 用 更 高 效 的 方法 ， 本 实例 演示 了 如 何 省 | 冯 曙 加 四 | 二 


cle Ecchange Dava 示 于 得 用 CNPrcgram Es i 


略 临时 变量 〈 第 3 个 变量 ) 实现 两 个 整数 类 型 变量 的 高 效 互 换 ， 实 例 运 和 
行 结果 如 图 2.11 所 示 。 请 输入 交 量 3 的 入 


图 设计 过 程 

创建 VariableExchange 类 ， 在 该 类 的 主 方法 中 创建 扫描 器 对 象 接 
收 用 户 输入 两 个 变量 值 ， 然 后 通过 位 运算 中 的 异 或 运算 符 “^” 实 现 两 
个 变量 的 互 换 ， 关 键 代码 如 下 : 


import java.util.Scanner: 
public class VariableExchange { 
public static void main(String[] args) { 
Scanner scan = new Scanner(System.in); /创建 扫描 器 


30 B60 
执行 交 量 互 的 . 。 


图 2.11 实例 运行 结果 


System.out: 2 A 的 值 "); 
long A= scan.nextLong(): // 接 收 第 一 个 变量 值 
System.out: printin(" 请 输入 变量 B 的 值 "); 
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long B = scan nextLongO: /接收 第 二 个 变量 值 
System_outprinttn("A=" + A + "\tB=" + B): 
System.out.printin(" 执 行 变量 互 换 .…"); 
A=A^B; // 执 行 变量 互 换 
B=B^A; 
A=A^B; 
System.out.printIn("A=" + A + "\tB=" + B); 

} 


} 
图 秘笈 心 法 

异 或 ^ 和 其 他 位 运算 符 并 不 会 改变 变量 本 身 的 值 ， 即 “A^B;” 没 有 任何 意义 ,必须 将 其 运算 结果 赋值 给 一 个 
变量 。 


23 条 件 语句 


实例 027 


力 实例 说 明 
为 了 弥补 因 人 为 历法 规定 造成 的 年 度 天 数 与 地 球 实际 公转 周期 的 时 间 差 ， 设 立 了 366 天 的 阔 年 ， 半 年 的 二 

月 份 有 29 天 。 本 实例 通过 程序 计算 用 户 输入 的 年 份 是 否 为 间 

年 ， 实 例 运行 结果 如 图 2.12 所 示 。 cE tcptewr Uae SRR rooran Monet 9 


| | 关键 技 术 请 久 入 一 个 年 从 


2008 是 天 年 1 
本 实例 计算 闻 年 的 关键 技术 是 其 公式 。 满 足 两 种 条 件 的 整 
数 可 以 称 为 头 年 , 第 一 , 能 被 4 整除 但 不 能 被 100 整除 ; 第 二 ， 
能 被 400 整除 。 - = 
该 公式 用 Java 语法 实现 的 格式 如 下 : 图 2.12 实例 运行 结果 


year % 4—=0 &e& year % 100!=0||year % 400—0 


图 设计 过 过 程 


创建 LeapYear 类 ， 在 该 类 的 主 方法 中 接收 用 户 输入 的 一 个 整数 年 份 ， 然 后 通过 半年 计算 公式 ， 判 断 这 个 年 
份 是 否 为 关 年 ， 并 在 控制 台 输 出 判断 结果 ， 关 键 代 码 如 下 
import java.util.Scanner; 
public class LeapYear { 
Public static void main(String[] args) { 
Scanner scan = newW Scanner(System.in): 
System.out.printin(" 请 输入 一 个 年 份 : 
long year = a 
这 (year % 4 一 0 && year % 100 !=0||year % 400 一 0) {// 是 羡 年 
System.out.print(year + "是 半年 ! "); 
} else { /不 是 关 年 
System.out:print(year + "不 是 半年 ! 人 


ms’ 区 二 De Severs MY Da scurcebplorer 局 Snippety dl 
图 = 日 : 口 ， 
C2013-11-2 


} 


} 
国 秘笈 心 法 

三 元 运算 符 〈?:) 是 于"…else 语法 的 一 个 简洁 写法 ， 可 以 根据 需求 来 决定 使 用 哪 种 。 前 者 常用 于 赋值 判断 ， 
后 者 常用 于 业务 流程 
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力 实例 说 明 

大 多 系统 登录 模块 都 会 接收 用 户 通过 键盘 输入 的 登录 信息 ， 这 些 登录 信息 将 会 被 登录 模块 验证 ， 如 果 使 用 
的 是 指定 的 用 户 名 与 密码 ， 则 允许 程序 登录 ， 否 则 将 用 户 拒 之 门 。。 av Ea 
外 。 本 实例 通过 站 else 进行 多 条 件 判断 实现 了 登录 信息 验证 ,， 实 。。 on acsims smmn eve 
例 运行 结果 如 图 2.13 所 示 。 Fi 
图 设计 过 程 i 

创建 CheckLogin 类 ， 在 该 类 的 主 方法 中 接收 用 户 输入 的 登录 


用 户 名 与 密码 ， 然 后 通过 证 条 件 语句 分 别 判断 用 户 名 与 密码 ， 并 0 
输出 登录 验证 结果 ， 关 键 代码 如 下 : 


import java.util.Scanner; 
public class CheckLogin { 
public static void main(String[] args) { 


Scanner scan = new Scanner(System.in); /创建 扫描 器 
System.outprintin(" 请 输入 登录 用 户 名 : "); 


String usemame = scan.nextLine(); /接收 用 户 输入 登录 名 
System.out.printin(" 请 输入 登录 密码 : "); 

String password = scan.nextLineO; // 接 收 用 户 输入 登录 密码 
if (!usemame.equals("mr")) { 1/ 判断 用 户 名 的 合法 性 


System.out.printin(" 用 户 名 非法 。"); 

} else if (!password.equals("mrsoft")) { // 判 断 密码 的 合法 性 
System.out.printin(" 登 录 密 码 错误 。"); 

} else { // 通 过 以 上 两 个 条 件 判断 则 默认 通过 登录 验证 
System.out.printin(" 巷 喜 您 ， 登 录 信息 通过 验证 。"); 

} 

} 
} 


图 秘笈 心 法 
字符 串 属于 对 象 而 非 基 本 数据 类 型 ， 不 能 够 使 用 一 来 判断 两 个 字符 串 是 否 相等 ， 所 以 它 需 要 通过 equals0 


方法 来 判断 两 个 字符 串 内 容 是 否 相 同 ， 正 如 本 实例 对 用 户 名 和 密码 的 判断 那样 。 如 果 使 用 一 判断 的 将 是 两 个 字 
符 串 对 象 的 内 存 地 址 ， 而 非 字符 串 内 容 。 


实例 029 


力 实例 说 明 
本 实例 根据 用 户 输入 的 信息 确定 员工 应 该 分 配 到 哪个 部 门 。 实 er 
例 中 需要 根据 用 户 输入 进行 多 条 件 判断 ， 所 以 采用 了 switch 语句 ， eT 


实例 运行 结果 如 图 2.14 所 示 。 Sa Ts 
图 关键 技术 STs 
本 实例 的 关键 技术 在 于 switch 多 分 支 语句 的 使 用 ， 该 语句 只 图 2.14 实例 运行 结果 


支持 对 常量 的 判断 ， 而 常量 又 只 能 是 Java 的 基本 数据 类 型 ， 虽 然 
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在 以 后 的 JDK 版 本 中 可 以 对 String 类 的 字符 串 对 象 进 行 判断 ， 但 是 就 目前 项 目的 需求 也 有 对 字符 串 进行 多 条 件 
判断 的 .本 实例 采取 的 做 法 是 对 字符 串 的 哈 希 码 进行 判断 ,也 就 是 把 Sting 类 的 hashCode(0 方 法 返回 值 作为 switch 
语法 的 表达 式 ，case 关键 字 之 后 跟随 的 是 各 种 字符 串 常量 的 哈 希 码 整 数值 。 


图 设计 过 程 
创建 Example 类 ， 在 该 类 的 主 方法 中 创建 标准 输入 流 的 扫描 器 ， 通 过 扫描 器 获取 人 事 部 门 输入 的 姓名 与 应 
聘 编 程 语言 ， 然 后 根据 每 个 语言 对 应 的 哈 希 码 来 判断 分 配 部 门 ， 关 键 代 码 如 下 : 


import java.util.Scanner; 
public class Example { 
public static void main(String[] args) { 
Scanner scan = new Scanner(System.in): 
System.out.printin(" 请 输入 新 员工 的 姓名 : "); 
String name = scan.nextLine(); /接收 员工 名 称 
Systen.out.printin(" 请 输入 新 员工 应 聘 的 编程 语言 :"); 
String language = scan.nextLine(); 。“// 接 收 员 工 应 聘 的 编程 语言 
// 根 据 编程 语言 确定 员工 分 配 的 部 门 
switch (language hashCodeO){ 
ease 3254818: /Java 的 哈 希 码 


ease 2301506: /Java 的 哈 希 码 

ease 2269730: /Java 的 哈 希 码 
System.outprintln(" 员 工 "+name+" 被 分 配 到 Java 程序 开发 部 门 。"); 
Dreak: 


ease 3104: /ic# 的 哈 希 码 

ease 2112: /WC# 的 哈 希 码 
System.outprintin(" 员 工 "+name+" 被 分 配 到 C# 项 目 维护 组 。"); 
Dreak: 


ease -709190099: /Wasp.net 的 哈 希 码 

ease 955463181: ”//Asp.net 的 哈 希 码 

ease 9745901: 。”//ASPNET 的 哈 希 码 
System.outprintln(" 员 工 "+name+" 被 分 配 到 Asp.net 程序 测试 部 门 。"); 
break: 

default: 
System.ouvtprintln(" 本 公司 不 需要 " + language + "语言 的 程序 开发 人 员 。"); 

} 
} 
} 


图 秘笈 心 法 


在 switch 语法 中 每 个 case 关键 字 可 以 作为 一 个 条 件 分 支 ， 但 是 对 于 多 个 条 件 采取 相同 业务 处 理 的 情况 ， 可 
以 把 多 个 case 分 支 关 联 在 一 起 ， 省 略 它们 之 间 的 break 语句 ， 而 在 最 后 一 个 相同 的 case 分 支 中 实现 业务 处 理 并 
执行 break 语句 ， 就 像 本 实例 中 应 用 的 那样 。 


实例 030 


图 实例 说 明 
编写 程序 , 应 用 switch 语句 计算 累计 消费 金额 达到 一 定数 额 时 , 享受 不 同 的 折扣 价格 , 实例 运行 结果 如 图 2.15 


所 示 。 


图 设计 过 程 

创建 ProductPrice 类 , 在 该 类 的 主 方法 中 实现 本 实例 的 业务 代 
码 。 该 方法 首先 假设 一 个 用 户 消 费 总 额 的 变量 money， 并 初始 化 
一 个 折扣 变量 rebate, 然后 经 过 运算 来 获得 用 户 等 级 , 对 不 同 的 等 


2.15 ”实例 运行 结果 
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级 给 予 不 同 的 折扣 优惠 ， 程 序 关 键 代 码 如 下 : 


public class ProductPrice { 
public static void main(String[] args) { 
float money = 1206; // 金 额 
float rebate = Of: /折扣 
if (money > 200) { 
int grade = (int) money / 200; /等 级 
switch (grade) { // 根 据 等 级 计算 折扣 比例 


System.out.printin(" 您 的 累计 消费 金额 为 :" + money); /输出 消费 金额 
System.out.printin(" 您 将 享受 "+rebate +" 折 优惠 !"); /输出 折扣 比例 
} 
} 


国 秘笈 心 法 


在 程序 开发 中 经 常 使 用 的 都 是 正 数 ， 负 数 因 为 使 用 得 少 ， 常 常 被 忽略 。 例 如 ,，“N%2 一 1” 本 来 是 用 来 计算 
数字 N 是 否 为 奇数 的 ， 但 是 开发 者 由 于 没有 考虑 到 负数 的 情况 ， 导 致 这 个 算法 的 失败 ， 因 为 任何 负数 应 用 这 个 
算法 都 会 等 于 -1。 


高 级 


实例 031 | 
六 实用 指数 ， 友 克朗 家， 


力 实例 说 明 


本 实例 根据 用 户 输入 的 月 份 来 判断 季节 ， 这 是 一 个 最 典型 的 实践 switch 语法 的 例子 。 通 过 这 个 例子 可 以 完 
全 掌握 switch 语法 的 用 法 与 技巧 ， 实 例 运行 结果 如 图 2.16 所 示 。 
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图 2.16 实例 运行 结果 
图 设计 过 程 
创建 udgeMonth 类 , 在 该 类 的 主 方法 中 创建 扫描 器 接收 用 户 输入 的 月 份 数 字 , 然后 判断 该 月 份 属于 哪个 季 
节 并 输出 到 控制 台 ， 对 于 非法 月 份 也 要 给 出 提示 ， 程 序 关 键 代码 如 下 : 


import java.util.Scanner; 
public class JudgeMonth { 
public static void main(String[] args) { 
Scanner scan = new Scanner(System.in); // 创 建 扫描 器 
// 提 示 用 户 输入 月 份 
System.out.printin(" 请 输入 一 个 月 份 ， 我 能 告诉 你 它 属于 哪个 季节 。"); 
int month = scan.nextInt(); /| 接收 用 户 输入 
switch (month) { 1/ 判断 月 份 属于 哪个 季节 
Case 12: 
Case 1: 
Case 2: 
System.out.print(" 您 输入 的 月 份 属于 冬季 。"); 
Dreak: 
Case 3: 
Case 4: 
Case 5: 


System.out:print(" 您 输入 的 月 份 属于 春季 "); 
break; 


Case 6: 
Case 7: 
Case 8: 


Systenr.out.print(" 您 输入 的 月 份 属于 夏季 "); 
break: 


Case 9: 

case 10: 

Case 11: 
System.out.print(" 您 输入 的 月 份 属于 秋季 "); 
break:; 

default: 
System.out.print(" 你 那 有 " + month + "月 份 吗 ?"); 

} 
} 
} 


图 秘笈 心 法 
switch 语句 的 每 个 case 关键 字 都 用 于 判断 一 个 常量 并 做 出 相应 的 业务 处 理 ， 熟 练 掌握 switch 语句 之 后 可 以 
组 合 多 个 case 来 完成 多 条 件 的 处 理 ， 就 是 多 个 常量 结果 执行 相同 的 业务 处 理 ， 就 像 本 实例 中 的 那样 。 


24 循环 控制 


实例 032 算 符 循环 遍历 数组 高 级 


实用 指数 : 俯 雯 让 家 | 


图 实例 说 明 
本 实例 利用 自 增 运算 符 结合 while 循环 获取 每 个 数组 元 素 的 值 ， 然 后 把 它们 输出 到 控制 台中 。 其 中 自 增 运 
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算 符 控制 索引 变量 的 递增 ， 实 例 运 行 结 果 如 图 2.17 所 示 。 


[人 

豆 其 葡 
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图 2.17 实例 运行 结果 
图 设计 过 程 
创建 ErgodicArray 类 ， 在 该 类 的 主 方法 中 创建 一 个 鸟 类 数组 ， 然 后 创建 一 个 索引 变量 ， 这 个 变量 用 于 指定 
数组 下 标 ， 随 着 该 索引 的 递增 ，while 循环 会 逐步 获取 每 个 数组 的 元 素 并 输出 到 控制 台中 ， 关 键 代码 如 下 : 
public class ErgodicArray { 
public static void main(String[] args) { 
/创建 鸟 类 数组 
String[] aves = new String[] {" 白 鉴 ", "丹顶鹤 "， "黄酮 "" 鹦 欧 ", "乌鸦 "." 喜 葛 " 
"布谷 岛 ", " 灰 纹 岛 " "百灵 鸟 " }; 
int index = 0/ 创 建 索引 变量 
System.out.printin(" 我 的 花园 里 有 很 多 鸟 ， 种 类 大 约 包括 :"); 
while (index < aves.length) {// 遍 历数 组 
System.out.printin(aves[index++]);// 自 增 索 引 值 
} 


| 
} 


国 秘笈 心 法 


自 增 自 减 运算 符 分 前 置 与 后 置 两 种 ， 其 中 前 置 运算 如 “++tindex” 会 先 将 index 的 值 递增 ， 然 后 再 使 用 递增 
后 的 值 ， 而 后 置 运算 如 “index++” 会 首先 使 用 该 变量 的 值 ， 然 后 再 把 变量 值 递 增 。 


国 实例 说 明 


杨辉 三 角 由 数字 排列 ， 可 以 把 它 看 作 一 个 数字 表 ， 其 基本 特性 是 两 侧 数值 均 为 1， 其 他 位 置 的 数值 是 其 正 
上 方 的 数值 与 左上 角 数 值 之 和 。 本 实例 通过 数组 来 实现 这 个 杨辉 三 角 ， 其 运行 结果 如 图 2.18 所 示 。 
是 3sle 区 不 2 器 忆 EE 见 Sewer 瞄 DaaSoureg-， 卫 Snippde 一 曲 
PEE ET 
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2.18 杨辉 三 角 
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图 设计 过 程 


创建 YanghuiTriangle 类 ， 在 该 类 的 主 方法 中 创建 一 个 二 维 数组 ， 并 指定 二 维 数组 的 第 一 维 长 度 ， 这 个 数组 
用 于 存放 杨辉 三 角 的 数值 表 , 再 通过 双 层 for 循环 来 实现 第 二 维 数组 的 长 度 , 然后 计算 整个 数组 的 每 个 元 素 的 值 ， 
程序 关键 代码 如 下 : 
public class YanghuiTriangle { 
public static void main(String[] args) { 
int triangle[][]-new int[s][]:// 创 建 二 维 数组 
/遍历 二 维 数组 的 第 一 层 
for (inti=0:i< i { 
triangle[ij=new 1 层 数组 的 大 小 
// 遍 历 第 二 层 数组 
for(int j=0:j<=triangleli] length-1:j++){ 
// 将 两 侧 的 数组 元 素 赋值 为 1 
itG 一 0 一 0 一 triangle[i] Jength-D){ 
triangle[i][]-1: 
}else{// 其 他 数值 通过 公式 计算 
triangle[i][]=triangle[i-1]G}+trianglefi-1]0-1]; 


| 
/| 输出 数组 元 素 
System.out.print(triangle[i]G}+"\t"); 


} 
System.out.printinO; 
} 
} 


图 秘笈 心 法 


Java 语言 中 的 二 维 数组 其 实 是 一 维 数组 的 每 个 元 素 都 是 另 一 个 一 维 数组 , 所 以 第 二 维 数组 的 长 度 可 以 任意 ， 
就 像 本 实例 中 那样 。 这 比 其 他 语言 的 数组 更 灵活 ， 而 且 多 维 数组 也 是 如 此 。 


图 实例 说 明 


Java 基本 语法 中 的 for 循环 非常 灵活 并 且 可 以 嵌 套 使 用 ， 其 中 双 层 for 循环 是 程序 开发 中 使 用 最 频繁 的 ， 常 
用 于 操作 表格 数据 。 对 于 行 数 与 列 数 相同 的 表格 操作 代码 比较 简单 ， 但 是 类 似 九 九 乘法 表 就 不 好 控制 了 ， 因 为 
它 的 列 数 要 与 行 数 对 应 ， 可 以 说 这 个 表格 是 个 三 角 me > [国生 本 古 向 疝 肌 吨 员 疝 上 0 是 = 
形 。 本 实例 通过 双 层 循环 输出 了 这 个 九 九 乘法 表 ， bd 


-ER 上 > MuitplcaticrTeble LJave 所 3] CAProgram FieeVaveN de1.7.0.45\binNevaw.exe ( 2013.11.21 


效果 如 图 2.19 所 示 。 (在 面试 与 等 级 考试 中 常 出 现 这 i 
13=3 2°3=6 3+3=9 
类 题目 ) Ha 3 dc 
1-5-5 2°5-10 3*5-15 45-20 55-25 
1°6=5 2:6=12 3:6=18 46=24 546=30 6:6=36 
| | 设计 过 过 程 17-7 27=14 3°7=21 477=28 5:7=35 67-42 7:7=49 
1°8-8 2°8=16 3:8-24 48-32 5:8=4) 6:8-48 7*8-56 8*8-64 


创建 MultiplicationTable 类 ， 在 该 类 的 主 方法 中 P99 29-18 39-27 49-35 59-45 69-54 To-63 gr9-12 9r9-81 
创建 双 层 for 循环 , 第 一 层 for 循环 也 称 为 外 层 循环 ， - : 
它 用 于 控制 表格 的 行 ; 第 二 层 循环 也 称 为 内 层 循环 ， 图 2.19 九 九 乘法 表 


它 用 于 控制 表格 的 列 。 这 里 第 二 层 循环 的 控制 变量 
非常 重要 ， 它 的 条 件 判 断 是 列 数 要 等 于 行 数 的 最 大 值 ， 然 后 输出 内 层 与 外 层 循环 控制 变量 的 乘积 ， 这 样 就 实现 
了 九 九 乘法 表 ， 程 序 关键 代码 如 下 : 
public class MultiplicationTable { 
public static void main(String[] args) { 
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for(int i=1:i<=9:i++){// 循 环 控制 变量 从 1 遍历 到 9 

for(intj=1j<=ij++){// 第 二 层 循环 控制 变量 与 第 一 层 最 大 索引 相等 
/输出 计算 结果 但 不 换行 
System.out.print(+"*"+it"="+i#j+"\"); 

} 

System.outprintin0:// 在 外 层 循环 中 换行 

} 
} 


图 秘笈 心 法 


循环 语句 可 以 完成 复杂 的 运算 ， 也 可 以 用 于 控制 程序 的 递归 流程 ， 而 多 层 循环 可 以 实现 更 加 复杂 的 业务 逻 
辑 ， 是 学 习 编程 必须 掌握 的 一 种 应 用 。 在 处 理 有 规则 的 大 量 数据 时 ， 应 该 考虑 使 用 多 层 循环 来 优化 程序 代码 ， 
但 是 建议 添加 详细 的 代码 注释 ， 便 于 以 后 的 维护 与 修改 工作 。 


实例 035 


国 实例 说 明 
本 实例 在 计算 阶乘 的 算法 之 上 应 用 while 循环 语句 计算 1+1/2!+1/3!…1/20! 的 和 。 如 果 使 用 基本 数据 类 型 
double 是 无 法 精确 地 显示 运算 结果 的 , 所 以 本 实例 使 用 。 二 -EEC 站 
了 BigDecimal 类 的 实例 来 完成 这 个 运算 ， 实 例 运行 结 ,omen AS 妆 | 语 昌国 | 玫 昌 - 吕 
果 如 图 220 所 示 。 eset 
[四 说明: 由 于 本 实例 的 运行 结果 精度 非常 高 ， 小 数位 
数 过 长 ， 所 以 设置 了 特殊 的 控制 台 执行 , 读 
者 的 运行 结果 可 能 是 单行 的 数字 。 
图 设计 过 程 全 
图 2.20 实例 运行 结果 
创建 Example 类 , 在 该 类 的 主 方法 中 创建 保存 总 和 
的 sum 变量 和 计算 阶乘 的 factorial 变量 ， 为 保证 计算 结果 的 精度 ， 这 两 个 变量 都 是 BigDecimal 类 的 实例 对 象 。 
然后 通过 while 实现 20 次 循环 ， 并 完成 计算 ， 程 序 代码 如 下 : 


importjava.math.BigDecimal: 
public class Example { 
public static void main(String args[]) { 
BigDecimal sum = new BigDecimal(0.0): /和 
BigDecimal factorial = new BigDecimal(1.0); /阶乘 项 的 计算 结果 
inti= 1 /循环 增 量 
while (i <=20) { 
sum = sum.add(factorial): // 累 加 各 项 阶乘 的 和 
Hi 卜 加 1 
factorial = 包 ctorial multiply(new BigDecimal(1.0 /i)): /计算 阶乘 项 
站 
System.outprintln("1+1 / 2!+1 / 3!…1/ 20! 的 计算 结果 等 于 : \n" + sum); /输出 计算 结果 
} 
} 
图 秘笈 心 法 


对 于 高 精度 要 求 或 者 运算 数 较 大 的 计算 , 应 该 使 用 BigDecimal 类 实现 , 否则 Java 基本 类 型 的 数据 无 法 保证 
浮 点 数 的 精度 ， 也 无 法 对 超出 其 表示 范围 的 数字 进行 运算 。 


实例 036 本 a 
\036 实用 指数 : 贸 食 安家 


图 实例 说 明 
本 实例 在 输出 菱形 的 基础 上 加 大 难度 ， 输 出 空心 的 菱形 图 案 ， | ”Ss ew ow 


在 等 级 考试 与 公司 面试 时 出 现 过 类 似 原 目 。 本 实例 的 目的 在 于 熟练 | 下 ere 人 ee 
掌握 for 循环 的 雹 套 使 用 ， 实 例 运行 结果 如 图 2.21 所 示 。 


图 设计 过 程 

创建 Diamond 类 , 在 该 类 的 主 方法 中 调用 printHollowRhombusO 
方法 完成 10 行 的 空心 菱形 输出 ， 其 中 printHollowRhombus() 方 法 是 
实例 中 自 定义 的 , 该 方法 使 用 两 个 双 层 for 循环 分 别 输出 菱形 的 上 半 
部 分 与 下 半 部 分 ， 程 序 关 键 代码 如 下 : 


public class Diamond { 
public static void main(String[] args) { 
printHollowRhombus(10):; 


| 
public static void printHollowRhombus(int size) { 
if(size %2—0){ 
size++/ 计 算 菱形 大 小 


for (inti=0;i<size /2+1;iH) { 
for (intj =size /2+1;j>i+1;j--) 
System.out.print(" "):// 输 出 左上 角 位 置 的 空白 


} 
for (intj=o:j<2*i+l:j+Hb{ 
0—0lj—2*){ 
System.out.print(”*");// 输 出 萎 形 上 半 部 边缘 
}else{ 
System.outprint(" /输出 菱形 上 半 部 空心 
} 
} 
System.out.println(™™"); 
} 
for (inti= size /2+1;i< size;it+) { 
for (intj =0;j<i-size/2:jH) { 
System_outprint(" J 


for (intj =0;j<2* size-1- i 
if(0=0|j=2* (size-i- 
System.out.print("*" 六 /办 旷 形 下 半 部 边 义 
}else{ 


System.out.print(" "):// 输 出 菱形 下 半 部 空心 
， 
} 
System.out.printin(™"); 
} 
} 
图 秘笈 心 法 


for 循环 中 有 3 个 表达 式 ， 这 3 个 表达 式 都 是 可 选 的 ， 也 就 是 说 for 循环 可 以 没有 表达 式 。 例 如 ，for(;;) 这 样 
的 for 循环 将 是 一 个 无 限 循 环 ， 读 者 在 使 用 for 循环 时 应 注意 避免 无 限 循 环 。 
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实例 037 2 
实用 指数 : 食 食 食 谷 : 
图 实例 说 明 

JDK 1.5 为 Java 添加 了 新 的 for 循环 foreach。 它 是 原 有 for 循环 遍 
历数 据 的 一 种 简写 形式 ， 使 用 的 关键 字 依然 是 for, 但 是 参数 格式 不 同 。 二 
本 实例 使 用 foreach 循环 分 别 遍历 集合 对 象 与 数组 ， 并 把 元 素 输出 到 控 | 
制 台 ， 实 例 运 行 结果 如 图 2.22 所 示 。 


图 关键 技术 
foreach 循环 是 for 循环 的 一 种 简写 格式 , 只 用 于 遍历 数据 集合 或 数 
其 语法 格式 如 下 : 
for ( Type e : collections ) { 
/对 变量 e 的 使 用 


历数 组 : 
bedefhijxlmnopqre 


组 图 2.22 ”实例 运行 结果 


参数 说 明 
@ e: 其 类 型 Type 是 集合 或 数组 中 元 素 值 的 类 型 ， 该 参数 是 集合 或 数组 collections 中 的 一 个 元 素 。 
@ collections: 要 所 历 的 集合 或 数组 ， 也 可 以 是 迭代 器 。 


[四 说 明 : 在 循环 体 中 使 用 参数 e， 该 参数 是 foreach 从 集合 或 数组 以 及 迁 代 器 中 取得 的 元 素 值 ， 元 素 值 是 从 头 
到 尾 进 行 遍历 的 。 
图 设计 过 程 
创建 UseForeach 类 ， 在 该 类 的 主 方法 中 创建 List 集合 对 象 ， 并 为 该 对 象 添加 内 容 ， 然 后 使 用 foreach 循环 
遍历 该 集合 输出 所 有 内 容 ， 再 从 List 集合 中 提取 一 个 字符 串 数 组 ， 最 后 使 用 foreach 循环 遍历 该 数组 ， 并 将 所 有 
数组 元 素 输 出 到 控制 台 ， 程 序 关键 代码 如 下 : 
import java.util. ArrayList: 
import java.util.List; 
public class UseForeach { 
public static void main(String[] args) { 
List<String> list=new ArrayList<String>0:// 创 建 list 集合 
list.add("abe");// 初 始 化 list 集合 


list add("qrs"); 

System.out.print("foreach 遍历 集合 :vt 

for (String string : list) {// 人 遍历 list 集合 
System.out.print(string);// 输 出 集合 的 元 素 值 

} 

System.outprintin0: 

String[] strs=new String[list.sizeO]: 

listtoArray(strs):// 创 建 数组 

System.out.print("foreach 遍历 数组 : \n\t"): 

for (String string : strs) {// 遍 历数 组 
System.out.print(string);// 输 出 数组 元 素 值 

} 


} 
国 秘笈 心 法 
在 JDK 1.5 之 前 使 用 for 循环 对 集合 、 数 值 和 迭代 器 进行 遍历 ， 这 需要 创建 索引 变量 、 条 件 表达 式 ， 这 些 会 
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使 代码 造成 混乱 ， 并 增加 出 错 的 几率 ， 并 且 每 次 循环 中 索引 变量 或 迭代 器 都 会 出 现 3 次 ， 有 两 次 出 错 的 机 会 。 而 
且 会 有 一 些 性 能 损失 ， 其 性 能 稍微 落后 于 foreach 循环 。 所 以 对 于 数据 集合 的 遍历 ， 建 议 使 用 foreach 循环 完成 。 


实例 038 
实用 指数 : 食 食 食 谷 ; 
国 实例 说 明 
循环 用 于 复杂 的 业务 处 理 可 以 提高 程序 的 性 能 和 代码 的 可 读 性 ， 但 是 循环 中 也 有 特殊 情况 ， 如 由 于 某 些 原 
因 需 要 立刻 中 断 循环 去 执行 下 面 的 业务 逻辑 , 本 实例 运行 结果 
如 图 2.23 所 示 。 
图 设计 过 程 
在 Eclipse 中 创建 一 个 Java 项 目 , 在 项 目 中 创建 BreakCyc Baan 
类 ， 在 该 类 的 主 方法 中 创建 一 个 字符 串 数组 ， 在 使 用 foreach Se 79a 7 
遍历 时 ,判断 如 果 发 现 数组 中 包含 字符 串 “ 老 座 ” 则 立刻 中 断 
循环 。 再 创建 一 个 整数 类 型 二 维 数组 ， 使 用 双 层 foreach 循环 
遍历 ， 当 发 现 第 一 个 小 于 60 的 数组 元 素 ， 则 立刻 中 断 整 个 双 
层 循环 ， 而 不 是 内 层 循 环 ， 程 序 关键 代码 如 下 : 
public class BreakCyc { 
public static void main(String[] args) { 
System.out.printin("\n------------- 中 断 单 层 循环 的 例子 。 "); 
/创建 数组 
String[] amray = new String[] {" 白 敬 " "丹顶鹤 ", "黄酮 "," 鹦 爽 " "乌鸦", "喜鹊 … 
" 老 唐 ", "布谷 鸟 " "老鹰 "" 灰 纹 鸟 ", " 老 唐 ", "百灵 鸟 " }; 
System.ovtprintin(" 在 你 发 现 第 一 只 老 磨 之 前 ， 告 诉 我 都 有 什么 鸟 。"); 
for (String string : array) {//foreach 遍历 数组 
让 (string.equals(" 老 认 "))// 如 果 遇 到 老鹰 
break:// 中 断 循环 
System.out.print(" 有 : "+ string+" 7 否则 输出 数组 元 素 


2.23 ”实例 运行 结果 


3 
System.out.printin("\n\n------------- 中 断 双 层 循环 的 例子 。 
1/ 创建 成 绩 数组 
int[][] myScores = new intDD { { 67. 78, 63. 22. 66 }, 
{ 55. 68, 78. 95. 44 }, { 95. 97. 92. 93. 81 } }: 
System.out.printin(" 宝 宝 这 次 考试 成 绩 : \n 数学 \t 语文 \t 英语 \ 美术 \t 历史 "); 
Nol: for (int[] is : myScores) {// 遍 历 成 绩 表 格 
for (inti: is) { 
System.out.print(i + "\t");// 输 出 成 绩 
让 (i< 60) {// 如 果 中 途 遇 到 不 及 格 的 ， 立 刻 中 断 所 有 输出 
System.outprintin(" 等 等 ，"+i+ "分 的 是 什么 ? 这 个 为 什么 不 及 格 ?"); 
break Nol: 


} 
} 
System.out.printinO): 
2 
} 
} 


图 秘笈 心 法 
充分 利用 循环 可 以 提高 程序 的 开发 与 执行 效率 ， 但 是 如 果 不 注 重 循环 中 的 算法 很 容易 导致 程序 的 死 循 环 ， 
那 将 是 程序 的 死 祥 。 所 以 在 循环 体 中 要 对 可 能 出 现 的 特殊 情况 使 用 break 语句 中 断 循环 。 
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人 ”全 
图 实例 说 明 
循环 体 中 可 以 通过 break 语句 中 断 整个 循环 ， 这 增加 了 循环 的 控制 能 力 ， 但 是 对 于 特殊 情况 还 是 不 够 。 例 
如 ， 某 些 条 件 下 需要 放弃 部 分 循环 处 理 ， 而 不 是 整个 循环 体 。 
Java 提供 了 continue 语句 来 实现 这 一 功能 ，continue 可 以 放弃 
本 次 循环 体 的 剩余 代码 ， 不 执行 它们 而 开始 下 一 轮 的 循环 。 本 


实例 利用 continue 语句 实现 了 循环 体 过 滤器 , 可 以 过 滤 “ 老 应 ” 2 me 
字符 串 ， 并 做 相应 的 处 理 ， 但 是 放弃 continue 语句 之 后 的 所 有 a 


em 所 a ey 


可 Ri 
1) Vee SM Cegrom Rieseveyek1 70. Aner ere (2013-11-20 Fl2 
有 二 S 关 人 近来 了 几 RR 才 ， 语 我 所 让 f 直 . - 


代码 ， 实 例 运 行 结果 如 图 2.24 所 示 。 ee 
图 设计 过 程 Ee 
ee 


在 Eclipse 项 目 中 创建 CycFilter 类 ， 在 该 类 的 主 方法 中 创 
建 鸟 类 名 称 的 字符 串 数 组 ， 其 中 包含 多 个 “老鹰 ”字符 串 ， 然 
后 通过 foreach 循环 遍历 该 数组 ， 在 循环 过 程 中 如 果 遍 历 的 数 2.24 ”实例 运行 结果 
组 元 素 是 “ 老 座 ” 字 符 串 ， 则 输出 发 现 老鹰 的 信息 并 过 滤 循 环 
体 之 后 的 所 有 代码 ， 关 键 代码 如 下 : 
public class CycFilter { 
public static void main(String[] args) { 
/创建 数组 
String[] array = new String[] { " 白 改 ", "丹顶鹤 ", " 黄 酌 ", "鹦鹉 ", "乌鸦", "喜鹊 ", 
" 老 认 ", "布谷 岛 " " 老 座 "," 灰 纹 鸟 ", " 老 座 ", "百灵 鸟 " }; 
System.out.printin(" 在 我 的 花园 里 有 很 多 鸟 类 ， 但 是 最 近来 了 几 只 老鹰， 请 帮 我 把 它们 抓 走 。"); 
int eagleCount = 0; 
for (String string : array) {//foreach 遍历 数组 
这 (string.equals(" 老 应 ") {// 如 果 遇 到 老 座 
System.out.printin(" 发 现 一 只 老鹰， 已 经 抓 到 笼子 里 。"); 
eagleCount+t; 
continue:// 中 断 循环 


} 

System.out.printin(" 搜 索 鸟 类 ， 发 现 了 : "+ string):/ 否 则 输出 数组 元 素 
} 
System.out.println(" 一 共 捉 到 了 : “+eagleCount +" 只 老鹰 。"); 


} 
} 


国 秘笈 心 法 


break 语句 和 continue 语句 都 是 对 循环 体 的 控制 语句 ， 它 们 不 仅 应 用 于 for 循环 ， 而 且 在 任何 循环 体 中 也 可 
以 使 用 这 些 语句 ， 灵 活 使 用 可 以 让 循环 实现 更 加 复杂 的 运算 和 业务 处 理 。 


实例 040 


国 实例 说 明 


循环 是 常用 的 开发 模式 ， 它 可 以 简化 业务 处 理 ， 提 高 代码 编写 与 程序 运行 效率 ， 但 是 要 熟练 掌握 循环 中 的 
控制 算法 ， 和 否则 容易 造成 死 循 环 导致 程序 崩溃 。 本 实例 将 介绍 一 个 Java 语言 中 很 难 发 现 的 导致 程序 死 循 环 的 实 
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例 ， 本 实例 使 用 int 整数 类 型 作为 循环 索引 变量 ， 也 是 循环 控制 变量 ， 用 它 来 控制 循环 的 次 数 ， 测 试 当 这 个 程序 
的 条 件 是 索引 小 于 等 于 变量 类 型 的 最 大 值 时 会 发 生 什么 。 


图 设计 过 程 
创建 CycUtmost 类 ， 在 该 类 的 主 方法 中 创建 nt 整数 类 型 的 变量 end， 使 其 等 于 整数 类 型 的 最 大 值 ， 然 后 用 


该 值 减 去 50 开始 作为 循环 的 起 始点 ， 条 件 是 循环 控制 变量 小 于 等 于 end 变量 ,在 循环 体 中 累加 循环 计数 器 ， 最 
后 循环 结束 时 显示 这 个 计数 器 ， 代 码 如 下 : 


public class CycUtmost { 
public static void main(String[] args) { 
int end=Integer.MAX_VALUE;// 定 义 循环 终止 数 
int start=end-50;// 定 义 循环 起 始 数 
int count=0;/ 定 义 循环 计数 器 
for (inti= start; i <= end; it+) {// 执 行 循环 
count++;// 循 环 计数 


} 
/输出 循环 计数 器 
system.outprintin(" 本 次 循环 次 数 为 : "+counb: 


29 技巧 : 读者 可 能 会 认为 这 个 程序 会 循环 至 少 50 次 ， 然 后 输出 计数 器 的 值 ， 但 实际 上 这 个 程序 的 运行 结果 
会 导致 死 循环 ， 因 为 控制 条 件 是 索引 小 于 等 于 整数 类 型 的 最 大 值 ， 当 整数 类 型 达到 其 最 大 值 再 累加 
1 时 会 回 到 整数 类 型 的 最 小 值 ， 所 以 它 永 远 不 可 能 大 于 end 变量 ， 这 样 就 导致 了 程序 的 死 循环 ， 所 
以 在 程序 开发 时 要 注意 控制 变量 的 取 值 范围 。 
图 秘笈 心 法 
Java 基本 数据 类 型 都 有 其 取 值 范围 ， 熟 悉 二 进 制 原理 的 读者 应 该 能 够 理解 ， 当 超出 取 值 范围 时 ， 数 值 会 被 


截取 。 例 如 ， 本 实例 中 的 循环 控制 变量 超出 整数 类 型 的 最 大 取 值 范围 时 ， 就 会 绕 回 整数 类 型 的 最 小 值 。 所 以 在 
进行 条 件 判断 涉及 取 值 边界 时 ， 要 考虑 这 个 因素 。 


图 实例 说 明 

冒 泡 排序 是 交换 排序 中 最 简单 的 排序 方法 ， 其 基本 思想 是 ， 两 两 比较 相 邻 的 关键 码 ， 如 果 反 序 则 交换 ， 直 
到 没有 反 序 的 记录 为 止 ， 本 实例 运行 结果 如 图 2.25 所 示 。 二 
图 关键 技术 | 


本 关注 | 
对 于 冒 泡 排序 ， 已 经 知道 了 其 基本 思想 ， 下 面 是 对 于 冒 泡 排序 需要 解 王 涂 0 a 


决 的 关键 问题 。 第 一 将 整个 记录 序列 分 为 有 序 区 和 无 序 区 。 第 二 对 无 序 区 |jeaaae 训 
的 比较 ， 将 使 关键 码 小 的 记录 向 前 移动 ， 使 关键 码 大 的 向 后 移动 ， 一 直 重 
复 以 上 操作 ， 直 到 无 序 区 没有 反 序 的 记录 。 
国 设计 过 程 

实现 冒 泡 排序 的 关键 代码 如 下 


2.25 ”实例 运行 结果 
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Package bubble: 
public class Bubble { 
public static void main(String[] args) { 
int a[]= {10.23.11.56.45.26.59.28.84.79}: /给 出 原始 数 的 序列 
iint Ltemp; 
System.out.printin(" 初 始 序列 的 数组 为 :“"); // 输 出 排序 好 的 数 序 列 

for(i=0:i<10:iHH){ 

System.out.print(afij+” "); 

for(i=0;i<9:iH+){ 

ifa[i>afit1D){ /进行 两 两 比较 ， 下 面 进行 符合 条 件 的 交换 


System.out:printin("n"+" 排 序 好 的 数组 为 :"); /输出 排序 好 的 数 序列 
for(i=0;i<10:iH){ 
, System.out.print(a[ij+” "); 

} 

} 


国 秘笈 心 法 


冒 泡 排序 实际 上 就 是 利用 一 个 中 间 变 量 来 实现 数值 的 交换 。 由 于 这 种 算法 简单 易 用 ， 因 此 在 实际 开发 项 目 
过 程 中 ， 经 常用 到 这 种 算法 。 


oe | 


图 实例 说 明 

快速 排序 算法 是 对 冒 泡 排序 算法 的 一 种 改进 ， 由 于 冒 泡 排序 是 对 相 邻 的 数据 进行 两 两 比较 ， 元 素 的 移动 次 
数 和 比较 次 数 都 比较 多 ， 而 快速 排序 是 从 记录 序列 的 两 端 向 中 间 进 行 的 ， 所 以 在 元 素 的 移动 次 数 和 比较 次 数 上 
都 减少 了 ， 本 实例 运行 结果 如 图 2.26 所 示 。 


图 关键 技术 


快速 排序 的 基本 思想 是 : 首先 选 定 一 个 轴 值 〈 就 是 比较 
的 基准 ), 将 待 排序 记录 分 割 成 独立 的 两 部 分 ， 左 侧记 录 的 关 
键 码 都 小 于 或 等 于 轴 值 ， 右 侧 的 记录 关键 码 都 大 于 或 等 于 关 
键 码 ， 然 后 再 对 这 两 部 分 分 别 重复 上 述 的 过 程 ， 直 到 整个 序 
列 有 序 。 


ERE TE TI ER 
<termii jp Uava Application] DAUsers\CHUNBIN\AppData\Local\Genuitec\C: 
竺 排序 的 记录 序列 妊 : = 


图 2.26 ”实例 运行 结果 


设计 过 程 
实现 快速 排序 一 次 划分 的 关键 代码 如 下 
package bubble: 
Ppublic class Parti { 
public int partition(int[] rint firstint end){ 
int ij; 
i=firstj=end: /初始 化 
whileGisj)f 
whilei<j&&r[i<=r[i) j--; / 右 侧 扫描 
iiSj){ /将 较 小 的 记录 交换 到 前 面 
int temp: 
temp=-rfi]: 
tl: 


/ 左 侧 扫 描 
} 
ii<j){ // 将 较 大 的 记录 交换 到 后 面 


国 秘笈 心 法 


对 于 快速 排序 算法 ， 首 要 解决 的 就 是 轴 值 的 确定 问题 。 对 此 最 简单 的 方法 就 是 用 记录 的 第 一 个 记录 作为 轴 
值 ， 但 这 样 不 能 保证 不 出 现 正 序 或 逆序 的 问题 ， 这 样 将 要 对 序列 进行 一 次 前 后 调换 。 所 以 可 以 取 首 值 、 中 值 以 
及 末 值 ， 选 取 其 中 大 小 居中 的 作为 轴 值 。 
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图 实例 说 明 


选择 排序 是 一 类 借助 “选择 ”进行 排序 的 方法 ,其 主要 思 。 懂 i | 
想 是 ， 每 趟 排序 在 当前 待 排序 序列 中 选 出 关键 码 最 小 的 记录 ， et ee topic veeaoA NEee oernied| 
添加 到 有 序 序列 中 。 选择 排序 比较 独特 的 地 方 是 : 记录 的 移动 1 ss i 


次 数 少 ， 本 实例 运行 结果 如 图 2.27 所 示 。 让 
图 设计 过 程 - 
实现 选择 排序 的 关键 代码 如 下 


package select'; 
public class Select { 
public static void main(String[] args) { 
int r[]={49,27,65,97,76,13,38,5.12,56}:; 
int ij,index.temp: 
System.out printin(" 初 始 序列 的 数组 为 : "): 
for(i=0:i<10:iHH)f /对 mn 个 记录 进行 n-1 趟 的 选择 排序 
System.outprint(r[i+” "); 


2.27 ”实例 运行 结果 


for(i=0:i<9:iHH){ 
index=i; /初始 化 第 i 趟 选择 排序 的 最 小 记录 的 指针 
forG=i+1;j<103j+H{ /在 无 序 区 选取 最 小 记录 
iD]<rfindex]){ 
indexj; 


} 


} 
if(index!=i){ // 将 最 小 记录 与 和 交换 
temp=r[j]: 
IFrfindex]: 
T[index]-temp: 
} 
} 
System.out.printin("\n"+" 排 序 好 的 数组 为 :“"); 
forG=0:i<10:iHH{ 


Java Web 开发 实例 大 全 (基础 卷 ) 
System.out printGalij+” 中 


} 
} 


图 秘笈 心 法 


在 实现 选择 排序 时 ， 第 一 将 整个 记录 序列 分 为 有 序 区 和 无 序 区 ， 初 始 状态 有 序 区 为 空 ， 无 序 区 包含 所 有 待 
- 直 重 复 以 上 操作 ， 


排序 的 记录 ; 第 二 对 无 序 区 的 比较 ， 将 使 关键 码 小 的 记录 与 无 序 区 的 第 一 个 记录 进行 交换 ， 


直到 无 序 区 只 剩 下 一 个 记录 。 
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图 实例 说 明 


插入 排序 是 一 类 借助 “插入 ”进行 排序 的 方法 ， 其 主要 思想 是 : 每 次 将 一 个 待 排序 的 记录 按 其 关键 码 的 大 


小 插入 到 一 个 已 经 排 好 序 的 有 序 序列 中 ， 直 到 全 部 记录 排 好 序 ， 本 实例 运行 结果 如 图 2.28 所 示 。 


terminated> I 

歼 置 初 巾 序列 的 数组 为 

49 27 65 37 76 13 38 5 12 56 
排序 好 的 数组 为 : 


Ss 12 13 21 3 49 56 65 76 97 


console % PEE JETIHG (EDREE 


insert Dava Applcation] D\Userc\CHUNBIN\AppData\LocaNGenuitec 


2.28 ”实例 运行 结果 
图 设计 过 程 
实现 直接 插入 排序 的 关键 代码 如 下 : 


package insert; 

public class Insert { 

public static void main(Stri args) { 
int 1[]={49,27,65,97,76,13,38,5,12,56}:; /1/ 给 出 原始 数 的 序列 
int ij,temp.k; /定义 变量 名 称 
System.ouvtprintin(" 放 置 初始 序列 的 数组 为 : /输出 初始 序列 
for(i=0:i<10:itH){ 

System.outprintGr[i+” "): 


for(Gi=1:;i<10:iHD{ 
temp= [i]: 


forG-i-lj>-O&&temp<r[i]j-)f /寻找 插入 位 置 
ta]: 


’ 
i+1]-temp:; /大 于 当前 值 的 ， 插 到 当前 值 后 面 


System.out.printin("\n"+" 排 序 好 的 数组 为 :“"); /| 输出 新 序列 
for(i=0:i<10;:iHH){ 
i System.out.print(rfi]+" "); 

} 


力 秘笈 心 法 


直接 插入 排序 是 插入 排序 中 最 简单 的 排序 方法 ， 首 先 要 将 待 排序 的 记录 划分 为 有 序 区 和 无 序 区 ， 初 始 时 有 


位 置 ， 重 复 操 作 ， 直 到 无 序 区 中 没有 记录 。 
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序 区 为 待 排 记 录 的 第 一 个 记录 ， 无 序 区 是 剩 下 的 待 排序 记录 。 然 后 将 无 序 区 的 第 一 个 记录 插入 到 有 序 


区 的 适当 
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国 实例 说 明 

归并 排序 是 一 种 借助 “归并 ”进行 排序 的 方法 ， 其 实 就 是 将 两 i 
个 或 两 个 以 上 的 有 序 序列 合并 成 一 个 有 序 的 序列 。 归 并 排序 的 主要 CN 
思想 是 将 若干 有 序 序列 逐步 合并 成 一 个 有 序 的 序列 ， 本 实例 运行 结 i 
果 如 图 2.29 所 示 。 


图 设计 过 程 


实现 归并 排序 的 关键 代码 如 下 : 
Package guibing; 
public class MergeS { 
Private static void merge(int r[],int r1[],int s,int pyint ){ 
it i=sj=mt 1,k=s; 
while(i<—mé&&j<=0){ 
ifGrf<-rD){ 
TI[k+H]=rfit+H]: / 取 z 回 和 可 ] 中 较 小 者 放 入 rl[k] 
jelsef 
TH[k+H=r[i+H]: 


2.29 ”实例 运行 结果 


while(i<=m){ // 车 第 一 个 子 序列 处 理 完 ， 则 进行 收尾 处 理 


whiled< 一 D{ 1/ 车 第 二 个 子 序列 处 理 完 ， 则 进行 收尾 处 理 
T1k++]ai]:; 


} 
private static void mergePass(int 1[].int r1[].int n.int h){ 
int i=0; 
while(i<=n-2*h){ / 待 归并 记录 至 少 有 两 个 长 度 为 h 的 子 序列 
merge(rTL,iith-1,i+24h-1); 
it=2*h; 


1 
if(i<n-h){ 
merge(rr1.iith-1.n); 1W/ 待 归并 序列 中 有 一 个 长 度 小 于 hh 
Jelse{ 
for(int k=ik<=n:ktH{ // 待 归并 序列 中 只 剩 一 个 子 序列 
1[kJa[k]: 
} 


, 
} 
public static void mergeS(int r[].int r1[].int n){ 
int h=1; 
while(h<n){ 
mergePass(rr1,n-1,h); 
h=2*h; 
mergePass(r1.1.n-1.h): 
bh=2*h; 
} 
} 
Public static void main(String[] args) { 


itr[=- 136.45.12.56}: 
int rl[]=new int[4]: 
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System.outprintin(" 原 始 数列 是 : "): 
for(int i=0;i<rlength:i +h ){ 
System_outprint(” "+[i)); 
mergeS(r.r1.r.length); 
System.out.printin("n"+" 新 数列 是 :"); 
for(int i=0:i<r length:i+){ 
; System.out.print(” "+r{iD): 


} 
} 


国 秘笈 心 法 

归并 排序 中 的 最 简单 的 排序 是 二 路 归并 排序 ， 其 主要 思想 是 : 将 若干 个 有 序 的 序列 进行 两 两 归并 ， 直 到 所 
有 记录 全 部 归并 到 一 个 序列 。 知 道 了 其 主要 思想 ， 那 么 来 讨论 一 下 它 的 过 程 。 将 有 n 个 记录 的 待 排序 列 看 成 n 
个 子 序 列 ， 然 后 把 它们 两 两 归并 ， 接 着 把 长 度 为 2 的 2 个 子 序 列 再 次 归并 ， 重 复 上 述 过 程 ， 直 到 有 序 为 止 。 


2.6 算法 应 用 


高 级 
实用 指名 凤 女 女 从] 


实例 046 | 


图 实例 说 明 


百 钱 买 百 鸡 是 一 个 很 经 典 的 算法 案例 ， 其 主要 内 容 是 : 公鸡 5 元 一 只 ， 母 鸡 3 元 一 只 ， 小 鸡 一 元 3 只 。 问 
100 元 钱 怎 样 可 以 买 100 只 鸡 ， 本 实例 运行 结果 如 图 2.30 所 示 。 


图 2.30 ”实例 运行 结果 


图 设计 过 程 
只 要 理 清 条 件 关系 ， 就 可 以 很 容易 实现 。 下 面 编写 一 个 Hmbejava 将 其 实现 ， 关 键 代码 如 下 


BGS 
public class Enhe { 
Public static void main(String[] args) { 
int cock,hen.chicken=0; 
ono: cock<=19;cock+H){ 


if(((S*cock+3*hentchicken/3)—100)&&:(p—0)){ 
System.out.print(” ”可 以 买 公鸡 的 只 数 : "+cock); 
System.out.print(” ”可 以 买 母 鸡 的 只 数 : "+hen); 
System.outprint(” ”可 以 买 小 鸡 的 只 数 : “+chicken): 
Systen.out.println("\n"); 
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国 秘笈 心 法 
其 实 对 于 百 钱 买 百 鸡 的 算法 ， 只 要 明白 各 种 条 件 之 间 的 关系 即 可 。 而 且 可 以 知道 公鸡 最 多 买 20 只 ， 母 鸡 最 
多 买 33 只 ， 小 鸡 最 多 买 100 只 。 这 样 只 要 买 各 种 鸡 的 钱 总 数 是 100 元 ， 鸡 的 只 数 也 是 100 只 即 可 。 


实例 047 


国 实例 说 明 


韩信 点 兵 是 一 道 古 代数 学 题 ， 其 内 容 是 : 韩信 带 兵 不 足 
百人 ，3 人 一 行 排列 多 一 人 ，7 人 一 行 排列 少 两 人 ，5 人 一 行 BEETETIS GEE 
排列 正好 。 本 实例 是 计算 出 韩信 究 况 点 了 多 少 兵 ， 实 例 运 行 I 
结果 如 图 2.31 所 示 。 


图 设计 过 程 


We 图 2.31 运行 
只 要 理 清 条 件 关系 ， 就 可 以 很 容易 实现 。 下 面 编写 一 个 四 
Hxinjava 去 实现 它 ， 实 现 Hxinjava 类 的 关键 代码 如 下 : 
package hanxin; 
public class Hxin { 
public static void TE) args){ 
int a=0,b=0,c=0,preson; // 定 义 总 人 数 和 各 种 站 法 的 剩余 人 数 
for(preson=0;preson<100;presont+){ 
a=preson%3; // 每 排 3 人 的 剩余 人 数 
b=preson%7; // 每 排 7 人 的 剩余 人 数 
c=preson965; // 每 排 5 人 的 剩余 人 数 
if(a—l&&b—5&&c—0){ // 都 符合 条 件 时 的 人 数 
System.outprintln(" 韩 信 带 的 兵 数 是 : "+preson); 
} 
} 
} 
} 
量 秘笈 心 法 


其 实 对 于 韩信 点 兵 的 算法 ， 只 要 将 7 人 少 两 人 转换 为 7 人 多 5 人 ， 这 样 解 决 问题 的 方法 就 很 明显 了 ， 再 限 
定 一 下 总 的 人 数 不 多 于 100 即 可 。 


实例 048 
实例 实用 指数 : 让 友 妇 从 : 


有 


图 实例 说 明 
斐 波 那 契 数列 的 定义 为 : 它 的 第 一 项 和 第 二 项 均 为 


1， 以 后 各 项 都 为 前 两 项 之 和 。 本 实例 将 介绍 如 何 实现 斐 En 一 
波 那 契 数列 ， 实 例 运 行 结 果 如 图 2.32 所 示 。 Sr taocaN ene Com 
| | 设计 过 程 你 看 的 中 下 数列: 

只 要 设计 好 循环 ， 就 可 以 很 容易 地 实现 。 编 写 - 
Fbo.java 类 ， 成 员 身 、 包 分 别 是 表示 相 邻 的 两 项 ， 寺 条 图 2.32 ”实例 运行 结果 


Java Web 开发 实例 大 全 (基础 卷 ) 
件 语句 用 来 判定 符合 条 件 的 位 置 ， 用 一 个 while 循环 去 求 整个 斐 波 那 契 数列 ， 关 键 代 码 如 下 : 


package fbo: 

import java.util.Scanner: 

public class Fbo { 

Private static void f(int x){ 
int f1=1,f2=1,i=3; 
if(x—1)System.out.print(f1); 
if(x—2)System.out.print(f1+" "+f2); 


f(x>—3){ // 求 位 置 大 于 3 的 数列 
System.out.print(fl+" "+f2); 
while(x>=i){ // 求 数列 
fl=f2+f1; // 求 两 项 之 和 
Systemoutprint(” "+f1): 
Wi 
f=2+f1; 
Systemoutprint(” "+£2): 
} 
E } 
public static void main(String[] args) { 
Scanner s=new Scanner(System.in): 
System.out.printin(" 请 输入 你 想 查 看 的 可 波导 如 数 列 : ye 
int num=s.nextIntO; 
Systemout,println(" 你 想 看 的 斐 波 那 契 数列 : "): 
fnuny/2+1); 
} 
} 
秘笈 心 法 


其 实 对 于 求 斐 波 那 契 数 列 的 算法 ， 只 要 明白 如 何 去 设 定 一 个 循环 即 可 ， 可 以 在 循环 中 使 用 类 似 递归 的 赋值 
模式 。 


实例 
实例 049 实用 指数 : 信友 友人 ， 


图 实例 说 明 
水 仙 花 数 是 一 个 3 位 数 ， 每 一 位 数 的 立方 相 加 等 于 该 数 本 身 。 本 实例 将 介绍 如 何 实现 水 仙 花 数 的 算法 ， 实 


例 运 行 结果 如 图 2.33 所 示 。 


plication] | 
-~ 


| -se 


图 2.33 ”实例 运行 结果 
国 设计 过 程 
编写 Wflowerjava 类 ， 用 于 实现 水 仙 花 数 的 算法 ， 关 键 代 码 如 下 : 


package wf: 

public class Wflower { 

public static void main(String[] args) { 

int a=0.b=0,c=0; 

System.out.printin(" 水 仙 花 数 是 :"): 

for (inti= 100; i< 1000: iH){ /遍历 所 有 3 位 数 
a=i/100; /获取 3 位 数 中 百 位 的 数 
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b=i96100/10; /获取 3 位 数 中 十 位 的 数 
c=i%100%10; /获取 3 位 数 中 个 位 的 数 
= // 计 算 第 一 位 数 的 立方 
b=b*b*b; /计算 第 二 位 数 的 立方 
C=C*c*e; /计算 第 3 位 数 的 立方 
证 (a+b+c 一 j) // 如 果 符 合 水 仙 花 数 


Systemoutprintt” "i); 
} 
} 


图 秘笈 心 法 
其 实 对 于 求 水 仙 花 数 的 算法 ， 只 要 明白 如 何 去 设 定 一 个 循环 即 可 。 在 循环 中 ， 对 100 一 1000 之 内 的 数 进行 
遍历 ， 只 要 符合 条 件 的 即 可 进行 输出 。 


实例 050 


图 实例 说 明 

对 于 素数 的 定义 是 ， 如 果 一 个 数 只 能 被 1 和 它 本 身 整除 ， 那么。 必 II 
这 个 数 就 是 素数 。 本 实例 介绍 如 何 实现 素数 的 算法 ， 实 例 运行 结果 | em onesienDeit 
如 图 2.34 所 示 。 3e 不 是 双 籽 1 


| | 设计 过 程 
编写 Sushu.java 类 ， 用 于 实现 素数 的 算法 ， 关 键 代码 如 下 : 


package sushu: 
import java.util.Scanner; 
public class Sushu { 
public static void main(String[] args) ts 
Scanner s=new Scanner(System. 
System.out.printin(" 请 向 六 要 判断 的 数 !"); 
int x=s.nextInt(); 
int i=2,flage=0; 
while(flage 一 0&&i<x){ /对 除数 进行 遍历 
if(x%i—0){ 1/ 判断 是 否 被 整除 
flage=1; 
} 
else{ 
itt; 
} 
if(flage—0){ /对 标记 进行 判断 
System.outprintln(x+" 是 素数 ! "): 
} 


else{ 
System.outprintln(x+" 不 是 素数 ! "): 


图 2.34 实例 运行 结果 


} 
} 
} 


国 秘笈 心 法 

素数 的 算法 可 以 用 一 个 标记 和 一 个 while 循环 来 实现 。 首 先 将 标记 初始 化 为 零 , 用 while 循环 去 实现 从 1 到 
要 判断 的 数 的 前 一 位 的 遍历 ， 每 遍历 一 个 数 做 一 个 判断 ， 如 果 可 以 被 1 和 要 判断 数 本 身 之 外 的 数 整除 ， 就 将 标 
记 设 置 为 非 零 的 值 ， 并 跳出 循环 进行 对 标记 的 判断 。 
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实例 051 


图 实例 说 明 

汉 诺 塔 问题 是 一 个 古典 数学 问题 ， 其 内 容 是 : 古代 有 一 个 楚 塔 ， 塔 内 有 3 个 座 ， 即 A、B、C， 开 始 时 A 座 
上 有 64 个 盘子 ， 盘 子 的 大 小 不 等 ， 大 的 在 下 面 ， 小 的 在 上 面 。 有 一 个 = 轩 
老 和 尚 想 把 这 64 个 盘子 从 A 座 移 到 C 座 , 但 每 次 只 多 许 移动 一 个 盘子 ，。 ma x Ee 
且 在 移动 过 程 中 3 个 座 上 的 都 要 保持 大 盘子 在 下 面 小 盘子 在 上 面 。 本 | 


实例 将 介绍 如 何 实现 汉 诺 塔 的 算法 ， 实 例 运行 结果 如 图 2.35 所 示 。 [esrsrasmaT | 
图 关键 技术 国 | 
知道 了 问题 , 那么 就 来 讨论 一 下 过 程 : 将 个 盘子 从 一 个 座 移 到 另 。 上 直 - 六 


-个 座 上 ,这 是 每 个 移动 者 要 做 的 。 除 去 第 一 个 移动 者 外 ， 其 他 都 要 命 


令 其 他 的 移动 者 ， 就 是 第 一 个 移动 者 开始 ， 任 务 层 层 下 放 ， 最 后 将 一 个 图 235 实例 运行 结果 
盘子 从 一 个 座 上 移 到 另 一 个 座 上 ， 这 是 第 一 个 移动 者 自己 做 的 工作 。 
图 设计 过 程 


创建 Hanoijava 类 , 编写 move0 方 法 , 将 一 个 盘子 从 一 个 座 移 到 另 一 个 座 ; 编写 hanoit0 方 法 , 参数 one、 two 
和 three 分 别 表示 座 一 、 座 二 和 座 三 的 变量 ， 将 盘子 从 one 移 到 three 座 。Hanoijava 类 的 关键 代码 如 下 : 


Ppackage digui; 

import java.util.Scanner; 

public class Hanoi { 

private static void move(char x,char y){ 
System.out.printf("%%c-->%%c",x,y); 
Systenn.out.print("\n"): 


// 将 n 个 盘子 从 第 一 座 借助 第 二 座 移 到 第 三 座 
Private static void hanoit(int n.char one,char two,char three){ 


ifo 一 D{ /如 果 只 有 一 个 盘子 
move(one,three): 

} 

else{ 
hanoit(n-1.0ne.three,two); /将 一 上 的 盘子 借助 三 移 到 二 上 
move(one.three): 


hanoit(n-1,two.one,three); /将 二 上 的 盘子 借助 一 移 到 三 上 
} 


} 

public static void main(String[] args) { 
int m; 
System.outprintin(" 请 输入 你 要 移动 的 盘子 数 : "); 
Scanner s=new Scanner(System.in); 
m=s.nextIntO: 
System.out.printin(" 移 动 "+m+" 个 盘子 的 步骤 如 下 "); 
hanoit(n.A'.B'.C"): 

} 


秘笈 心 法 
汉 诺 塔 的 算法 是 典型 递归 问题 的 算法 ， 一 定 要 控制 好 递归 的 条 件 ， 和 否则 ， 很 容易 造成 死 循 环 。 


页 面 效果 

表格 样式 

鼠标 样式 
文字 及 列表 样式 
文字 特效 

图 片 滤 镜 特效 
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3.1 页 面 效 果 


在 网 站 开发 时 , 为 了 美化 网 站 的 外 观 , 常常 需要 使 用 CSS 样式 来 改变 网 站 的 整体 风格 , 如 网 站 的 字体 样式 、 
表格 样式 、 超 链接 的 样式 、 整 体 颜 色 搭配 等 。 下 面 将 通过 几 个 实例 介绍 在 网 站 中 常用 的 页 面 效果 。 


BE 


图 实例 说 明 

在 浏览 网 站 时 ， 会 发 现 网 站 中 所 有 网 页 的 风格 都 相同 ， 如 页 面 颜色 、 页 面 字体 样式 、 页 面 的 背景 等 ， 这 样 
的 网 站 给 人 的 感觉 会 很 紧凑 。 如 果 把 网 站 中 的 每 个 页 面 都 设计 成 不 同 风格 ， 并 且 制 作成 花花 绿绿 的 ， 这 样 会 给 
人 造成 视觉 疲劳 ， 而 且 整 个 网 站 显得 很 “ 散 ”"。 本 实例 将 介绍 如 何 应 用 CSS 样式 来 统一 网 站 的 风格 ， 运 行 结果 
如 图 3.1 所 示 。 


3.1 网 站 的 用 户 注册 页 


图 关键 技术 

本 实例 主要 应 用 CSS 样式 的 字体 属性 、 颜 色 和 背景 属性 以 及 边框 属性 来 实现 。 下 面 分 别 介绍 这 几 种 属性 的 
用 法 。 

1， 字 体 属 性 

字体 属性 包括 字体 的 颜色 、 字 体 大 小 、 字 体 的 风格 等 ， 常 用 的 字体 属性 及 说 明 如 表 3.1 所 示 。 


表 3.1 字体 属性 及 说 明 


字体 属性 说 了 明 


设置 或 者 检索 对 象 中 的 文字 特性 的 复合 属性 


| 
font-family | 用 于 指定 字体 名 称 ， 可 以 指定 一 个 字体 名 ， 也 可 以 用 〔.) 分 隔 指定 多 个 字体 名 
font-size | 设置 字体 的 字号 
font-variant | 设置 英文 大 小 写 转换 
font-weight | 设置 字体 的 粗细 
font-style 用 来 指定 是 否 对 字体 应 用 斜体 风格 
2.， 颜色 和 背景 属性 


CSS 中 的 颜色 属性 用 于 设置 页 面 元 素 的 颜色 ， 背 景 属性 用 于 设置 背景 颜色 或 背景 图 像 ， 具 体 属 性 及 说 明 如 
表 3.2 所 示 。 
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表 3.2 颜色 和 背景 属性 及 说 明 


颜色 和 背景 属性 说 明 
color 设置 页 面 的 前 景 颜 色 
background-color 设置 背景 颜色 
background-image 设置 背景 图 像 


background-repeat 
重复 只 显示 一 个 ) 


设置 背景 图 像 的 排列 方式 ， 包 括 4 种 方式 ， 即 repeat 〈 在 水 平和 垂直 方向 上 都 是 以 瓷砖 形式 反复 
显示 )、repeat-x〔 只 在 水 平方 向 重复 显示 )、repeat-y (只 在 垂直 方向 重复 显示 ) 和 no-repeat (不 


background-attachment 


设置 背景 图 像 是 否 固定 ，fixed〈 固 定 背 景 图 像 )、scroll (背景 图 像 和 其 他 内 容 一 起 滚动 》 


background-position 设置 背景 图 像 的 显示 位 置 
background 综合 设置 背景 图 像 的 属性 


3. 边框 属性 


边框 属性 用 于 设置 元 素 的 边框 宽度 、 样 式 和 颜色 ， 具 体 属性 及 说 明 如 表 3.3 所 示 。 


表 3.3 边框 属性 及 说 明 


边框 属性 说 明 
border 边框 复合 属性 
border-top 上 边框 
border-left 左边 框 
border-right 右边 框 
border-bottom 下 边框 
border-color 边框 颜色 
border-style 边框 样式 
border-width 边框 宽度 
border-top-color 上 边框 颜色 
border-left-color 左边 框 颜色 
border-right-color 右边 框 颜色 
border-bottom-color 下 边框 颜色 
border-top-style 上 边框 样式 
border-left-style 左边 框 样式 
border-right-style 右边 框 样式 
border-top-width 上 边框 宽度 
border-left-width 左边 框 宽度 
border-right-width 右边 框 宽度 
border-bottom-width 下 边框 宽度 

边框 样式 的 属性 及 说 明 如 表 3.4 所 示 。 
表 3.4 边框 样式 的 属性 及 说 明 
边框 样式 属性 说 明 
Done 无 边框 
hidder 隐藏 边框 IE 不 支持 
dotted 边框 由 点 组 成 
dashed 边框 由 短线 组 成 
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续 表 
边框 样式 属性 说 明 

solid 边框 是 实 线 

double 边框 是 双 实 线 

groove 边框 带 有 立体 感 的 沟 模 

Tidge 边框 成 俏 形 

inset 边框 内 嵌 一 个 立体 边框 

outset 边框 外 嵌 一 个 立体 边框 


图 设计 过 程 
(1) 定义 CSS 样式 表 文 件 ， 将 其 命名 为 mycss.css， 在 该 文件 中 使 用 body 设置 页 面 的 样式 ， 使 用 td 设置 
所 有 单元 格 内 的 字体 样式 ， 使 用 input 设置 所 有 文本 框 的 样式 。 其 中 .tdl 是 设置 具体 某 个 单元 格 内 的 字体 样 


式 ，.bottonl 是 设置 按钮 的 显示 样式 ， 关 键 代码 如 下 : 
bod; 
Re 
background-color: #CCCCFF: 
} 


tdf 
font-family: "Times New Roman", Times, serif; 
font-size: 14px; 
font-weight: bold; 
} 
input { 
font-size:9pt: 
color: #003399: 
font-family: 壬 陶 
border: '1px' 'dashed' #999999'; 
background: #EEEEEE: 


} 

td1{ 
font-size: 12pt; 
font-family: 逢 让 


} 

‘botton1{ 
background: #FFFFFF: 
font-weight:bold; 
width: 50px:; 


(2) 新 建 index.html 网 页 ， 在 页 面 中 引用 外 部 样式 表 文 件 mycss.css， 粗 体 代码 部 分 为 具体 引入 的 CSS 文 
件 ， 有 具体 代码 如 下 : 
<head> 


<title> 统 一 站 内 风格 </title> 

<link rel="stylesheet" type="text/css" href="mycss.css"> 
</head> 
(3) 在 页 面 中 引用 相应 的 CSS 样式 ， 关 键 代码 如 下 : 

<body> 

<form action=""> 

<table align="center "> 

<tr> 


<td> 用 户 名 : </td><td><input type="tfext” name="name”/></td> 


<td > 密码 : </td><td><input type="password” name="pwd” /></td> 


<td > 确认 密码 : </td><td><input type= "password" name="pwd1" /></td> 
<t> 
<t> 

<td > 性 别 : </td> 
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<td> 
<input type="7radio" name="sex” value="m"/> 男 
<input type="radio”" name="sex” value="f"/> 女 
<id> 


$9 


<td > 年 龄 :</td><td><input type="tfext" name="age” /></td> 


<td><input class="botton1” type="submit” value=" 逆 碎 " /></td> 
<td><input class="botton1" type="button” value =" 备 钙 "></td> 


图 秘笈 心 法 
-个 网 站 可 能 有 不 同 的 风格 样式 ， 而 且 网 站 中 不 同 的 元 素 可 能 风格 也 不 同 。 为 了 实现 不 同 风格 样式 的 切换 ， 
可 以 定义 多 个 不 同 风格 样式 的 CSS 样式 文件 ， 在 网 站 需要 使 用 时 ， 直 接 通过 <link> 标 签 导入 即 可 。 
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图 实例 说 明 

默认 情况 下 ， 使 用 <a> 标 签 定义 的 超 链接 ， 字 体 颜 色 为 蓝 色 ， 可 以 通过 CSS 样式 来 改变 链接 字体 的 颜色 以 
及 样式 。 运 行 本 实例 ， 当 鼠标 经 过 超 链接 文字 时 ， 将 文字 颜色 改变 并 将 字体 改 为 粗 体 ， 当 鼠标 移出 时 ， 文 字 改 
为 初始 状态 ， 运 行 结 果 如 图 3.2 所 示 。 


es 


3.2 ，” 超 链接 的 显示 样式 


图 关键 技术 
在 CSS 样式 中 ， 对 超 链接 的 样式 有 以 下 几 种 定义 。 
(1) 设置 链接 未 被 访问 时 的 样式 ， 具 体 语法 如 下 : 
a:link {font-size: 10px:;... } 
(2) 设置 链接 在 鼠标 经 过 时 的 样式 ， 具 体 语 法 如 下 : 
ahover{font-size:10px:text-decorationrunderline:color#ff0000} 
(3) 设置 链接 激活 时 的 样式 ， 具 体 语法 如 下 : 
a:active {font-size: 10px;...} 
(4) 设置 链接 已 被 访问 过 的 样式 ， 具 体 语法 如 下 
a:visited {font-size:10px:color:#00ffE:...} 

图 设计 过 程 
(1) 新 建 ndex.html 页 ， 在 该 页 中 首先 定义 超 链接 的 CSS 样式 ， 关 键 代 码 如 下 : 
<head> 


font-size:9pt; 
color:#007766: 


(2) 在 该 页 中 
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使 用 <a> 标 签 添加 超 链接 ， 关 键 代 码 如 下 : 


<table align="center”> 


<td> 明 
</table> 
国 秘笈 心 法 
超 链接 是 每 个 区 
超 链接 的 几 个 属性 
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图 实例 说 明 


日 科技 一 <a hre 合 哇 > 明 日 科技 </a></td> 


站 中 必 有 的 功能 ， 换 句 话 说 它 是 网 站 中 最 常用 的 功能 。 所 以 读者 有 必要 掌握 在 CSS 样式 中 


(a:link、a:hover、a:active、a:visited) 的 应 用 。 


网 页 换 肤 的 功能 在 网 站 上 应 用 得 非常 广泛 ， 用户 可 以 根据 自己 的 爱好 ， 选 择 不 同 的 页 面 风格 。 运 行 本 实例 ， 
如 图 3.3 所 示 ， 当 单 击 网 页 中 的 “ 橘 色 经 典 ” 链 接 时 ， 页 面 风 格 将 变 为 桶 色 主 题 ， 当 单 击 “ 灰 色 畅想 ”链接 时 ， 


页 面 风格 将 变 为 灰色 主题 。 
3.3 ”可 以 更 换 网 页 风格 的 页 面 
图 关键 技术 
实现 换 肤 功能 ， 主 要 是 根据 单 击 超 链接 时 ， 调 用 JavaSeript 方法 来 动态 改变 页 面 的 <link> 标 签 的 href 属性 值 


实现 的 。 首 先 需 要 于 
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有 先 定义 好 两 个 不 同 风格 的 CSS 样式 文件 ， 然 后 单 击 某 个 风格 的 链接 动态 实现 改变 。 
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图 设计 过 程 
(1) 编写 不 同 风格 的 CSS 样式 文件 ， 详 细 代码 请 参见 本 书 附带 的 光盘 。 
(2) 新 建 ndex.htm 网 页 ， 在 页 面 中 引用 其 中 一 个 CSS 样式 文件 作为 网 页 默认 的 样式 ， 关 键 代 码 如 下 : 
<link id-"myCss" href="orange.css" rel="stylesheet"> 
(3) 在 <script> 标 签 中 编写 保存 cookie 信息 的 方法 ， 用 于 将 CSS 样式 文件 的 路 径 信息 保存 到 客户 端 Cookie 
文件 中 ， 具 体 代 码 如 下 : 


function writeCookie(csspath){ 
var today = new Date(); 
Var expires = new Date(); 
expires.setTime(today.getTime() + 1000*60*60*24*30): /有 效 期 为 30 天 
Var str="cssPath="+csspath+";expires=" + expirestoGMTStringO+":" ; 
document.cookie=str; 
} 
(4) 编写 读 取 cookie 信息 的 方法 ， 关 键 代 码 如 下 : 
function readCookie(cookieName){ 
Var search = cookieName + "="; 
if (document.cookie.length > 0) { 
offset = document.cookie.indexOf(search); 
if (offset !=-1) { 
offset += search.length; 
end = document.cookie.indexOf(";", offset); 
if(end—-D{ 
end = document.cookie.length; 
return unescape(document.cookie.substring(offset, end)); 
} 
} 
i } 
(5) 编写 超 链接 的 onClick 事件 调用 的 方法 ， 关 键 代码 如 下 : 
function change(type){ 
if(type—"orange"){ 
writeCookie("orange.css"); 
if(type—"gray"){ 
document.getElementById("myCss").href="gray.css"; 
writeCookie("gray.css"); 
} 
} 


(6) 在 页 面 中 超 链 接 的 关键 代码 如 下 : 

<a href=#" onClick="change(orange)">[ 橘 色 经 典 ]</a> 

<a hre 仁 #" onClick="change('gray)">[ 灰 色 畅 想 ]</a> 
图 秘笈 心 法 

在 实现 网 页 换 肤 时 ， 需 要 将 每 次 执行 所 调用 的 CSS 样式 文件 的 路 径 信息 保存 到 客户 端的 cookie 中 。 为 什么 
呢 ? 因为 当 用 户 单 击 链接 换 肤 后 ， 网 页 确实 是 换 了 一 种 风格 ， 但 是 随 着 浏览 器 的 关闭 ， 网 页 改变 的 风格 将 会 消 
失 ， 因 为 浏览 器 并 不 会 自动 保存 用 户 所 执行 的 这 次 改变 操作 ， 当 再 次 打开 浏览 器 访问 此 页 时 ， 网 页 风格 还 是 没 
改变 之 前 的 ， 所 以 需要 使 用 JavaScript 将 每 次 的 操作 都 保存 在 cookie 中 。 
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图 实例 说 明 
在 许多 网 站 中 ， 都 会 包含 深 动 文字 的 特效 ， 这 些 特效 也 可 以 称 为 走马 灯 特 效 ， 如 一 些 网 站 中 的 新 闻 公告 。 
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本 实例 将 介绍 如 何在 网 页 中 实现 滚动 文字 。 运 行 本 实例 ， 如 图 3.4 所 示 ， 将 从 网 页 的 下 方向 上 逐渐 出 现 滚动 的 
文字 信息 。 


美国 国务 卿 希拉 里 . 克 霖 额 昨 日 访 华 ， 洽 资中 美 径 济 合 首 。 
公布 时 间 :2010-05-28 
着 脐 债 务 危机 合演 盒 烈 ， 将 影响 整个 欧洲 经 济 。 


公布 时 间 :2010-05-58 


图 3.4 在 网 页 中 添加 滚动 文字 


图 关键 技术 


实现 滚动 文字 的 特效 ， 主 要 是 在 页 面 中 应 用 <marquee> 标 签 。 该 标签 专门 用 于 实现 文字 或 图 片 的 滚动 效果 ， 
其 常用 属性 及 说 明 如 表 3.5 所 示 。 


表 3.5 <marquee> 标 签 的 属性 及 说 明 


<marquee> 标 签 的 属性 说 明 
align 滚动 内 容 的 对 齐 方 式 ，top〔 顶 端 对 齐 )、middle( 居 中 对 齐 )、bottom〔 向 下 对 齐 ) 
direction 滚动 的 方向 ;up 〈 向 上 ) 、down〈 向 下 ) 、left〈 向 左 ) 、right《〈 向 右 ) 
behavior 滚动 的 方式 ;scroll (循环 滚动 ) 、slide (一 次 滚动 ) 、alternate〈 交 蔡 滚 动 ) 
loop 循环 滚动 的 次 数 ， 取 值 为 -1 或 Infinite 表示 无 限 次 滚动 
scrollamount 滚动 的 速度 ， 单 位 为 像素 ， 值 越 大 滚动 速度 越 大 
scrolldelay 两 次 滚动 的 间隔 时 间 
width 滚动 区 域 的 宽度 ， 单 位 为 像素 或 以 百分比 形式 表示 
height 滚动 区 域 的 高 度 
bgcolor 滚动 区 域 的 背景 颜色 
hspace 滚动 区 域 与 浏览 器 边界 的 水 平 距离 
Vspace 滚动 区 域 与 浏览 器 边界 的 垂直 距离 


| | 设计 过 程 


创建 index.htm 页 面 ， 在 该 页 中 的 适当 位 置 将 要 滚动 的 内 容 添加 到 <marquee> 标 签 中 ， 然 后 通过 设置 
<marquee> 标 签 :的 相关 属性 来 自 定义 滚动 的 显示 效果 ， 关键 代码 如 下 : 


<marquee direction="up” onMouseOver="this.scrollAmount='1"onMouseOut="this.scrollAmount=2" onMouseDown="this.scrollAmount='4'; this.direction= 
'down""onMouseUp="this.scrollAmount="1';this.direction='"up"" scrollAmount="2" height="291> 
‘<table cellspacing="2" cellpadding="0" border="0" width="100%" align="center"> 


<td height="30" style="color:yellow:font-size:10pt:font-weight:bold:"> 
<a href=#"> 美 国 国务 婴 希 拉 里 。 克 林 顿 昨日 访 华 ， 治 谈 中 美 经 济 合 作 。</a> 


<td height="20" align="right"> 公 布 时 间 :2010-05-28 </td> 


<tr> 
<td height="30" style="color:yellow:font-size:10pt:font-weight:bold:"> 
<a hre 伍 "#"> 希 腊 债 务 危机 念 演 钝 烈 ， 将 影响 整个 欧洲 经 济 。</a> 
<td> 
</tr> 
<t> 
<td height="20"align="right”"> 公布 时 间 :2010-05-58 </td> 
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通过 <marquee> 标 签 的 属性 可 以 实现 不 同 的 滚动 效果 ,其 中 最 常用 的 属性 是 滚动 的 方向 (direction)、 滚 动 的 
方式 behavior) 以 及 深 动 的 速度 scrollamount)。 
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图 实例 说 明 
在 浏览 网 站 时 ， 常 常会 发 现 有 些 网 站 页 面 背 景 有 渐变 的 效果 ， 这 种 效果 可 以 使 页 面 更 加 美观 。 本 实例 将 介 
绍 如 何 实现 网 页 的 渐变 背景 ， 实 例 运行 效果 如 图 3.5 所 示 ， 页 面 背景 是 渐变 的 效果 。 


图 3.5 具有 渐变 背景 的 网 页 


图 关键 技术 


实现 网 页 背景 的 渐变 ， 主 要 是 通过 在 CSS 样式 中 定义 Alpha 滤 镜 来 实现 的 。 在 Alpha 滤 镜 中 ， 需 要 设置 渐 
变 的 属性 值 ， 其 主要 的 属性 及 说 明 如 表 3.6 所 示 。 


表 3.6 Alpha 滤 镜 的 属性 及 说 明 


属 性 说 明 
Opaci 表示 透明 水 准 ， 默 认 范 围 是 0 一 100，0 表示 完全 透明 ，100 表示 完全 不 透明 
Finishopaci 可 选 属性 ， 设 置 渐变 的 透明 效果 时 ， 使 用 该 参数 指定 结束 时 的 透明 度 ， 范 围 在 0~100 之 间 
Style 指定 透明 区 域 的 形状 特征 : 0 (统一 形状 ) 、1 线形) 、2 (放射状 ) 、3 (长 方形 ) 
Startx 渐变 透明 效果 的 开始 x 坐标 
Sta 渐变 透明 效果 的 开始 y 坐标 
Finishx 渐变 透明 效果 的 结束 x 坐标 
Finish 渐变 透明 效果 的 结束 y 坐标 
图 设计 过 程 


新 建 index.htm 网 页 ， 在 该 页 中 的 <style> 标 签 中 加 入 渐变 效果 的 CSS 样式 ， 上 有 具体 代码 如 下 : 
<style type="text/css > 
body{ 
background:green; 
filter: Alpha(Opacity=20.Finishopacity=80.,Style=3,Startx=100.Starty=100.Finishx=0.Finishy=0);: 
Se 
国 秘笈 心 法 


为 了 提高 开发 效率 , 可 以 将 Alpha 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 , 在 不 同 网 页 中 应 用 此 样式 时 直接 通 
过 <link> 标 签 引用 CSS 文件 即 可 。 


Java Web 开发 实例 大 全 (基础 卷 ) 
图 实例 说 明 
在 网 页 布局 的 大 部 分 情况 下 需要 使 用 表格 嵌 套 来 实现 定位 ， 这 种 方法 虽然 可 以 在 一 定 程度 上 解决 问题 ， 但 
是 它 却 有 个 致命 的 缺点 ， 就 是 如 果 表 格 中 的 某 个 元 素 的 位 置 发 生 改变 就 有 可 能 打 乱 整个 页 面 的 布局 。 本 实例 将 


介绍 如 何 应 用 CSS 样式 控制 页 面 的 绝对 定位 ， 其 实现 的 效果 示意 图 如 图 3.6 所 示 。 


页 面 项 部 边界 


top_div bottom div 


3.6 CSS 的 绝对 定位 显示 效果 


图 关键 技术 

在 CSS 中 提供 了 更 加 灵活 的 定位 方法 , 常用 的 定位 属性 包括 position、left、top、width、height 等, 其 中 position 
属性 就 是 实现 绝对 定位 的 关键 属性 ， 它 采用 了 3 种 定位 方式 ， 包 括 绝对 定位 (absolute)、 相 对 定位 relative) 
和 静态 定位 〈static )。 
图 设计 过 程 

新 建 index.htm 网 页 ， 利 用 CSS 实现 页 面 中 两 个 图 片 的 绝对 定位 ， 将 两 个 图 片 分 别 放置 到 div 中 并 为 div 定 
义 两 个 不 同 的 ia， 第 一 张 图 片 定义 的 id 值 为 ttp_Div， 第 二 张 图 片 定 义 的 id 值 为 bottom_ Div， 其 中 CSS 属性 设 


置 的 关键 代码 如 下 : 
#top_Div { 
position: absolute; /# 绝 对 定位 +/ 
left: 20px: /距离 左 侧 页 面 20px*/ 
top: 10px: /距离 顶部 页 面 10px*/ 
a { 
position: absolute; /# 绝 对 定位 Ht/ 
left: 130px: * 距 离 左 侧 页 面 130px*/ 
top: 10px /距离 顶部 页 面 10px*/ 
} 
图 秘笈 心 法 


绝对 定位 使 元 素 的 位 置 与 文档 流 无 关 ， 因 此 不 占据 空间 ， 这 一 点 正好 与 相对 定位 不 同 ， 相 对 定位 实际 上 被 
看 作 普 通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 是 相对 于 它 在 普通 流 中 的 位 置 。 


图 实例 说 明 
HTML 页 面 居中 的 需求 很 常见 ， 在 实际 的 项 目 应 用 中 也 会 经 常 磁 到 类 似 的 问题 。 但 是 利用 CSS+DIV 的 方 
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法 来 实现 更 为 简单 ， 只 要 5 一 6 行 代码 即 可 实现 。 本 实例 将 介绍 如 何 利用 CSS 来 设置 页 面 的 垂直 居中 效果 ， 实 
现 效果 如 图 3.7 所 示 。 


EE cssR 相 中 - Windows ntemet Explorer 忆 


le psc//ocalh. |B|s|x|P eng pr 


实 和 天 | 褒 回 儒 X 了 网站 ” 有 ENT 库 


后 css 二 从 ~ 国 - 品 怖 - 


真 的 居中 了 


i 
图 3.7 CSS 控制 的 文字 垂直 居中 显示 效果 
图 关键 技术 
实现 垂直 居中 关键 的 几 个 属性 是 textralign line-height 和 vertical-align。 text-align 属性 表示 文字 的 对 齐 样式 ， 
line-height 属性 表示 垂直 居中 的 高 度 ，vertical-align 属性 表示 垂直 居中 。 
图 设计 过 程 
新 建 index.htm 网 页 ， 首先 将 需要 居中 显示 的 内 容 用 div 包裹 起 来 ,并 为 div 定义 一 个 这 值 content， 然 后 在 
CSS 文件 中 定义 该 div 的 CSS 属性 ， 关 键 代 码 如 下 : 


#content { 
text-align: center; A/* 文 字 水 平 居中 */ 
margin-right: auto; 
margin-left: auto: 
vertical-align: middle; /+ 文字 垂直 居中 */ 
line-height: 200px: 必 垂 直 居中 的 高 度 */ 
height: 200px; /*div 的 高 度 */ 
width: 400px; /div 的 宽度 */ 
background: #cef: /div 的 背景 颜色 */ 

} 

图 秘笈 心 法 


利用 CSS 实现 垂直 居中 时 ， 必 须 是 line-height 和 vertical-align 两 个 属性 搭配 使 用 ， 和 否则 达 不 到 预期 的 效果 。 


实例 059 


图 实例 说 明 

现在 在 大 部 分 的 网 站 中 都 可 以 看 到 图 文 混 排 效果 的 页 面 布局 ， 那 么 这 种 效果 又 是 如 何 实现 的 呢 ? 本 实例 将 
介绍 如 何 利用 CSS 实现 图 文 混 排 效果 ， 实 例 运行 效果 如 图 3.8 所 示 ， 图 在 左边 ， 文 字 在 图 的 右边 和 下 方 。 
图 关键 技术 


本 实例 的 实现 主要 是 利用 CSS 的 float 属性 ， 应 用 该 属性 可 以 完成 图 文 混 排 ， 该 属性 包含 4 个 可 选 值 ， 分 别 
为 left、right、none 和 inherit。 
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天 一 | 
OO le cwsesynoesaop - 41X|[P 


谨 Ws 弃 委 守 网 站 v 候 ] 网 页 关怀” 


全 cs 实现 6 图 文 时 从" 国 "” 


现 的 图 文 泥 排 
和 


© EE 
以 更 加 关 观 好 展现 页 
面 的 范 构 币 后 效果 ， 


Css 实 现 的 图 文 溪 排 
的 履 果 可 以 更 加 美观 
地 展现 页 面 的 结构 布局 次 具 。 


类 计算 机 | 保护 棱 式 ; 禁用 人 ”| A125% = 


3.8 设置 图 文 混 排 后 的 效果 


图 设计 过 程 
(1) 新 建 index.html 页 ， 利 用 CSS 实现 图 文 混 排 的 页 面 布局 效果 ，CSS 设置 的 关键 代码 如 下 : 
,Picture { 

float: left: /在 文本 的 左边 9 

border: 1px solid #000000: 族 图 片 边框 的 颜色 */ 

margin-top: 10px: /人 # 上 方 与 其 他 元 素 保持 10px*/ 

margin-bottom: 10px: 放下 方 与 其 他 元 素 保持 10px*/ 

margin-left: 10px: 必 左 侧 与 其 他 元 素 保持 10px*/ 

margin-right: 10px; /* 右 侧 与 其 他 元 素 保持 10px*/ 


} 
(2) 在 图 片 中 调用 这 个 CSS 类 ， 实 现 图 文 混 排 的 页 面 效 果 ， 关 键 代码 如 下 : 


<img src="head.png" class="picture"/> 
国 秘笈 心 法 
利用 CSS 样式 中 的 float 属性 即 可 实现 图 文 混 排 效果 ,如 果 再 配合 一 些 其 他 属性 的 使 用 , 就 可 以 达到 更 加 完 


美的 效果 。 


3.2 表格 样式 


在 设计 网 站 时 ， 对 表格 的 应 用 非常 频繁 。 可 以 使 用 表格 布局 整个 网 页 ， 也 可 以 在 网 页 中 显示 列表 信息 等 。 
在 使 用 表格 时 ， 可 以 使 用 CSS 样式 对 表格 的 样式 进行 设置 。 下 面 将 介绍 几 个 典型 的 通过 CSS 样式 来 设置 表格 的 
例子 。 


图 实例 说 明 


在 浏览 网 页 时 ， 经 常会 看 到 网 页 中 的 表格 只 有 外 边框 ， 而 表格 内 容 没 有 边框 。 本 实例 将 通过 CSS 样式 来 实 
现 表格 只 有 外 边框 的 样式 ， 实 例 运行 效果 如 图 3.9 所 示 ， 整 个 网 页 是 用 表格 制作 的 ， 而 且 只 显示 表格 的 外 边框 。 


图 关键 技术 


实现 本 实例 主要 是 应 用 CSS 样式 的 边框 复合 属性 border，border 表示 表格 的 边框 属性 。 该 属性 在 实例 052 
中 已 经 介绍 ， 此 处 不 再 具体 讲解 。 


64 


第 3 章 HTML/CSS 技术 


Et 
/a ~ 
bE 


二 / 用 产 各 : 
E 二 届 
LE: 


和 (EM: rmrorat ) 
9 Ny Ts mos: 

点 "由 所 有 

wd be 


图 3.9 只 有 外 边框 的 表格 
图 设计 过 程 


(1) 新 建 index.htm 网 页 ， 在 页 面 的 <style> 标 签 中 编写 CSS 样式 ， 具 体 代码 如 下 : 
<style type="text/css "> 
‘tableBorder 
border: 1px solid #407D2A ; 


Er 
(2) 在 页 面 的 表格 <table> 标 签 中 ， 应 用 以 上 定义 的 CSS 样式 ， 具 体 代 码 如 下 : 
< 
i align="center "> 
<t> 
<td> 用 户 名 :</td> 
<td><input type="text” name="mame” /></td> 
<tr> 
<td> 密 码 : </td> 
<td><input type="password” name="pwd" /></td> 


<td> 确 认 密码 : </td><td><input type="password” name="pwd1" /></td> 
<td> 年 龄 :</td><td><input type="text” name="age” /></td> 


<td> 性 别 : </td> 
<td><input type="radio" name="sex” value="m"/> 男 <input type="radio" name="sex” value=/> 女 </td> 
</tr> 
<tr><td><input type="submit” value=" 池 胡 "/></td><td><input type="reset” value=" 丰 入 "></td></tr> 
</table> 
</body> 


国 秘笈 心 法 


除了 应 用 边框 复合 属性 border 以 外 ， 还 可 以 应 用 border-width 属性 、border-color 属性 以 及 border-style 属性 
来 设置 表格 的 边框 样式 。 


实例 061 砌 级 


实用 指数 : 去 相让 全 


图 实例 说 明 
在 制作 网 站 时 ， 为 了 使 网 站 中 显示 数据 的 表格 更 加 醒目 ， 可 以 将 表格 四 周 的 边框 设置 成 不 同 颜色 。 本 实例 
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通过 使 用 CSS 样式 来 设置 表格 的 外 边框 颜色 ， 实 例 运 行 效果 如 图 3.10 所 示 。 


二 iin 

力也 电话 市 贡 大 辕 。 | 站 5 更 合计 
| _zmerlo Ee 站 四 四 加 
EE Ee EE 加 四 四 
| sme Ee 本 四 四 全 
[or Er 加 加 加 加 


图 3.10 ”彩色 外 边框 的 表格 
图 关键 技术 


本 实例 主要 是 通过 CSS 的 边框 颜色 属性 设置 表格 四 周 的 边框 为 不 同 颜 色 而 实现 的 , 可 以 在 CSS 样式 中 使 用 
以 下 边框 的 颜色 属性 。 

口 ”border-left-color: 左边 框 颜色 。 

口 ”border-right-color: 右边 框 颜色 。 

口 ”border-top-color: 上 边框 颜色 。 

口 border-bottom-color: 下 边框 颜色 。 


图 设 计 过 程 


(1) 新 建 ndex.htm 网 页 ， 在 页 面 的 <style> 标 签 中 编写 表格 边框 的 CSS 样式 ， 具 体 代码 如 下 : 
<style type="text/css "> 
‘tablel { 
border-bottom-color:#00FFFF: 
border-left-color:#FFFFOO: 


} 
</style> 


(2) 在 页 面 的 表格 <table> 标 签 中 ， 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 


‘<table width="643” border="0" align="center” cellpadding="0" cellspacing="0" class="table1’> 
图 秘笈 心 法 

在 设置 表格 边框 颜色 时 ， 除 了 使 用 具体 的 RGB 颜色 值 以 外 ,还 可 以 使 用 英文 来 表示 某 个 颜色 值 。 如 红色 为 
red， 黄 色 为 yellow， 绿 色 为 green， 橘 红 为 orangered 等 。 


实例 062 


图 实例 说 明 
在 设计 制作 网 站 时 ， 为 了 达到 预期 效果 ， 有 时 会 在 表格 中 加 入 一 些 特效 。 
运行 本 实例 ， 如 图 3.11 所 示 ， 当 鼠标 经 过 某 个 单元 格 时 ， 此 单元 格 边框 变色 ; 
鼠标 移出 单元 格 时 ， 边 框 颜色 恢复 初始 状态 。 Ee 
图 关键 技术 图 3.11 单元 格 的 边框 变色 
实现 本 实例 ， 需 要 编写 两 个 鼠标 事件 的 方法 ， 分 别 是 onMouseOver (鼠标 经 过 事件 ) 的 方法 和 onMouseOut 
(鼠标 移出 事件 ) 的 方法 。 在 方法 中 ， 通 过 鼠标 事件 获得 某 个 单元 格 对 象 ， 然 后 通过 改变 其 style 属性 来 实现 改 
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变 边框 颜色 。 如 某 个 单元 格 的 id 属性 值 为 td1， 修 改 它 的 左边 框 颜色 的 代码 如 下 : 
document.getElementById("td1").style.borderLeftColor="0000FF": 
图 设计 过 程 
(1) 新 建 ndex.htm 网 页 ， 在 页 面 的 <scrip 亿 标签 中 编写 鼠标 经 过 事件 的 方法 ， 关 键 代码 如 下 : 
function over(id){ 
document getElementById(id).style borderLefiColor-"green': 
document.getElementById(id).style.borderRightColor="green"; 
document.getElementById(id) .style.borderTopColor="green"; 
document.getElementById(id).style.borderBottomColor="green"; 


(2) 编写 鼠标 移出 事件 的 方法 ， 关 键 代 码 如 下 : 


‘document.getElementById(id).style.borderLeftColor="pink"; 
document.! Emenee i one ne 


‘document.getElementById(id).style.! borderBottomColor="pink"; 


(3) 在 页 面 的 <td> 元 素 中 调用 以 上 两 个 方法 ， 关 键 代码 如 下 : 
<td width="60" id="Tid0" onmouseover="over(Ttd0)" onmouseout="out(Ttd0")">&nbsp;</td> 


图 秘笈 心 法 
根据 本 实例 ， 可 以 实现 表格 的 行 变色 。 主 要 是 在 表格 的 <tr> 标 签 中 使 用 onMouseOver 事件 以 及 onMouseOut 
事件 来 调用 JavaScript 方法 ， 然 后 在 该 方法 中 通过 表格 的 id 属性 获得 表格 的 行 对 象 ， 最 后 控制 行 对 象 的 属性 即 可 。 


实例 063 


图 实例 说 明 
有 些 网 站 为 了 更 多 地 吸引 浏览 者 注意 ， 会 在 网 站 中 加 入 具有 霓虹灯 特效 的 表格 。 本 实例 将 通过 调用 
JavaScript 方法 来 实现 表格 外 边框 的 霓虹灯 效果 。 本 实例 的 运行 效果 如 图 3.12 所 示 ， 表 格 的 外 边框 会 定时 变色 ， 


从 而 达到 霓虹灯 的 效果 。 
明日 科技 明日 科技 
机 虹 灯 效果 页 虹 灯 效果 


3.12 ”表格 的 外 边框 具有 霓虹灯 效果 


图 关键 技术 


要 实现 不 断 地 改变 表格 边框 颜色 ， 可 以 通过 JavaScript 中 提供 的 setTimeout0 方 法 ， 该 方法 会 按照 指定 的 参 
数 时 间 来 调用 自 定义 的 JavaScript 方法 ， 该 方法 的 语法 格式 如 下 : 

setTimeout(funtion.milliseconds) 

参数 说 明 

@ function: 要 调用 的 自 定义 函数 名 称 。 

@ milliseconds: 设置 超时 时 间 ， 以 毫秒 为 单位 。 
图 设计 过 程 

(1) 新 建 ndex.htm 网 页 ， 在 页 面 中 添加 一 个 表格 ， 关 键 代码 如 下 : 


<table id="table1" border=5> 
<tr> 
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<td align=center><strong> 明 日 科技 </strong></td> 
</t> 
<tr> 

<tdalign=cenier><pre> 霓 虹 灯 效果 </pre></td> 


</table> 
(2) 编写 JavaScript 方 法， 实现 表格 边框 变色 ， 关 键 代码 如 下 : 
‘<script language="javascript”> 
Var i=0; 
Var Color= new Array("#0000FF","#99FF00","#660033","#CC66CC","#FFFF33"):// 定 义 颜色 值 的 数组 
function changeO{ 
if (i>Color.length-1) i=0; // 如 果 i 的 值 大 于 数组 的 元 素数 ， 则 将 i 的 值 改 为 0 
tablel.style.borderColor=Color[i]: // 改 变 表格 边框 颜色 
计 =1 
setTimeout("change0".500); /每 隔 500 毫秒 调用 一 次 该 方法 
</script> 
(3) 在 页 面 加 载 时 ， 调 用 该 方法 实现 变色 ， 主 要 设置 页 面 的 onload 事件 ， 关 键 代码 如 下 : 
<body onload="change() > 
图 秘笈 心 法 


由 于 在 页 面 初始 化 时 会 自动 执行 <body> 标 签 中 的 内 容 , 因此 可 以 将 <scripf> 标 签 的 内 容 直 接 写 到 <body> 标 签 


体内 ， 这 样 也 可 以 实现 本 实例 的 效果 。 
实例 064 


图 实例 说 明 


本 实例 将 介绍 如 何 应 用 CSS 样式 实现 表格 外 边框 不 显示 。 运 行 本 实例 ， 在 页 面 中 将 看 到 两 个 表格 ， 其 中 一 


个 表格 显示 外 边框 ， 而 另 一 个 表格 不 显示 外 边框 ， 实 例 运行 效果 如 图 3.13 所 示 。 


商品 ID 商品 名 称 单位 单价 商品 ID 商品 名 称 规格 
oo 证 果 箱 30 oo01 芋 果 箱 
oo02 IJ 香烟 条 50 oaoe xx 香 网 条 
0003 六 方便 面 箱 20 0003 双方 便 面 箱 
EF] 表 2) 


图 3.13 控制 表格 指定 外 边框 不 显示 


图 关键 技术 


本 实例 主要 应 用 CSS 样式 的 边框 属性 中 的 border-width 来 实现 , border-width 表示 边框 的 粗细 , 单位 为 像素 ， 


当 此 属性 值 为 0 时 ， 表 示 不 显示 边框。 
图 设计 过 程 


(1) 新 建 index.htm 网 页 ， 在 该 网 页 的 <style> 标 签 中 编写 带 有 外 边框 表格 的 CSS 样式 ， 关 键 代码 如 下 : 


‘tablel{ 
border-left-style:solid; 
border-bottom-style:solid: 
border-right-style:solid; 
border-top-style:solid: 
border-width: 2px: 
border-color:green: 
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(2) 编写 不 带 边框 的 表格 样式 ， 并 设置 表格 的 背景 颜色 ， 关 键 代码 如 下 : 
ee 
background-color: pin 


» 
(3) 在 页 面 中 添加 两 个 表格 ， 分 别 使 用 不 同 的 CSS 样式 ， 关 键 代码 如 下 : 
<body> 
<table id="1b1" class="table1 ”> 
<tr height="30"> 
<td> 员 工 编号 </td><td> 员 工 姓名 </td><td> 员 工 性 别 </td><td> 员 工 年 龄 </td> 
<t> 
<tr> 
<td >001</td><td > 张 三 </td><td > 男 </td><td >35</td> 
tr> 
<tr> 
<td>002</td><td> 李 四 </td><td> 男 </td><td>28</td> 
<ltr> 
<tr> 
<td>003</td><td> 王 二 </td><td> 男 </td><td>27</td> 
</tr> 
</table> 
<table id="1b2" class="fable2"> 
<tr height="30"> 
<td> 员 工 编号 </td><td> 员 工 姓名 </td><td> 员 工 性 别 </td><td> 员 工 年 龄 </td> 
<ltr> 


<td >001</td><td > 张 三 </td><td> 男 </td><td >35</td> 
<t> 
<t> 
<td>002</td><td> 李 四 </td><td> 男 </td><td>28</td> 
tr> 
<t> 
<td>003</td><td> 王 二 </td><td> 男 </td><td>27</td> 
<tr> 
</table> 
</body> 


图 秘笈 心 法 
CSS 样式 中 的 边框 属性 不 是 表格 所 特有 的 ， 在 HTML 元 素 中 有 些 元 素 也 具有 边框 属性 ， 如 图 片 <img>、 文 
本 框 <input>、 文 本 域 <textarea> 等 。 因 此 在 设计 网 页 时 ， 可 以 通过 边框 属性 来 灵活 应 用 在 不 同 的 HTML 元 素 中 。 


站 初级 
实例 065 实用 指数 : 信 丰 让 从 
实例 说 明 


在 制作 网 站 时 ， 网 站 中 加 入 的 表格 可 以 制作 成 渐变 的 效果 。 本 实例 将 通 
过 CSS 样式 来 设置 表格 的 渐变 效果 ， 运 行 效果 如 图 3.14 所 示 。 


图 关键 技术 
本 实例 主要 应 用 CSS 样式 的 progid 滤 镜 实现 ， 其 语法 如 下 : 


filter:progid:dximage Tramsform. Microsoft.Gradient(enabled-bEnabled.startColorStr=colorStr.endColorStr-colorStr,) 

参数 说 明 

@ enabled: 设置 或 检索 滤 镜 是 否 激 活 。 默 认 值 为 tue， 为 false 时 表示 禁止 滤 镜 。 

@ startColorStr: 设置 或 检索 色彩 渐变 的 开始 颜色 和 透明 度 ， 默 认 值 为 #000000FF (不 透明 的 蓝 色 )。 
上 @ endColorStr: 设置 或 检索 色彩 渐变 的 结束 颜色 和 透明 度 ， 默 认 值 为 #000000FF (不 透明 的 黑色 )。 


图 3.14 背景 颜色 渐变 的 表格 
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图 设计 过 程 
(1) 新 建 ndex.htm 网 页 ， 在 该 网 页 中 添加 一 个 表格 ， 关 键 代码 如 下 : 


<table border="1~ 
<tr height="30> 
<td> 商 品 编号 </td><td> 商 品名 称 </td><td> 商 品类 别 </td><td> 商 品 价格 </td> 
</t> 
<tr> 
<td >001</td><td > 纯 牛奶 <td><td > 乳 制 品 </td><td >2.50 元 </td> 
<ltr> 
<tr> 
<td>002</td><td> 甜 可 </td><td> 水 果 </td><td>2.80 元 </td> 
<> 


<tr> 
<td>003</td><td> 冰 红茶 </td><td> 饮 料 <td><td>2.50 元 </td> 
<tr> 
</table> 
(2) 在 页 面 的 <style> 标 签 中 编写 CSS 样式 ， 使 表格 背景 渐变 ， 关 键 代 码 如 下 : 
<style type="text/css "> 
table{ 
font-size: 12px; 
border-width: 2px: 
filter:progid:dximageTransform.Microsoft.Gradient(fradientType=1, 
startColorStr=#46BEFF,endColorStr#FFFFFF); 
} 


td{ 
border-width:Opx: 
Se 
图 秘笈 心 法 
为 了 提高 开发 效率 ， 可 以 将 progid 滤 镜 的 样式 代码 保存 到 .css 样式 文件 中 ， 在 不 同 网 页 中 应 用 此 样式 时 直 
接 通过 <link> 标 签 引 用 CSS 文件 即 可 ， 并 不 需要 死记 硬 背 这 些 滤 镜 属性 。 


实例 066 


图 实例 说 明 
在 很 多 网 站 中 ， 表 格 的 隔行 变色 的 效果 应 用 得 非常 多 。 本 实例 
将 通过 CSS 样式 来 控制 表格 的 隔行 变色 ， 运 行 效果 如 图 3.15 所 示 。 | Bo de Es 
图 关键 技术 吧 re 和 
004 Javs 4 Bruce Eckel 106.00 元 
本 实例 主要 通过 在 CSS 样式 中 使 用 JavaScript 中 的 split0 方 法 来 
改变 表格 的 背景 颜色 backgound-color 属性 值 。split0 方 法 的 语法 图 3.15 隔行 变色 的 表格 
如 下 : 
stringOb.split(sti)[Index] 
参数 说 明 


@ stringObj: 要 被 分 解 的 String 对 象 或 文字 。 

@ str: 用 来 定义 以 什么 字符 分 解 。 

目 mdex: 表示 下 一 个 匹配 从 该 索引 处 开始 。 

功能 : split0 方 法 通过 字符 str 将 strObj 字符 串 分 隔 成 一 个 字符 串 数组 。 

在 实现 隔行 变色 的 样式 时 ， 还 需要 使 用 expression 将 CSS 属性 和 JavaScript 关联 起 来 ， 而 且 需 要 在 split0 
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方法 的 index 索引 中 使 用 表格 的 行 索引 对 象 owIndex。 
图 设计 过 程 


(1) 新 建 ndex.htm 网 页 ， 在 该 网 页 中 的 <style> 标 签 中 编写 隔行 变色 的 CSS 样式 ， 关 键 代 码 如 下 : 
<style type—"text/ess > 
changeTr tr{ 
font-size: 12px; 
border-width:Opx; 
background-color: expression("#DEF 1FE.#FFFFFF".split(",")[rowIndex962]): 
外 
td{f 
border-width:Opx; 


上 
<style> 
(2) 在 页 面 中 添加 表格 ， 并 将 表格 的 class 属性 值 设 置 为 CSS 样式 名 changeColor， 关 键 代码 如 下 : 


<table border="0"class="cjhanseT> 


图 秘笈 心 法 


JavaScript 中 的 split0 方 法 在 实际 开发 中 经 常 使 用 ， 如 从 一 个 日 期 格式 的 字符 串 (yyyy-mm-dd〉 中 获取 年 、 
月 、 日 的 值 时 ， 就 需要 使 用 到 该 方法 来 实现 。 


力 实例 说 明 


实例 将 通过 CSS 样式 来 设置 此 变色 效果 ， 运 行 效果 如 图 3.16 所 示 。 
图 关键 技术 


在 访问 网 站 时 , 有 些 显示 数据 的 表格 样式 会 有 隔 列 变色 的 效果 。 本 


通过 CSS 设置 表格 的 隔 列 变色 与 隔行 变色 类 似 ， 同 样 需 要 使 用 


JavaScript 的 split0 函 数 。 与 表格 隔行 变色 的 实现 不 同 的 是 ， 隔 列 变色 图 3.16 隔 列 变色 的 表格 
需要 在 CSS 样式 中 使 用 表格 的 单元 格 索引 对 象 cellindex， 然 后 通过 
split0 方 法 ， 实 现 每 隔 一 个 单元 格 ， 就 将 单元 格 背 景 颜色 改变 。 


国 设计 过 程 


(1) 新 建 index.htm 网 页 ， 在 该 网 页 中 的 <style> 标 签 中 编写 隔 列 变色 的 CSS 样式 ， 关 键 代 码 如 下 : 


让 expression("#DEF1FE.orange".split(".")[cellIndex%%2]): 


</style> 
(2) 在 网 页 中 添加 表格 ， 并 设置 表格 的 class 属性 值 为 CSS 样式 名 changeTd， 关 键 代码 如 下 : 


‘<table border="0" class="changeTd” > 


国 秘笈 心 法 


在 实际 应 用 中 ， 经 常 需要 在 JavaScript 中 应 用 表格 对 象 的 属性 来 动态 制作 表格 ， 如 表格 行 索引 rowIndex 和 
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单元 格 索 引 cellIndex。JavaScript 中 的 表格 对 象 具有 很 多 属性 和 方法 ， 这 些 属性 和 方法 会 在 后 面 的 章节 中 进行 详 
细 讲 解 。 


实例 068 显示 提示 信息 
实例 说 明 
在 浏览 网 站 信息 时 ， 当 鼠标 经 过 表格 的 某 个 单元 格 时 ， 会 显示 二 二 汪汪 
出 相关 的 提示 信息 。 运 行 本 实例 ， 当 鼠标 经 过 表格 中 的 菜 个 “图 书 | 机 
名 称 ” 时 ， 将 显示 提示 信息 ， 运 行 效果 如 图 3.17 所 示 。 ee 这 
关键 技术 004 《Java 态 程 思想 第 4 版 Bruce Eckel 106. 00 元 | 


图 3.17 显示 提示 信息 的 表格 
实现 本 实例 非常 简单 ， 主 要 通过 设置 表格 <td> 中 的 title 属性 来 
实现 ，title 属性 不 是 表格 特有 的 属性 ，HTML 中 的 绝 大 多 数 标签 都 具有 该 属性 。 
图 设计 过 程 
新 建 index.htm 网 页 , 在 该 网 页 中 添加 一 个 表格 ， 并 在 “图 书 名 称 ” 的 单元 格 中 设置 title 属性 ， 关键 代码 如 下 : 
<table border="0" class="changeTd"> 
<tr height="30"> 
<td align="center”" > 图书 编号 </td><td align="center ~ 图 书 名 称 </td> 
<td align="center"> 作 者 </td><td align="center"> 图 书 价格 </td> 
< 
<td >001</td> 
<td title=" 单 击 了 解 本 书 的 详细 信息 "> 
<a href="#">《JavaWeb 范例 大 全 》</a> 


</td> 
<td > 明日 科技 </td><td >98.00 元 </td> 
<t> 
<t> 
<td>002</td> 
<td tide=" 单 击 了 解 本 书 的 详细 信息 "> 
<a hre 仁 叶 ">《Struts2 深入 详解 》</a> 
<ltd> 
<td> 孙 意 </td><td>79.00 元 </td> 
<ltr> 
<tr> 
<td>003</td><td>《Tomcat 与 JavaWeb 技术 详解 》</td><td> 孙 卫 琴 </td><td>79.50 元 </td> 
<ltr> 
<tr> 
<td>004</td><td>《Java 编程 思想 》 第 4 版 </td><td>Bmace Eckel</td><td>108.00 元 </td> 
<ltr> 
‘</table> 


图 秘笈 心 法 
根据 本 实例 的 实现 ， 读 者 可 以 设置 当 鼠 标 经 过 图 片 时 ， 显 示 图 片 的 详细 信息 。 在 网 页 中 添加 图 片 使 用 的 是 
<img> 标 签 ， 只 要 设置 相应 <img> 标 签 的 title 属性 即 可 。 


33 和 鼠标 样式 


在 设计 网 页 时 ， 为 了 使 网 页 看 上 去 更 加 美观 ， 并 且 能 够 吸引 浏览 者 ， 通 常会 设计 鼠标 指针 的 特效 ， 针 对 不 
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同 的 操作 ， 可 以 显示 不 同样 式 的 鼠标 指针 形状 。 下 面 将 通过 几 个 例子 来 介绍 如 何 改变 鼠标 的 样式 。 


实例 069 | 
实用 指数 : 让 去 丰 页 


图 实例 说 明 
运行 本 实例 ， 如 图 3.18 所 示 ， 当 鼠标 指针 经 过 按钮 、 表 格 以 及 超 链接 时 ， 鼠 标 指针 会 变 为 不 同 的 形状 ， 当 


移出 时 会 恢复 初始 状态 。 


手 各 年 疮 职务 

EE 和 je 几 章 

RTT 公 司 压 先生 Bl 科 长 
一 明日 斗 t 
囊 小 姐 pz 主任 2 


3.18 ”显示 自 定义 的 鼠标 形状 
图 关键 技术 


本 实例 主要 通过 在 CSS 样式 中 ， 设 置 cursor 的 属性 值 来 实现 不 同 的 鼠标 指针 形状 ，cursor 属性 有 多 种 属性 
值 ， 每 个 值 都 代表 一 个 不 同形 状 的 鼠标 形状 ， 有 具体 的 属性 及 说 明 如 表 3.7 所 示 。 


表 3.7 cursor 属性 及 说 明 


cursor 属性 说 明 
hand 手 形 指针 
crosshair 交叉 十 字形 指针 
text 文本 选择 符号 
wait 沙漏 形状 的 等 待 指针 
default 默认 形状 的 指针 
help 带 问 号 形状 的 指针 
move 移动 的 箭头 
e-resize 向 右 的 箭头 一 
ne-resize 向 右上 的 箭头 了 
n-resize 向 上 的 箭头 
nw-resize 向 左上 的 箭头 尽 
Ww-resize 向 左 的 箭头 一 
SW-Iesize 向 左下 的 箭头 
s-resize 向 下 的 箭头 | 
se-resize 向 右 下 的 箭头 六 
图 设计 过 程 
(1) 新 建 ndex.htm 网 页 ， 在 该 页 的 <style> 标 签 中 分 别 编写 表格 、 超 链接 、 单 元 格 以 及 按钮 的 CSS 样式 ， 
关键 代码 如 下 : 
<style type—"text/ess'> 
table{ 
font-size: 12px: 


v3 
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font-size:12px; 
cursor:hand; 
} 
</style> 
(2) 在 页 面 中 添加 表格 、 超 链接 和 按钮 等 ， 关 键 代码 如 下 : 
<body> 
<table border="0"> 
<tr height="30"> 
<td align="center" > 图 书 编号 </td><td align="center~ 图 书 名 称 </td> 
<td align="center"> 作 者 </td><td align="center"> 图 书 价格 </td> 
<t> 
<t> 
<td >001</td> 
<td> 


<a href="#">《JavaWeb 范例 大 全 》</a> 


</td> 
<td > 明日 科技 </td><td >98.00 元 </td> 
<t> 
<tr> 
<td>002</td> 
<td><a href="#"> 《Struts2 深入 详解 》</a></td> 
<td> 孙 狗 </td><td>79.00 元 </td> 
</t> 
</table> 
<input type="button” value=" 存 交 " class="bin"/> 
</body> 


图 秘笈 心 法 
鼠标 指针 cursor 属性 经 常 被 用 在 按钮 和 图 片上 , 当 鼠 标 指针 经 过 按钮 时 , 通常 会 设置 cursor 属性 值 为 hand， 
将 指针 形状 变 成 手 形 ， 这 样 更 符合 实际 需求 。 相 对 1 cursor 属性 的 其 他 属性 值 并 不 常用 。 


实例 070 


图 实例 说 明 

在 浏览 一 些 个 性 网 站 时 ， 如 博客 、QQ 空间 ， 其 网 站 中 的 光标 常常 采用 动画 光标 ， 这 样 可 以 突出 网 站 的 个 
性 风格 。 本 实例 将 介绍 如 何在 网 页 中 加 入 动画 光标 ， 运 行 本 实例 ， 当 鼠标 在 页 面 工作 区 内 时 ， 将 光标 改变 成 指 
定 的 动画 效果 。 
图 关键 技术 

本 实例 主要 通过 在 CSS 样式 中 设置 cursor 的 url 属性 来 实现 ，ual 表示 一 个 动态 光标 的 文件 路 径 ， 一 般 动态 
光标 是 一 个 .ani 文件 。 
图 设计 过 程 


新 建 ndexhtm 网 页 ， 在 该 页 的 <style> 标 签 内 编写 动态 光标 的 CSS 样式 ， 关 键 代 码 如 下 : 
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<style type="text/ess "> 
body{ 

eursorurl(g ani: 
} 
</style> 


图 秘笈 心 法 


目前 ， 有 很 多 种 制作 动画 光标 的 工具 ， 这 些 工 具 在 网 站 上 都 可 以 找到 ， 使 用 这 些 工 具 可 以 制作 出 自己 喜爱 
的 各 种 样式 的 光标 。 


3.4 文字 及 列表 样式 


在 制作 网 页 时 ， 经 常 需要 将 网 页 中 的 文字 以 及 列表 设置 成 不 同 的 样式 。 下 面 将 通过 几 个 例子 来 介绍 如 何 使 
用 CSS 样式 设置 文字 和 列表 的 样式 。 


实例 说 明 


在 浏览 一 些 网 上 商店 时 ， 商 品 列表 中 的 有 些 商 品 是 显示 有 折扣 的 ， 一 般 会 显示 商品 原价 和 打折 之 后 的 价格 ， 
显示 原价 的 文字 会 带 有 删除 线 ， 本 实例 的 运行 效果 如 图 3.19 所 示 。 


关键 技术 


Kstruts2 守 入 昌 5 
文字 加 删除 线 ， 主 要 使 用 的 是 CSS 样式 中 的 text-decoration 属 Nn ee oR 
性 。 该 属性 有 5 个 可 选 值 ， 即 underline (文字 加 下 划 线 )、overline 3.19 带 删 除 线 的 商品 价格 
(文字 加 上 划 线 )、line-through (文字 加 删除 线 )、blink〈 闪 烁 文字 ， 
只 有 Netscape 浏览 器 支持 ) 和 none (默认 值 )。 


图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 在 该 页 面 的 <style> 标 签 中 编写 页 面 的 CSS 样式 ， 关 键 代 码 如 下 : 


<style type="text/css > 
font{ 


font-size:12px: 
color: red: 
text-decoration: line-through:; 


</style> 
(2) 在 页 面 中 ， 将 商品 原价 文字 写 在 <font> 标 签 之 间 ， 关 键 代 码 如 下 : 
<td> 


<font>98.00 元 </font> 
<td> 


图 秘笈 心 法 


text-decoration 属性 的 line-through (文字 加 删除 线 ) 属性 值 经 常 应 用 在 显示 商品 价格 的 文字 上 ， 所 以 有 必要 
记 住 这 个 属性 的 用 法 。 
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实例 072 


图 实例 说 明 

在 浏览 一 些 信息 网 站 时 ， 网 站 中 发 表 的 一 些 具有 专业 技术 的 文章 可 
能 会 有 很 多 词汇 不 容易 理解 ， 这 就 需要 对 这 些 词 汇 进行 解释 ， 而 为 了 更 
直观 地 了 解 词 汇 的 含义 ， 可 以 在 文字 上 方 添加 标记 说 明 。 本 实例 将 介绍 an 榴 员 刘 oder 训 至 
如 何在 文字 的 上 方 加 入 标注 说 明 ， 运 行 效果 如 图 3.20 所 示 。 finte th plsa gainin yoor wt 


图 关键 技术 Practies makes perfect 
实现 在 文字 上 方 添加 标注 说 明 ， 主 要 是 在 页 面 中 使 用 <rt> 和 <ruby> 
标签 ，<rt> 标 签 包含 在 <ruby> 标 签 内 ， 然 后 将 文字 写 在 <rt> 标 签 内 ， 此 时 图 3.20 在 文字 上 方 添加 标记 说 明 
< 人 标签 内 的 文字 会 显示 在 正常 文字 的 上 方 ， 使 用 方法 如 下 : 
正常 显示 的 文字 


<rt> 文 字 上 方 的 说 明 标记 <rt> 
<mby> 


图 设计 过 程 


新 建 index.htm 页 面 ， 在 该 页 面 的 <body> 标 签 中 添加 文字 的 标记 说 明 标 签 ， 关 键 代码 如 下 : 


Silence is gold. 

<rt><font> 沉 默 是 金 </font></rt><br> 
/mby> 

study sth. in order to apply it. 

<rt><font> 学 以 致 用 </font></rt><br> 


a fall into the pit,a gain in your wit. 
<rt><fon 忆 吃 一 者 ， 长 一 智 <font><rt><br> 


Practies makes perfect. 
<rt><font> 熟 能 生 巧 </font></rt> 
/mby> 


国 秘笈 心 法 


< 和 <ruby> 标 签 在 实际 应 用 中 并 不 常见 ， 所 以 了 解 一 下 它们 的 用 处 即 可 。 


实例 073 


图 实例 说 明 
在 浏览 网 站 阅读 一 些 文章 时 ， 通 常会 见 到 在 首 行文 字 上 有 一 些 特殊 的 样式 。 本 实例 将 通过 CSS 样式 来 改变 
首 行文 字 的 样式 ， 运 行 效果 如 图 3.21 所 示 。 
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络 向 服务 器 请 求 对 数据 库 、 电 子 表 桔 或 文 礼 等 信息 的 烛 理 工作 。 由 此 可 见 ， 应 用 程序 的 功能 
越 复杂 ， 窒 户 端 程序 也 就 想 庶 大 ,这 也 疝 软件 的 维护 工作 带 来 了 很 大 的 国难 。 而 B/S 结构 的 客 
户 油 把 事务 处 理 脖 往 部 分 交 给 了 服务 器 ， 由 甩 务 器 进行 隶 理 ， 客 户 尘 ! 行 显 示 , 这 
样 ， 将 使 应 用 程序 服务 器 的 运行 数据 负 入 入 重 , 一旦 发 生 服务 器 “击溃 ”等 忆 题 ， 后 果 趟 堪 
设想 。 因此 , 许多 单位 都 备 有 数据 库存 信服 务 器 , 以 防 万 一 - 


图 3.21 改变 首 行文 字 的 样式 


图 关键 技术 
本 实例 通过 在 CSS 样式 中 设置 段落 <p> 标 签 首 行 对 象 first-line 的 属性 来 改变 首 行文 字 的 样式 。 frstline 表示 


段落 的 首 行 ， 其 CSS 样式 的 语法 格式 如 下 : 
pifirst-line{ font-size: 12px; background :pink; color-#FFFFFF:;...}; 


图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 在 <style> 标 签 中 编写 <p> 标 签 的 CSS 样式 ， 关 键 代码 如 下 : 


<style> 
P{ 
line-height: 1.6; 
font-size: 14px; 
font-family: 做 区 鲍 逢 : 


DR 
Color:#FFFFFF: 
background:#FF6600; 
font-size: 16px; 
font-family: 做 区 疗 准 ; 
we 
(2) 在 页 面 中 添加 段落 <p> 标 签 ， 并 添加 一 段 文 字 内 容 ， 关 键 代码 如 下 : 
<b 
ns align="center”"> 
<t> 
<td> 


此 处 添加 文字 内 容 
<td> 
</tr> 


</table> 
<body> 


国 秘笈 心 法 
在 CSS 样式 中 ， 除 了 first-line 属性 ， 段 落 标签 <p> 还 包括 first-letter 属性 ， 表 示 段 落 的 首 个 文字 的 属性 。 
初级 
实用 指数 : 伍 食 广 食 


实例 074 


图 实例 说 明 
在 浏览 网 站 信息 时 ， 为 了 更 突出 显示 一 些 重要 信息 ， 经 常会 在 这 些 重要 信息 的 文字 处 加 上 下 划 线 。 本 实例 
将 通过 CSS 样式 来 设置 文字 的 下 划 线 效果 ， 实 例 运行 效果 如 图 3.22 所 示 。 


图 关键 技术 


本 实例 主要 通过 设置 CSS 样式 的 text-decoration 属性 来 实现 ， 该 属性 包含 5 个 可 选 值 ， 即 underline (文字 
加 下 划 线 )、overline (文字 加 上 划 线 )、line-through (文字 加 删除 线 )、blink〔〈 闪 烁 文字 ， 只 有 Netscape 浏览 器 


Wi 
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支持 ) 和 none (默认 值 )。 


CJS 的 客户 绒 不 仅 负 玉 与 用 户 的 交互 ， 笋 入 月 户 信 息 ， 而 县 还 需要 : 人 


这 也 痊 软 件 的 维护 工作 珊 杂 了 很 大 的 丽 难 。 'S 结 构 
的 客户 诺 想 记 务 处 理 刘 部 分 立 络 了 服务 器 。 由 服务 加 进行 处 理 ， 客户 端 只 顷 要 进行 显示 。 


这 样 。 将 使 应 用 相 序 服务 器 的 运行 数 氟 关 有 较 重 ,一旦 才 生 服务 器 “出 汪 ”等 问题 后果 不 
堪 设 想 ， 因 此 ， 许 多 单位 部 各 有 其 提 库 存 信服 务 器 ， 以 防 万 一 


图 3.22 文字 带 下 划 线 的 样式 
图 设计 过 程 


(1) 新 建 index.htm 页 面 ， 在 <style> 标 签 中 编写 下 划 线 文字 的 CSS 样式 ， 关 键 代码 如 下 : 
<style> 
font{ 


line-height: 1.6: 
font-size: 14px; 
font-family: 做 区 鲍 拓 : 


. 
</style> 
(2) 在 页 面 中 添加 <font> 标 签 ， 在 该 标签 内 输入 测试 的 文字 内 容 ， 关 键 代 码 如 下 : 


<font> 
由 此 可 见 ， 应 用 程序 的 功能 越 复杂 ， 客 户 端 程序 也 就 越 庞大 
</font> 


图 秘笈 心 法 


text-decoration 属性 的 underline〈 文 字 加 下 划 线 ) 属性 值 ， 经 常 应 用 在 一 些 网 站 的 文章 中 的 某 一 段 重 要 文字 
或 某 句 话 上 ， 所 以 有 必要 记 住 这 个 属性 的 用 法 。 


初级 


实例 075 


实用 指数 : 雪灾 让 太 ， 


图 实例 说 明 
在 默认 情况 下 ,列表 标记 只 能 是 符号 , 为 了 使 页 面 更 加 美观 , 可 以 使 用 CSS SP 内 对 包括: 
样式 将 列表 标记 设置 成 图 标 ， 运 行 效果 如 图 3.23 所 示 。 yy 


图 关键 技术 


在 网 页 中 的 列表 项 以 <ul> 标 签 表 示 ， 所 以 可 以 在 CSS 样式 中 通过 设置 <ul> 
的 属性 来 实现 列表 的 样式 本 实例 通过 在 CSS 中 设置 列表 的 list-style-image 属性 
来 改变 列表 的 标记 为 图 标 ， 语 法 格式 如 下 : 

ul {list-style-image: url(ico.giD): ..} 

其 中 url 中 的 内 容 是 图 标 文件 的 路 径 。 


图 设计 过 程 
(1) 新 建 ndex htm 页 面 ， 在 <style> 标 签 中 编写 列表 的 CSS 样式 ， 关 键 代码 如 下 : 


<style> 
body{ 


3.23 ” 带 有 图 标的 列表 项 
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font-size:12px: 


list-style-image: uri(star.gi]): 


</style> 
(2) 在 页 面 中 添加 列表 标签 <ul>， 关 键 代码 如 下 : 


<ul> 

<li>request 请 求 对 象 </li> 
<li>response: 响应 对 象 </li> 
<li>session: 会 话 对 象 </li> 
<li>application: 应 用 程序 对 象 <li> 
<li>out: 输出 对 象 </li> 
<li>..</> 

<al> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 在 电子 商城 中 的 商品 类 别 列表 中 加 入 图 标 。 


3.5 文字 特效 


在 浏览 网 页 时 ， 经 常会 看 到 一 些 显示 特效 的 文字 ， 这 些 特效 文字 多 数 都 是 利用 CSS 样式 来 实现 的 。 下 面 将 
通过 几 个 例子 来 介绍 如 何 使 用 CSS 样式 来 设置 文字 的 特效 。 


图 实例 说 明 
在 设计 网 站 时 , 为 了 体现 网 站 的 个 性 ,可 以 设计 网 站 导航 或 其 他 内 容 的 文字 


发 光 效果 。 本 实例 将 通过 CSS 样式 来 设置 文字 的 发 光 特效 ， 运 行 结果 如 图 3.24 明日 笛 技 和 纶 坛 


所 示 。 
3.24 文字 的 发 光 效 果 


图 关键 技术 


本 实例 主要 通过 CSS 样式 的 glow 滤 镜 属性 实现 ， 其 语法 格式 如 下 : 
{filter: glow(color=color_value.Strength=value)} 
参数 说 明 
@ color: 表示 边缘 光 晕 的 颜色 。 
@ Strength: 表示 边缘 光 晕 的 强度 大 小 ， 范 围 在 1 一 255 之 间 。 
图 设计 过 程 
(1) 新 建 ndex.htm 页 面 ， 编 写 文字 发 光 效 果 的 CSS 样式 ， 关 键 代码 如 下 : 
font-size:40px; 
filter:glow(color=skyblue.direction=2): 
font-family: 允 艾 店 父 
Se 
(2) 在 页 面 中 添加 表格 ， 并 使 用 以 上 定义 的 CSS 样式 ， 关 键 代 码 如 下 : 
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</table> 


图 秘笈 心 法 


为 了 提高 开发 效率 ， 可 以 将 glow 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 需要 加 入 特效 的 文字 中 ， 直 接 通 
过 <link> 标 签 引用 CSS 文字 滤 镜 样式 文件 即 可 ， 避 免 每 次 都 编写 该 文字 特效 的 代码 。 


07 | 人 测 


图 实例 说 明 


在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 内 容 的 文字 阴影 效果 。 本 实例 将 通过 CSS 样式 来 设置 
文字 的 阴影 效果 ， 运 行 结果 如 图 3.25 所 示 。 


邓 且 科技 队 坛 


图 3.25 文字 的 阴影 效果 


图 关键 技术 

本 实例 主要 通过 CSS 样式 的 dropshadow 滤 镜 属性 实现 ， 其 滤 镜 语法 格式 如 下 : 

{filter: dropshadow(color=color_value,offx=value,offy=value,positive=value)} 

参数 说 明 

@ color: 阴影 的 颜色 。 

@ offx: x 轴 方 向 阴影 的 偏 移 量 。 

@ offy: y 轴 方 向 阴影 的 偏 移 量 。 

@ positive: 取 值 为 true 或 false，true 表示 为 不 透明 像素 建立 可 见 的 阴影 ，false 表示 为 透明 像素 建立 可 见 
的 阴影 。 


图 设计 过 程 


(1) 新 建 index.htm 页 面 ， 编 写 文字 阴影 效果 的 CSS 样式 ， 关 键 代码 如 下 : 


font-size:40px 
filter:dropshadow(color=green.offx=3.0ffy=3); 
font-family: 从 区 瑞 其 

} 

</style> 


(2) 在 页 面 中 添加 表格 ， 并 使 用 以 上 定义 的 CSS 样式 ， 关 键 代 码 如 下 : 
<table class="tp > 
<t> 
明日 科技 论坛 


<tr> 
</table> 


图 秘笈 心 法 
在 下 10 及 以 上 版 本 中 ， 如 果 要 实现 文字 的 阴影 效果 ， 可 以 使 用 CSS 3 提供 的 text-shadow 属性 来 实现 。 
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实例 078 


力 实例 说 明 
在 设计 网 站 时 , 为 了 体现 网 站 的 个 性 , 可 以 设计 网 站 内 容 的 文字 渐变 阴影 


效果 。 本 实例 将 通过 CSS 样式 来 设置 文字 的 渐变 阴影 效果 , 运行 结果 如 图 3.26 明 日 科技 论坛 


所 示 。 
图 关键 技术 图 3.26 文字 的 渐变 阴影 效果 
本 实例 主要 通过 CSS 样式 的 shadow 滤 镜 属性 实现 ， 其 语法 格式 如 下 : 


{filter: shadow(color=color_value,direction=value)} 
参数 说 明 
@ color: 阴影 的 颜色 。 
@ direction: 设 定 渐变 阴影 的 方向 ,渐变 阴影 是 按 顺 时 针 方向 进行 的 ，0” 表 示 垂直 向 上 ， 然 后 每 5” 为 一 
个 单位 ， 默 认 值 为 270”。 
图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 编 写 文字 渐变 阴影 效果 的 CSS 样式 ， 关 键 代 码 如 下 : 
font-size:40px: 
filter:shadow(color=skyblue, direction=135); 
font-family: 帮 伏 
ee 
(2) 在 页 面 中 添加 表格 并 应 用 以 上 定义 的 CSS 样式 ， 关 键 代 码 如 下 : 


<table class="tb"> 


明日 科技 论坛 


图 秘笈 心 法 
为 了 提高 开发 效率 ， 可 以 将 shadow 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 需要 加 入 特效 的 文字 中 ， 直 接 
通过 <link> 标 签 引用 CSS 文字 滤 镜 样式 文件 即 可 ， 避 免 每 次 都 编写 该 文字 特效 的 代码 。 


图 实例 说 明 
在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 Logo 文字 的 图 案 填 5 
充 效果 .本 实例 将 通过 CSS 样式 来 设置 文字 的 图 案 填充 效果 , 运行 结果 如 图 3.27 明日 科技 论坛 
所 示 。 
图 3.27 文字 的 图 案 填 充 效 果 
图 关键 技术 


本 实例 主要 通过 CSS 样式 的 dropshadow 滤 镜 和 chroma 滤 镜 实现 。 dropshadow 滤 镜 的 用 法 请 参考 实例 077， 
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chroma 滤 镜 的 语法 格式 如 下 : 


{filter: chroma(color=color_value)} 
参数 说 明 
color: 透明 的 颜色 ， 如 color 的 值 为 定 FCC00， 则 滤 镜 作用 范围 内 的 所 有 为 丁 FCC00 的 颜色 都 变 为 透明 ， 
包括 图 片 的 像素 。 
图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 在 页 面 中 添加 <div> 标 签 ， 并 设置 <div> 的 背景 图 片 ， 关 键 代码 如 下 : 
<div style="background-image:url(bg.gif);width:100%;"> 
(2) 在 步骤 (1) 添加 的 <div> 标 签 中 ， 再 添加 一 个 <div> 标 签 ， 然 后 添加 文字 ， 并 设置 div 中 的 文字 滤 镜 样 
式 ， 关 键 代 码 如 下 : 
<div style="FILTER: chroma( color=#CCCCCC) dropShadow(Color=#777777,0ffX—-1,0ffY=-1,positive=2); 
color: #CCCCCC: background-color: #FFFFFF;width: 100%; font: bold 50pt 黑体 ; "> 
明日 科技 论坛 
<div> 


国 秘笈 心 法 


在 应 用 chroma 滤 镜 实现 文字 的 填充 效果 时 ， 经 常 需要 再 应 用 dropshadow 滤 镜 为 文字 设置 阴影 效果 ， 这 样 
可 以 让 文字 的 填充 效果 更 加 清晰 、 美 观 。 


高 级 | 
实用 指数 : 友 让 让 让 


实例 080 


图 实例 说 明 


在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 Logo 文字 的 探照灯 效果 。 本 实例 将 通过 CSS 样式 
来 设置 文字 的 探照灯 效果 。 当 鼠标 在 文字 上 移动 时 ， 文 字 上 方 会 有 类 似 于 灯光 


的 照明 效果 ， 运 行 结果 如 图 3.28 所 示 。 明日 全 坛 
关键 技术 图 3.28 文字 的 探照灯 效果 
本 实例 主要 通过 CSS 样式 的 light 滤 镜 实现 ， 其 语法 格式 如 下 : 
{filter: light} 
在 JavaScript 中 ， 可 以 使 用 document 对 象 来 获得 元 素 的 light 滤 镜 对 象 ， 然 后 通过 调用 light 滤 镜 对 象 中 的 


方法 来 实现 文字 的 发 光 效果 ，light 滤 镜 中 包含 的 方法 及 说 明 如 表 3.8 所 示 。 
表 3.8 light 滤 镜 的 方法 及 说 明 


方 ” 法 
addAmbientO 
addConet 


说 明 
加 入 包围 的 光源 
加 入 锥 形 光 源 


addPoint() 加 入 点 光源 
changcolor() 改变 光 的 颜色 
changstrength() 改变 光源 的 强度 
clear() 清除 所 有 光源 


moveLightl 移动 光源 
在 JavaScript 方法 中 ， 调 用 addAmbient0 方 法 的 语法 如 下 : 
document.all.Obj .filters.light.addAmbient(R.GB.strength) 


其 中 Obj 表示 HTML 标签 的 id 属性 值 。 参数 RR、G、B 表示 红 、 绿 、 蓝 的 颜色 分 量 ，strength 表示 光 投 射 的 
数量 。 
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调用 addCone0 方 法 的 语法 如 下 : 

document.all.Obj filters.light.addCone(x1.y1.21.x2.y2.22.R.GB.strength.spread) 

参数 x1、y1、zl 表示 光源 的 位 置 ，x2、y2、z2 表示 目标 点 的 位 置 ， R、G、B 表示 红 、 绿 、 蓝 的 颜色 分 量 ， 
strength 表示 光 投 射 的 数量 ，spread 表示 光源 的 范围 。 

调用 moveLight0 方 法 的 语法 如 下 : 

document.all.Obj filter light.moveLight(lightNumber.x.y.zf£Absolute) 

参数 lightNumber 表示 光源 的 数字 , x、y、z 表示 光源 的 三 维 坐 标 , fAbsolute 表示 移动 是 相对 的 还 是 绝对 的 。 


图 设计 过 程 
(1) 新 建 index.htm 页面 ， 编 写 <div> 标 签 的 CSS 样式 ， 关 键 代码 如 下 : 


Se 
(2) 在 页 面 中 添加 一 个 <div> 标 签 ， 并 且 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 
<div id="div1" class="mydiv "> 
明日 科技 论坛 
<ldiv> 
(3) 在 JavaScript 中 ， 调 用 light 滤 镜 对 象 的 方法 ， 设 置 光源 ， 关 键 代 码 如 下 : 
<script type="text/javascript"> 
/t+ 初始 化 方法 */ 
function initO{ 
document.all.div1 filters.light.addAmbient(10,10.40,30); 
document.all.div1 .filters.light.addCone(400,400,120,160,100,255,255.80,120,5); 


所 鼠标 经 过 时 调用 的 方法 */ 
function moveO{ 
‘document.all.div1 filters.light.moveLight(1,window.event.x-20,window.event.y.0.1); 
ee 
(4) 在 页 面 的 onload 事件 中 调用 init0 方 法 ，onMousemove 事件 中 调用 move0 方 法 ， 关 键 代 码 如 下 : 


<body onload="init/)" onmousemove="move0"> 


国 秘笈 心 法 


本 实例 中 应 用 的 light 滤 镜 的 方法 在 实际 应 用 中 并 不 常见 , 因此 只 要 了 解 一 下 该 滤 镜 的 用 法 即 可 , 无 须 死记 硬 背 。 


高 级 | 
实用 指数 : 信 让 让 页 ， 


实例 081 


国 实例 说 明 


本 实例 将 通过 CSS 样式 来 设置 文字 的 闪烁 效果 。 当 页 面 加载 后 ， 文 字 开 
台 闪 烁 ， 当 鼠标 移动 到 文字 上 时 ， 文 字 停止 闪烁 ， 鼠 标 移 出 文字 时 ， 文 字 继 
续 闪 烁 ， 运 行 结果 如 图 3.29 所 示 。 
个 图 3.29 文字 的 闪烁 效果 
图 关键 技术 
本 实例 主要 通过 CSS 样式 的 glow 滤 镜 实现 ，glow 滤 镜 的 用 法 请 参考 实例 076。 实 现 文字 的 闪烁 效果 主要 
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是 使 用 JavaScript 函数 来 控制 glow 滤 镜 的 enabled 属性 ，enabled 属性 表示 glow 滤 镜 是 否 被 禁用 ， 当 enabled 的 
属性 值 为 tue 时 则 激活 glow 滤 镜 ， 否 则 禁用 glow 滤 镜 。 
图 设计 过 程 
(1) 新 建 ndex.htm 页 面 ， 编 写 文字 发 光 的 CSS 样式 和 层 的 相对 位 置 样式 ， 关 键 代 码 如 下 : 

<style type="text/css "> 

ee width:296px: height:42px: z-index:1: 

filter:glow(color=#FF0000.strengh=2) 

了 


‘inside { 
position:relative;top:10px:; 
} 
</style> 
(2) 在 页 面 中 添加 层 并 且 在 层 中 添加 文字 ， 关 键 代码 如 下 : 
<div id="div] " align="center" class="glow] ” onmouseover="stopflash(this)" onmouseout="initO"> 
<div class="inside"> 文 字 的 闪烁 效果 </div> 


<div> 


BE ) 编写 实现 文字 闪烁 效果 的 JavaScript 方法 ， 关 键 代码 如 下 : 
pt language="javascript”> 
/ 珊 面 加 吉庆 汉 用 的 沪 湛 et 
function initO{ 
makeflash(div1); 


} 

/4*# 光 学 开 始 闪 烁 
*@param obj:div 标签 对 象 
jt 


function makeflash(obj){ 
/每 隔 一 秒 ， 禁 用 glow 滤 镜 一 次 ，1000 表示 1000 毫秒 ， 即 1 秒 
obj.flashTimer=setInterval("div1.filters.glow.enabled= !div1 filters.glow.enabled",1000); 


和 光量 停办 WA 
function stopflash(obj){ 
clearInterval(obj.flashTimer) 
en 
国 秘笈 心 法 
本 实例 应 用 到 了 JavaScript 中 window 对 象 的 setmterval0 方 法 ， 该 方法 会 根据 指定 的 时 间 间 隔 来 执行 JavaScript 
代码 ， 该 方法 的 语法 结构 如 下 : 


var timer = setInterval(func,timeValue); 
参数 func 表示 将 要 执行 的 JavaScript 代码 或 JavaScript 自 定义 的 方法 ，timeValue 表示 时 间 间 隔 ， 以 毫秒 为 
单位 。 
实用 指数 : 走廊 让 页 
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图 实例 说 明 

在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 内 容 文字 的 空心 效果 。 
本 实例 将 通过 CSS 样式 来 设置 文字 的 空心 效果 ， 运 行 效果 如 图 3.30 所 示 。 明 目镜 技 沦 坛 
| | 关键 技术 3.30 文字 的 空心 效果 


本 实例 主要 通过 CSS 样式 的 glow 滤 镜 .mask 滤 镜 和 chroma 滤 镜 实现 glow 
和 chroma 滤 镜 的 用 法 在 前 面 实例 中 已 经 介绍 过 ，mask 滤 镜 的 语法 如 下 : 


84 
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{flter: mask(color— color_value)} 
参数 说 明 

@ mask: 主要 用 于 文字 遮 音 。 
@ color: 表示 遮 音 所 用 的 颜色 。 


图 设计 过 程 


(1) 新 建 index.htm 页 面 ， 编 写 文 字 空 心 效 果 的 CSS 样式 ， 关 键 代 码 如 下 : 
<style type="text/ess > 
tb1{ 
font-size: 40px; 
font-family: 带 驮 
FILTER: glow(strength=1)mask(color=blue)chroma(color=blue) 
} 
</style> 
(2) 在 页 面 中 添加 表格 ， 并 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 
<table align="center” height="60" border="0" class="tb1"”> 
> 
9 height="60" align="center"> 明 日 科技 论坛 </td> 


<tr> 
</table> 


图 秘笈 心 法 
为 了 提高 开发 效率 ， 可 以 将 空心 效果 的 文字 样式 代码 写 到 .css 样式 文件 中 ， 在 需要 加 入 特效 的 文字 中 ， 直 
接 通 过 <link> 标 签 引用 CSS 文字 滤 镜 样式 文件 即 可 ， 避 免 每 次 都 编写 该 文字 特效 代码 。 
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图 实例 说 明 

在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 导航 文字 的 浮雕 效果 。 
本 实例 将 通过 CSS 样式 来 设置 文字 的 浮雕 效果 ， 运 行 效果 如 图 3.31 所 示 。 明 日 科技 论坛 
图 关键 技术 图 3.31 文字 的 浮雕 效果 


本 实例 主要 通过 CSS 样式 的 mask 滤 镜 、shadow 滤 镜 、dropshadow 滤 镜 和 
chroma 滤 镜 实现 。 首 先 使 用 mask 滤 镜 将 可 见 像 素 庶 项， 将 看 不 见 的 像素 以 指定 颜色 显示 ， 然 后 使 用 shadow 滤 
镜 使 文字 具有 渐变 阴影 效果 ， 之 后 用 dropshadow 滤 镜 使 文字 具有 阴影 效果 ， 最 后 使 用 chroma 滤 镜 将 指定 的 颜 
色 进 行 透 明 处 理 。 


图 设计 过 程 


(1) 新 建 ndex.htm 页 面 ， 编 写 文字 浮雕 效果 的 CSS 样式 ， 关 键 代码 如 下 : 

<style type="text/css "> 
‘tbl { 
font-size:60px: 
font-family: 趴 基 
FILTER: mask(color=#EEEEEE) 

shadow(color=#66AAFF.direction=135) 

(color=#6655FF.offx—-3,0ffy—3.positive=2) 
chroma(color=#EEEEEE) 


</style> 


Java Web 开发 实例 大 全 (基础 卷 ) 
(2) 在 页 面 中 添加 表格 ， 并 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 


<table align="center” height="60" class="tb1" border="0"> 
<b> 
<td height="”60" align="center"> 明 日 科技 论坛 </td> 
<a> 
‘</table> 


图 秘笈 心 法 
正 10 已 经 完成 采用 HIML 5 标准 了 , 它 已 经 放弃 了 其 特有 的 Filters( 滤 镜 ) 和 VML 了 , 取而代之 的 是 CSS 3 
和 SVG。 对 于 这 两 项 内 容 希望 大 家 能 够 自学 一 下 , 然后 逐渐 使 用 新 的 技术 来 取代 之 前 经 常 应 用 的 Filters 和 VML。 
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图 实例 说 明 
在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 内 容 文字 的 阳 文 效果 。 
本 实例 将 通过 CSS 样式 的 多 种 滤 镜 属性 来 实现 ， 运 行 结果 如 图 3.32 所 示 。 


图 关键 技术 图 3.32 文字 的 阳 文 效果 


本 实例 主要 通过 CSS 样式 的 mask 滤 镜 、dropshadow 滤 镜 和 chroma 滤 镜 实 
现 。 这 些 滤 镜 的 用 法 在 前 面 已 经 介绍 过 ， 在 此 不 再 于 述 。 


图 设计 过 程 


(1) 新 建 index.htm 页 面 ， 编 写 文字 阳 文 效果 的 CSS 样式 ， 关 键 代码 如 下 : 
<style type="text/css "> 
‘tbl { 
font-size: 50px: 
font-family: 潍 戎 
FILTER: mask(color=white) 
dropshadow(color=royalblue.offx=-3,0ffy=-3.positive=1) 
chroma(color=white) 


} 
</style> 

(2) 在 页 面 中 添加 表格 ， 并 应 用 CSS 样式 ， 关 键 代码 如 下 : 
<table align="center” height="60" class="tb1" border="0"> 

<b> 

<td height="60" align="center"> 明 日 科技 </td> 

<t> 

</table> 


国 秘笈 心 法 


对 于 本 实例 实现 的 这 个 文字 的 阳 文 效果 ， 在 Firefox 或 者 Chrome 浏览 器 中 ， 可 以 通过 CSS 3 中 的 为 文字 指 


定 多 个 阴影 的 text-shadow 属性 来 实现 ， 关 键 代码 如 下 : 
<style type="text/css"> 
div{ 
text-shadow:1px 1px royalblue. 
2px 2px royalblue、 
3px 3px royalblue: 
color: white: 
font-size:50px: 
font-family: 隶 书 ; 


</style> 
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xm | 


图 实例 说 明 
在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 导航 文字 的 雪 雕 效果 。 
本 实例 将 通过 CSS 样式 的 滤 镜 属性 来 设置 文字 的 雪 雕 效果 ， 运 行 结果 如 图 333 只 妃 参 巷 
| 3.33 文字 的 雪 膨 效果 
图 关键 技术 


本 实例 主要 通过 CSS 样式 的 glow 滤 镜 和 dropshadow 滤 镜 实现 。 先 用 glow 滤 镜 使 文字 发 光 ， 然 后 使 用 
dropshadow 滤 镜 使 文字 具有 阴影 效果 ， 再 将 这 两 个 滤 镜 效果 进行 重 又 即 可 。 


图 设计 过 程 


(1) 新 建 index.htm 页 面 ， 编 写 文字 雪 雕 效果 的 CSS 样式 ， 关 键 代码 如 下 : 


font-style: italic; 

font-family: 退 厅 : 

filter: glow(color=#FFFFFF,strength=12) 
dropshadow(color=#86BFFF,offx=3,0ffy=3,positive=1); 

} 


‘</style> 
(2) 在 页 面 中 添加 表格 ， 并 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 
<table align="center” width="200" height="70" class="tb1" border="0"> 
人 height="60" align="center"> 明 日 科技 </td> 
< 
</table> 


图 秘笈 心 法 
通过 将 glow 滤 镜 和 dropshadow 滤 镜 效果 进行 重重 ， 便 可 实现 文字 的 雪 周 效果。 为 了 达到 更 好 的 美化 效果 ， 
可 以 将 这 样 的 字体 样式 设置 为 网 站 的 字体 样式 。 


图 实例 说 明 

在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 内 容 文字 的 火焰 效果 。 本 实例 将 通过 CSS 样式 的 滤 镜 
属性 来 设置 文字 的 火焰 效果 ， 运 行 结果 如 图 3.34 所 示 。 
图 关键 技术 E22 

本 实例 主要 通过 CSS 样式 的 glow 滤 镜 、blur 滤 镜 和 wave 滤 镜 实现 。 3.34 文字 的 火焰 效果 


(1) blur 滤 镜 用 于 设置 文字 的 模糊 效果 ， 语 法 格式 如 下 : 
{filter : blur(add = value,direction=value.strength=value)} 
参数 说 明 
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@ add: 用 来 指定 图 片 是 否 被 改变 成 模糊 效果 ， 取 值 为 tue 或 false。 

@ direction: 用 于 设置 模糊 的 方向 ， 模 糊 效果 是 按 顺 时 针 方向 进行 的 ，0” 表 示 垂 直 向 上 ， 然 后 每 43” 为 一 
个 单位 ， 默 认 值 为 270”。 

@ strength: 表示 有 多 少 像素 的 宽度 将 受到 模糊 影响 ， 默 认为 5 个 像素 。 

(2) wave 滤 镜 用 于 使 文字 出 现 波浪 变形 的 效果 ， 语 法 格式 如 下 : 

{flter : wave(add = value freq-valuelightstrength=value phase—value,strength=value)} 

参数 说 明 

@ add: 是 否 将 元 素 按照 波形 样式 打 乱 。 

@ freq: 波纹 的 频率 ， 即 指定 在 一 个 元 素 上 需要 产生 多 少 个 完整 的 波纹 。 

上 lightStrength: 增强 波纹 的 光影 效果 ， 取 值 范围 在 0 一 100 之 间 。 

@ phase: 设置 正弦 波 的 偏 移 量 。 

@ strength: 设置 振幅 大 小 。 


图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 编 写 文字 火焰 效果 的 CSS 样式 ， 关 键 代码 如 下 : 


ee 


) 
Blur(Add=true,Direction=0,Strength=10) 
Wave(Add=add,Freq=3,LightStrength=10,Phase=5,Strength=5) 
</style> 
(2) 在 页 面 中 添加 表格 ， 并 应 用 文字 火焰 效果 的 CSS 样式 ， 关 键 代码 如 下 : 

<table align="center” height="100" class="tb1" border="0"> 

<tr> 

<td height="100" align="center"> 明 日 科技 </td> 

<tr> 

</table> 


图 秘笈 心 法 

在 CSS 3 中 ,实现 blur 滤 镜 的 模糊 效果 可 以 通过 filter:blur 属性 为 实现 ， 不 过 对 于 该 属性 ，IE 10 还 不 支持 ， 
但 是 Firefox、Chrome 和 Opera 浏览 器 已 经 支持 了 , 只 是 在 使 用 时 , 需要 添加 相应 的 前 缀 , Firefox 需要 添加 -moz-、 
Chrome 需要 添加 -webkit、Opera 需要 添加 前 绥 -o-。 
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图 实例 说 明 
在 设计 网 站 时 ， 为 了 体现 网 站 的 个 性 ， 可 以 设计 网 站 内 容 文字 的 扭曲 动画 


效果 。 本 实例 将 通过 CSS 样式 的 滤 镜 属性 来 设置 文字 的 扭曲 动画 效果 ， 运 行 结 铝 吕 我 撤 
果 如 图 3.35 所 示 。 
| | 关键 技术 3.35 文字 的 扭曲 动画 
本 实例 主要 通过 使 用 CSS 样式 的 wave 滤 镜 和 JavaScript 的 setTimeoutO 函 数 实现 。 
图 设计 过 程 
(1) 新 建 ndex.htm 页 面 ， 编 写 文字 扭曲 效果 的 CSS 样式 ， 关 键 代码 如 下 : 
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es 
</style> 
(2) 在 页 面 中 添加 层 ， 并 应 用 以 上 定义 的 CSS 样式 ， 关 键 代 码 如 下 : 
<div id="div1"class="mydiv 吃 明日 科技 <Jdiv> 
(3) 在 JavaScript 方法 中 ， 使 用 setTimeout0 函 数 间隔 指定 的 时 间 来 修改 wave 滤 镜 的 phase 属性 值 (正弦 
波 的 偏 移 量 )， 实 现 文 字 的 扭曲 动画 ， 关 键 代码 如 下 : 
ee 
var p=2: 


function sportO{ 
div1 filters.wave.phase=p; 


PPp+2; 
setTimeout("sportO",20); 
crip 


(4) 在 页 面 加 载 时 调用 JavaScript 方法 ， 实 现 文字 的 扭曲 ， 关 键 代 码 如 下 : 
<body onload="sport) > 


图 秘笈 心 法 


使 用 CSS 样式 中 的 wave 滤 镜 还 可 以 实现 图 片 的 水 波纹 效果 ， 有 兴趣 的 读者 可 以 自己 试 试 ， 也 可 以 参照 实 
例 092 来 完成 。 
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图 实例 说 明 


本 实例 是 将 一 组 带 阴影 的 文字 在 页 面 中 一 个 一 个 地 显示 出 来 ， 并 将 该 组 文字 以 不 同 
的 语句 在 窗 体 上 循环 显示 ， 运 行 结果 如 图 3.36 所 示 。 明日 科技 


图 关键 技术 


本 实例 主要 是 用 <span > 标记 中 的 style 样式 的 clip 属性 的 rect0 方 法 来 实现 字符 串 的 
输出 效果 ， 下 面 对 rect0 方 法 进行 详细 说 明 。 

rect0 方 法 的 语法 格式 如 下 : 

clip : auto | rect( number number number number ) 

参数 说 明 

@ auto: 对 象 无 剪 切 。 

@ rect(number number number number): 依据 上 - 右 -下 - 左 的 顺序 提供 指定 对 象 左上 角 为 (0,0) 坐标 的 4 个 偏 
移 数值 ， 其 中 任 一 数值 都 可 用 auto 替换 ， 即 此 边 不 剪 切 。 

功能 : 检索 或 设置 对 象 的 可 视 区 域 。 区 域外 的 部 分 是 透明 的 ， 必 须 将 position 的 值 设 为 absolute， 此 属性 方 
可 使 用 。 


图 设计 过 程 
(1) 在 页 面 中 添加 两 个 层 ，shadow 层 用 于 显示 实体 的 文字 ，showstr 层 用 于 显示 文字 的 阴影 ， 代 码 如 下 : 


<div id="shadow" style="position:absolute:visibility:visible:top:12px: left:12px"></div> 
<div id="showstr" style="position:absolute:visibility:visible:top:10px: left:10px"></div> 


图 3.36 输出 文字 


Java Web 开发 实例 大 全 (基础 卷 ) 


(2) 编辑 用 于 实现 输出 文字 的 JavaScript 代码 。 


用 一 维 数组 来 保存 要 进行 输出 的 字符 串 ， 代 码 如 下 : 
<script language="JavaScript"> 
var space=0 
Var word=0 
var Tstr= new Array0 
Tstr[0]=" 明 日 科技 " 
Tstr[1]=" 欢 迎 购 买 明日 科技 图 书 " 
Tstr[2]=" 明 日 科技 网 址 : www.mingrisoft.com" 
i 
自 定 义 函 数 exportstr0， 以 输出 的 方式 循环 显示 Tstr 数组 中 的 字符 串 ， 代 码 如 下 : 
<script language="JavaScript"> 
function exportstrO { 
if (space <= document.body.clientWidth){ 
showstrinnerHTML="<span style='position:absolute:font-family: 宋 体 ; 
font-size:30pt:color:3399FF; clip:rect(2px "+space+"px 200px Opx)>"+Tstr[word]+"</span>" 
shadow.innerHTML="<span style='position:absolute;font-family: 宋 体 ; 
font-size:30pt:color:888888; clip:rect(2px "+space+"px 200px Opx)>"+Tstr[word]+"</span>" 
Space=space+30 
vartimer=setTimeout("exportstr0".30) 


else { 

document.close0 

clearTimeout(timer) 

Word+ 十 

space=0 

if (word >= Tstrlength) {word=0} 

Var intermezzo=setTimeout("exportstr0",100) 
} 
} 


exportstrO: 
</script> 
图 秘笈 心 法 


setTimeoutO 函 数 的 作用 是 在 指定 的 时 间 过 后 ， 调 用 JavaScript 代码 或 自 定义 的 函数 ， 并 且 只 被 调用 一 次 。 
如 果 希 望 一 直 调 用 某 个 JavaScript 方法 ， 需 要 将 setTimeout(O) 函 数 写 在 被 调用 的 JavaScript 方法 体内 。 


3.6 图 片 滤 镜 特效 


在 设计 网 页 时 ， 经 常 需要 在 网 页 中 添加 图 片 ， 而 且 会 对 图 片 进行 特效 处 理 ， 这 样 会 使 整个 网 页 看 起 来 更 加 
美观 。 本 节 将 通过 几 个 实例 讲解 如 何 利用 CSS 样式 中 的 滤 镜 属性 来 处 理 图 片 的 特效 。 


实例 089 高 级 


实用 指数 : 让 相让 丰 


图 实例 说 明 
在 设计 网 站 时 ， 为 了 美化 网 站 ， 可 以 把 网 站 中 添加 的 图 片 制作 成 半 透明 效果 。 本 实例 将 通过 CSS 样式 来 设 
置 图 片 的 半 透 明 效果 ， 运 行 结果 如 图 3.37 所 示 。 


3.37 图片 的 半 透明 效果 
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图 关键 技术 
本 实例 主要 通过 CSS 样式 的 alpha 滤 镜 属性 实现 ， 该 滤 镜 用 于 设置 图 片 的 透明 度 ， 其 语法 格式 如 下 : 


{filter: glow(opacity= value.finishOpacity=value,style=value.startX=value.startY=value.finishX=value.finishY=value)} 

参数 说 明 

@ opacity: 表示 图 片 的 透明 程度 。 取 值 范围 在 0 一 100 之 间 ，0 表示 完全 透明 ，100 表示 完全 不 透明 。 
@ finishOpacity: 设置 渐变 的 透明 效果 时 ， 用 该 参数 指定 结束 时 的 透明 度 ， 取 值 范围 在 0 一 100 之 间 。 
@ style: 指定 透明 区 域 的 形状 特征 ，0 统 一 形状 )、1 (线形 )、2 放 射 状 )、3 (长 方形 )。 

@ startX: 渐变 透明 效果 开始 的 x 坐标 。 

@ startY: 渐变 透明 效果 开始 的 y 坐标 。 

@ finishX: 渐变 透明 效果 结束 的 x 坐标 。 

@ finishY: 渐变 透明 效果 结束 的 y 坐标 。 


图 设计 过 程 


(1) 新 建 index.htm 页 面 ， 编 写 图 片 透明 效果 的 CSS 样式 ， 关 键 代 码 如 下 : 
<style type="text/css "> 
:tran: 


} 
</style> 
(2) 在 页 面 中 添加 表格 ， 在 表格 中 添加 两 个 用 于 显示 图 片 的 <img> 标 签 ， 其 中 一 个 <img> 标 签 使 用 以 上 定 
义 的 CSS 样式 ， 关 键 代 码 如 下 : 
<table border="0" cellpadding="0" cellspacing="0"> 
BE <td><img sre="img1,jpg" width="378" height="275"></td> 


sparency { 
filter:Alpha(Opacity=10,finishOpacity=80,style=3.startX=20,startY=20,finishX=100,finishY=100) 


<td>&nbsp;</td> 
<td><img sre="img]1,jpe” width="378" height="275" border="0" class="transparency"></td> 
</tr> 
</table> 


图 秘笈 心 法 


为 了 提高 开发 效率 ， 可 以 将 alpha 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 图 片 需要 加 入 特效 时 ， 直 接 通过 
<link> 标 签 引用 CSS 样式 文件 即 可 ， 避 免 每 次 都 编写 图 片 滤 镜 的 特效 代码 。 


实例 090 


图 实例 说 明 
在 设计 网 站 时 ， 为 了 美化 网 站 ， 有 时 需要 把 网 站 中 添加 的 图 片 制作 成 模糊 效果 。 本 实例 将 通过 CSS 样式 来 
设置 图 片 的 模糊 效果 ， 运 行 效果 如 图 3.38 所 示 。 


3.38 图片 的 模糊 效果 
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图 关键 技术 
本 实例 主要 应 用 CSS 样式 的 blur 滤 镜 属性 实现 ，blur 滤 镜 的 用 法 请 参考 实例 086。 
图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 编 写 图 片 模糊 效果 的 CSS 样式 ， 关 键 代码 如 下 : 


‘blurStyle { 
filter:blur(add=true,direction=270,strength=20) 
} 


</style> 

(2) 在 页 面 中 添加 <img> 标 签 ， 并 使 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 
<table> 
3 <td><img src="img1.jpg”" width="400" height="300"></td> 


<td>&nbsp: 
<td><img class="blurStyle” sre="img1,jpe” width="400" height="300"></td> 
ie 
图 秘笈 心 法 
为 了 提高 开发 效率 ， 可 以 将 blur 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 图 片 需要 加 入 特效 时 ， 直 接 通过 
<link> 标 签 引 用 CSS 样式 文件 即 可 ， 避 免 每 次 都 编写 图 片 滤 镜 的 特效 代码 。 


力 实例 说 明 


在 设计 网 站 时 , 为 了 美化 网 站 , 有 时 需要 把 网 站 中 添加 的 图 片 制作 成 渐 隐 渐 现 效果 。 本 实例 将 通过 JavaScript 
方法 以 及 CSS 样式 使 图 片 具有 渐 隐 渐 现 的 动态 效果 ， 运 行 效果 如 图 3.39 所 示 。 


图 3.39 图 片 的 渐 隐 渐 现 效果 


图 关键 技术 

实现 本 实例 ， 首 先 需 要 通过 CSS 样式 的 alpha 滤 镜 对 图 片 设置 一 个 初始 状态 的 透明 度 ， 然 后 在 JavaScript 
方法 中 通过 setTimeoutO 函 数 间隔 指定 时 间 来 修改 图 片 对 象 的 滤 镜 属性 中 的 透明 度 属 性 值 ， 这 样 便 实 现 了 图 片 的 
渐 隐 渐 现 效果 。 
国 设计 过 程 

(1) 新 建 index.htm 页 面 ， 编 写 图 片 透明 度 效果 的 CSS 样式 ， 关 键 代码 如 下 : 
<style type="text/css > 
E re 


3 
</style> 
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(2) 在 页 面 中 添加 用 于 显示 图 片 的 <img> 标 签 ， 设置 <img> 标 签 的 id 属性 值 ， 并 应 用 以 上 定义 的 CSS 样 
式 ， 关 键 代码 如 下 : 
<img src="img1 .jpg” id="myimg" width="378” height="275”" border="0" class="transparency”> 
(3) 编写 JavaScript 方 法 ， 实 现 图 片 的 渐 隐 渐 现 效 果 ， 关 键 代码 如 下 : 
ee 
function initO{ 
document.all.myimg filters.alpha.opacity=i; /给 图 片 对 象 滤 镜 中 的 透明 度 属性 赋值 
计 =5; 
if(i=—=100){ // 当 表示 透明 度 的 二 100 时 ， 重 新 指定 i=5 
i=5; 
了 
setTimeout("initO",100); // 每 隔 100 毫秒 ， 调 用 一 次 init0 方 法 改变 图 片 透明 度 
二 
(4) 在 页 面 加 载 时 ， 调 用 JavaScript 方法 初始 化 图 片 的 透明 度 ， 关 键 代 码 如 下 : 
<body onload="init/) ”> 


图 秘笈 心 法 

本 实例 应 用 到 了 setTimeout0 函 数 , 该 函数 的 用 法 与 setInterval0 函 数 比较 类 似 , 它们 都 可 以 在 指定 的 时 间 内 
调用 JavaScript 代码 或 JavaScript 自 定义 方法 。 不 过 这 两 个 函数 是 有 区 别 的 ， 使 用 setTimeout0 函 数 时 ， 只 会 执 
行 一 次 所 调用 的 JavaScript 代码 ， 如 果 想 循环 执行 JavaScript 代码 ， 必 须 将 setTimeout0 函 数 写 在 被 调用 的 
JavaScript 自 定义 函数 体内 。 但 是 setInterval0 函 数 则 不 同 ， 通 过 它 会 一 直 循 环 执行 JavaScript 代码 ， 并 不 需要 将 
setInterval0 函 数 写 在 JavaScript 方法 体内 。 


实例 092 


图 实例 说 明 
在 设计 网 站 时 , 为 了 美化 网 站 , 有 时 需要 把 网 站 中 添加 的 图 片 制作 成 水 波 
纹 效果 。 本 实例 将 通过 CSS 样式 来 实现 图 片 的 水 波纹 效果 , 运行 效果 如 图 3.40 
所 示 。 
图 关键 技术 
本 实例 主要 通过 CSS 样式 的 wave 滤 镜 实现 , wave 滤 镜 的 用 法 在 实例 086 
中 已 经 介绍 过 ， 在 此 不 再 灼 述 。 


| | 设计 过 程 图 3.40 图 片 的 水 波纹 效果 


(1) 新 建 ndex.htm 页 面 ， 编 写 图 片 水 波纹 效果 的 CSS 样式 ， 关 键 代 码 如 下 : 
<style type="text/css > 
‘Tipple 
i Te strength=3. phase=7. lightstrength=35, add-0. enabled=1): 
</style> 
(2) 在 页 面 中 添加 用 于 显示 图 片 的 <img> 标 签 ， 并 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 
<img class="7ripple” stre="f.JPG” width="400" height="300"> 
图 秘笈 心 法 
为 了 提高 开发 效率 ， 可 以 将 wave 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 图 片 需要 加 入 特效 时 ， 直 接 通过 
<link> 标 签 引用 CSS 样式 文件 即 可 ， 避 免 每 次 都 编写 图 片 滤 镜 的 特效 代码 。 
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力 实例 说 明 
在 设计 网 站 时 ， 为 了 美化 网 站 ， 有 时 需要 把 网 站 中 添加 的 图 片 制作 成 灰 度 效 果 。 本 实例 将 通过 CSS 样式 来 
设置 图 片 的 灰 度 效果 ， 运 行 效果 如 图 3.41 所 示 。 


图 3.41 图 片 的 灰 度 效果 


图 关键 技术 
本 实例 主要 通过 CSS 样式 的 gray 滤 镜 实现 ， 其 语法 格式 如 下 : 


{filter: gray} 
图 设计 过 程 
(1) 新 建 ndex.htm 页 面 ， 编 写 图 片 灰 度 效果 的 CSS 样式 ， 关 键 代码 如 下 : 


(2) 在 页 面 中 添加 一 个 <img> 标 签 ， 并 且 应 用 以 上 定义 的 CSS 样式 ， 关 键 代码 如 下 : 


<img class="old" strc="f.JPG" width="400" height="300"> 
图 秘笈 心 法 


为 了 提高 开发 效率 ， 可 以 将 gray 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 图 片 需要 加 入 特效 时 ， 直 接 通过 
<link> 标 签 引用 CSS 样式 文件 即 可 ， 避 免 每 次 都 编写 图 片 滤 镜 的 特效 代码 。 


实例 094 


图 实例 说 明 

本 实例 将 通过 CSS 样式 以 及 JavaScript 方法 来 实现 图 片 的 动态 文字 的 效果 。 当 鼠标 经 过 图 片 时 ， 会 显示 图 

片 的 说 明文 字 ， 并 且 将 图 片 设置 为 半 透明 效果 ， 运 行 效 果 如 图 3.42 所 示 。 
TR 


区 是 一 个 


3.42 ”图 片 的 动态 说 明文 字 效 果 
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图 关键 技术 


本 实例 的 实现 应 用 了 多 种 CSS 样式 ， 首 先 定义 一 个 不 透明 的 和 一 个 透明 度 为 50% 的 alpha 滤 镜 样式 ， 然 后 
定义 图 片 说 明文 字 显示 和 隐藏 以 及 说 明文 字 位 置 的 样式 ,最 后 通过 鼠标 事件 调用 JavaScript 方法 来 动态 改变 CSS 
样式 。 

图 设计 过 程 
(1) 新 建 index.htm 页 面 ， 编 写 图 片 透明 度 以 及 图 片 说 明文 字 的 CSS 样式 ， 关 键 代 码 如 下 : 
<style type="text/css "> 

stylel { 


position: absolte; 
display: none; 


‘Style2 { 
position:relative:; 
position: absolute; 
display:block: 


} 
.Style3{ 
filter:alpha(opacity=50,finishOpacity=20,style=3,startX=10,startY=5,finishX=90 ,finishY=20); 


} 
,Style4{ 
filter:alpha(opacity=100,finishOpacity=100,style=3,startX=10,startY=5,finishX=90 ,finishY=20); 


} 
</style> 
(2) 编写 鼠标 经 过 事件 所 调用 的 JavaScript 方法 ， 关 键 代 码 如 下 : 
‘<script type="text/javascript"> 
function overO{ 
‘document.all.textl.className="style2"; 
document.all.myimg.className="style3"; 
}function outO{ 
document.all.textl.className="stylel"; 
document.all.myimg.className="style4"; 
8 
</script> 
(3) 在 页 面 中 添加 <img> 标 签 和 用 于 显示 说 明文 字 的 <span> 标 签 ， 并 设置 <img> 标 签 的 onMouseover (鼠标 


经 过 事件 ) 属性 和 onMouseout (鼠标 移出 事件 ) 属性 ， 关 键 代码 如 下 : 

<span id="text1" class="stylel1’> 

<font color="green > 这 是 一 个 风景 图 片 </font> 

</span> 

<img class="style4" strc="f jpg" id="myimg”" width="200” height="]50" border="0" onmouseover="over()" onmouseout="outO"> 
国 秘笈 心 法 

为 了 提高 开发 效率 ， 可 以 将 图 片 滤 镜 的 样式 代码 写 到 .css 样式 文件 中 ， 在 图 片 需要 加 入 特效 时 ， 直 接 通过 
<link> 标 签 引用 CSS 样式 文件 即 可 ， 避 免 每 次 都 编写 图 片 滤 镜 的 特效 代码 。 
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4.1 JSP 的 基本 应 用 


JSP 是 Java Server Page 的 缩写 ， 它 是 Servlet 的 扩展 ， 是 一 种 基于 文本 的 程序 ， 在 Java Web 应 用 开发 时 是 
必 不 可 少 的 。JSP 的 特点 是 HTML 代码 与 Java 程序 共同 存在 ， 在 接收 到 用 户 请 求 时 ， 服 务 器 会 处 理 Java 代码 片 
段 ， 然 后 生成 处 理 结果 的 HTML 页 再 返回 给 客户 端 ， 客 户 端的 浏览 器 将 呈现 最 终 页 面 效 果 。 


实例 095 
实用 指数 : 食 


图 实例 说 明 

像 Java 程序 一 样 ，JSP 在 运行 时 也 有 可 能 抛 出 异常 ， 因 此 为 了 使 界面 更 加 友好 ， 需 要 自 定义 错误 页 面 ， 应 
用 JSP 指令 ， 当 在 JSP 中 抛 出 异常 时 ， 自 动 导 向 错误 页 面 。 本 实例 将 介绍 如 何 应 用 JSP 自 定义 错误 页 面 ， 实 例 
运行 结果 如 图 4.1 所 示 。 
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图 4.1 自 定义 错误 页 面 


图 关键 技术 
本 实例 主要 使 用 JSP 中 的 page 指令 的 errorPage 属性 自 定 义 错误 页 面 ， 代 码 如 下 : 


<“%@ page errorPage="errorjsp" %> 
其 中 errorjsp 是 一 个 专门 负责 处 理 异 常 的 网 页 。 
图 设计 过 程 
(1) 创建 errorjsp 页 面 ， 在 page 指令 中 配置 errorPage 属性 ，errorPage 属性 值 就 是 当 发 生 异 常 时 跳 转 的 
页 面 ， 关 键 代 码 如 下 : 
<%@ page language="java" import= "Java.utilL#"pageEncoding="UTF-8"96 errorPage="errorjsp 96> 
(2) 在 errorjsp 中 ， 通 过 如 下 语句 将 该 网 页 声明 为 异常 处 理 网 页 。 
<96 page isErrorPage="tmue"96> 
秘笈 心 法 
也 可 以 应 用 web.xml 文 件 中 的 errorpage 参 数 定义 错误 页 面 , 应 用 该 参数 配置 的 错误 页 面 将 对 所 有 页 面 有 效 ， 
也 就 是 说 ， 无 论 是 在 哪个 页 面 中 出 现 了 异常 ， 都 会 被 导向 error-page 参数 所 设置 的 错误 页 面 ， 代 码 如 下 : 
ne 


<location>/error.jsp</location> 
</error-page> 
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实例 096 : 
实用 指数 : 依依 : 


国 实例 说 明 

在 浏览 网 站 时 ， 通 常 在 网 页 底 端 会 标明 网 站 的 版 权 所 有 信息 ， 而 且 网 站 中 每 个 网 页 都 包含 相同 内 容 的 版 权 
信息 。 在 应 用 JSP 技术 开发 网 站 时 ， 也 需要 为 网 站 添加 版 权 信 息 。 本 实例 将 介绍 如 何 应 用 JSP 指令 包含 指定 的 
版 权 信息 ， 运 行 结 果 如 图 4.2 所 示 。 
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图 4.2 在 网 站 的 底 端 包含 的 版 权 信 息 


图 关键 技术 


在 JSP 中 可 以 应 用 <jsp:include> 标 签 包含 其 他 文件 的 内 容 ， 被 包含 的 文件 可 以 是 JSP 文件 或 HTML 文件 ， 
<jsp:include> 标 签 的 语法 如 下 : 
<jsp:include page=" 被 包含 组 件 的 绝对 URL 或 相对 URL"> 


图 设计 过 程 
(1) 创建 一 个 包含 版 权 信息 的 页 面 footjsp， 关 键 代码 如 下 : 
ody> 


< 
<table border="0" align="center”> 
<tr> 
<td align="center ~ 编程 词典 销售 服务 热线 ，400-675-1000 网 址 :www.mingrisoft.com</td> 
</t> 
<t> 
<td align="center">Copyright@www.mingrisoft.com All Rights Reserved!</td> 
</t> 


</body> 
(2) 创建 网 站 的 主页 面 mdexjsp， 在 该 页 中 应 用 <jsp:include> 标 签 将 版 权 信息 页 footjsp 包含 进来 ， 关 键 代 
码 如 下 : 
<body> 
<table> 
ee 此 处 省 略 了 其 他 标签 的 代码 
<t> 


<td colspan="3"> 
<jsp:include page="footjsp"></jsp:include> 
<htd> 
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</tr> 
</table> 
<body> 


国 秘笈 心 法 


在 开发 网 站 时 ， 如 果 多 数 网 页 都 包含 相同 的 内 容 ， 可 以 把 这 部 分 内 容 单独 放 到 一 个 文件 中 ， 其 他 的 JSP 文 
件 通过 include 标签 即 可 将 这 个 文件 包含 进来 。 这 样 做 可 以 提高 代码 的 可 重用 性 ， 避 免 重 复 代 码 ， 从 而 提高 开发 
网 站 的 效率 。 


实例 097 
实用 指数 : 食 食 


图 实例 说 明 
在 实际 的 项 目 开发 过 程 中 ， 经 常 需要 通过 JSP 页 面 动 态 显示 数据 库 中 的 数据 ， 如 在 根据 条 件 进行 查询 时 ， 
需要 将 查询 结果 显示 在 JSP 页 面 中 ， 此 时 需要 应 用 表格 来 显示 查 


询 结果 ， 由 于 查询 结果 是 动态 的 ， 数 据 行 数 并 不 固定 ， 因 此 在 显 Es NE 
示 查 询 结果 数据 时 ， 要 根据 数据 的 行 数 来 确定 表格 的 行 数 。 本 实 Ye 


1 |Java¥W 发 实战 宝典 
2 |jsp 凋 日 开发 全 程 实录 


图 4.3 应 用 Java 程序 片段 动态 生成 表格 


例 将 介绍 如 何 应 用 Java 程序 片段 (Scriptlet 动态 生成 表格 ， 运 行 
结果 如 图 43 所 示 ， 表 格 中 的 后 3 行 是 动态 生成 的 。 
图 关键 技术 


在 JSP 文件 中 ， 可 以 在 “<%” 和 “%>” 标 记 中 直接 嵌入 任何 有 效 的 Java 程序 代码 ， 这 种 嵌入 的 程序 片段 
称 为 Scriptlet。 应 用 这 个 标记 ， 就 可 以 随时 在 JSP 中 嵌入 Java 程序 代码 。 因 此 实现 本 实例 非常 简单 ， 只 要 在 JSP 
页 面 的 相应 位 置 应 用 “<%” 和 “%>” 标 记 即 可 动态 生成 表格 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 首 先 在 “<%” 和 “%>” 中 定义 一 个 字符 串 数组 ， 用 于 存储 图 书 名 称 字符 串 ， 关 
键 代码 如 下 : 
<% 
String[] bookName = {"JavaWeb 典型 模块 大 全 ","JavaWeb 开发 实战 宝典 " ,"jsp 项 目 开发 全 程 实录 "}; 


%> 
(2) 在 indexjsp 页 的 表格 处 ,循环 步骤 (1) 中 创建 的 字符 串 数组 ,动态 生成 表格 并 将 数据 添加 到 表格 中 ， 
关键 代码 如 下 : 


<table border="1" align="center”> 
<t> 
<td align="center "> 编号 </td> 
<td align="center> 书 名 </td> 
for(int i=0:i<bookName .length:i++){ 


<td align="center"><%=i %></td> 
<td align="center"><%=bookName[i]%></td> 


从 本 实例 步骤 (2) 的 代码 中 可 以 看 出 , 插入 在 JSP 页 面 中 的 一 个 完整 的 Java 程序 片段 ， 可 以 应 用 <% 和 %> 
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分 成 多 个 部 分 , 在 第 一 处 的 <% 和 %> 标 记 中 的 for 循环 没有 返回 大 括号 }， 而 是 在 最 后 </table> 之 上 添加 的 ， 这样 ， 
在 for 循环 中 , <u> 和 <td> 标 签 将 作为 循环 体 的 内 容 被 输出 。 这 段 代码 在 编译 后 , JSP 会 生成 相应 的 Servlet 文件 。 


图 实例 说 明 

在 从 数据 库 中 读 取 数 据 时 ， 有 时 需要 将 某 些 数据 动态 添加 到 下 拉 列 表 中 。 如 在 根据 条 件 查询 数据 时 ， 需 要 
根据 下 拉 列 表 的 选项 值 查询 数据 库 ， 那 么 这 个 下 拉 列 表 的 值 就 必须 保证 是 从 数据 库 中 读 取出 来 的 ， 也 就 是 说 只 
有 下 拉 列 表 的 选项 必须 是 数据 库 中 存在 的 数据 才 可 以 进行 查询 。 所 以 ， 有 时 可 能 需要 通过 Java 程序 片段 动态 地 
将 数据 添加 到 下 拉 列 表 中 。 运 行 本 实例 ， 如 图 4.4 所 示 ， 下 拉 列 表 中 的 数据 是 动态 添加 的 。 


员工 信息 查询 
员工 姓名 : 年 龄 : 所 在 部 门 : 第 划 部 [>| [ 坦 主 
ET 
销售 部 
研发 部 
人 事 部 
测试 部 


4.4 动态 生成 下 拉 列 表 


图 关键 技术 
在 实现 本 实例 时 ， 并 没有 进行 读 取 数 据 库 ， 只 是 在 “<%” 和 “%>” 的 标记 中 创建 了 一 个 字符 串 数组 ， 然 
后 将 这 个 数组 数据 添加 到 下 拉 列 表 中 。 
多 提示 : 其 实 这 样 和 读 取 数据 库 中 的 数据 再 添加 到 下 拉 列 表 中 并 没有 多 大 区 别 ， 本 实例 只 是 为 了 演示 如 何 将 数 
据 添加 到 下 拉 列 表 中 ， 并 没有 读 取 数 据 库 。 读 者 在 实现 时 ， 可 以 实现 从 数据 库 中 读 取 数 据 并 将 其 添加 
到 下 拉 列 表 中 。 
图 设计 过 程 
(1) 新 建 index.jsp 页 ， 首 先 在 该 页 中 创建 一 个 字符 串 数组 ， 用 于 保存 员工 的 部 门 信息 ， 关 键 代 码 如 下 : 
<% 
String[] dept = {" 策 划 部 "" 销 售 部 "" 研 发 部 "" 人 事 部 "测试 部 "}; 
%> 
(2) 在 下 拉 列 表 处 ， 循 环 这 个 数组 ， 将 数组 中 的 元 素 添 加 到 下 拉 列 表 中 ， 关 键 代码 如 下 : 
<table height="150"> 
<td align="center" colspan="4 必 员工 信息 查询 </td> 
3 


<td> 员 工 姓名 : <input type="text” name="name" /></td> 
<td> 年 龄 : <input type="text” name="age” /></td> 


<td> 所 在 部 门 : 
<select> 
for(int i=0:i<dept length:i++) {96> 
<option value="<%—dept[i] 9%> 必 <9%o=dept[i] %></option> 
<%} 
%> 
</select> 
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<td align="center”" colspan="4" height="50"></td> 


图 秘笈 心 法 


在 下 拉 列 表 的 选项 中 ， 应 用 的 是 Java 表达 式 标记 输出 的 数组 元 素 ，Java 表达 式 的 标记 为 “<%=” 和 “%>”， 
如 果 在 JSP 文件 的 模板 文本 中 使 用 该 标记 ， 那 么 它 能 把 表达 式 的 值 输出 到 网 页 上 。 


实例 099 


图 实例 说 明 

在 编写 程序 时 ， 会 遇 到 同一 个 页 中 多 个 表单 提交 的 情况 。 处 理 同一 个 页 中 多 个 表单 的 提交 主要 是 为 每 个 表 
单 提供 相应 的 标识 ， 当 表单 提交 后 ， 根 据 传递 的 标识 来 判断 提交 的 表单 ， 并 执行 相应 的 处 理 。 运 行 本 实例 ， 在 
“表单 1” 文 本 框 中 输入 “ 豆 豆 上 线 ” 在 “表单 2” 文 本 框 中 输入 “无 语 上 线 ” 在 “表单 3” 文 本 框 中 输入 “ 林 
夕 上 线 ” 后 ， 如 图 4.5 所 示 ; 单 击 “表单 2” 后 面 的 “提交 ”按钮 ， 即 可 显示 如 图 4.6 所 示 的 页 面 。 


提交 了 第 2 个 表单 ,提交 内 容 为 无 滞 上 钱 ,返回 


图 4.5 表单 提交 前 的 页 面 图 4.6 表单 2 提交 后 的 页 面 

图 关键 技术 

本 实例 主要 应 用 参数 的 传递 ， 通 过 传递 参数 值 的 不 同 获 取 不 同 的 信息 。 首 先 设置 3 个 显示 表单 数据 的 对 象 
(texl,tex2,tex3)， 并 且 设 置 其 初始 值 为 空 字符 串 ， 其 次 通过 request.getParameter0 方 法 请 求 对 应 的 表单 参数 ， 如 果 
请 求 的 参数 不 为 空 字符 串 ， 则 将 参数 赋 给 相应 的 对 象 ， 最 后 通过 表单 元 素 显示 提交 后 相应 的 信息 。 
图 设计 过 程 

(1) 通过 JavaScript 脚本 限定 文本 字段 不 允许 其 为 空 值 ， 关 键 代码 如 下 : 

if(form! .textl.value—=""){ 
alert(" 请 输入 表单 的 内 容 !!! "):forml.textl focusO:retum; 


forml.submitO: 


这 formltextl .value—""){ 
alert(" 请 输入 表单 的 内 容 !"):forml.textl focusO:retum:} 
forml.submitO: 
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function Mycheck20{ 
if(form3.text3.value—""){ 
alert(" 请 输入 表单 的 内 容 !!1");form3.text3.focusO:retum;} 
form3.submit|); 
} 
‘</script> 
(2) 设置 Form 表单 和 文本 字段 的 相关 属性 ， 关 键 代码 如 下 : 

<form name="form1" method="post" action="?formid=1"> 
表单 1: 

<input name="text1" type="text" class="text" value="<9%0=text196>"> 

<input type="button" name="submit1" value=" 提 交 " onclick="Mycheck0:;"> 
</form> 
<form name="form2" method="post" action="?formid=2"> 
表单 2: 

<input name="text2" type="text" class="text" value="<%=text2%0>"> 

<input type="button" name="submit2" value=" 提 交 " onclick="Mycheck10:"> 
</form> 
<form name="form3" method="post" action="?formid=3"> 
表单 3: 

<input name="text3" type="text" class="text" value="<9%=text396>"> 

<input type="button" name="submit3" value=" 提 交 " onclick="Mycheck20:"> 
</form> 


(3) 表单 提交 后 ， 根 据 提交 的 表单 获取 相关 信息 ， 关 键 代 码 如 下 : 


if(request.getParameter("text1")!=null){ 
textl=request.getParameter("text1"); 
message=" 提 交 了 第 1 个 表单 ， 提 交 内 容 为 "ttextl+""; 


} 

if(request.getParameter("text2")!=nulD){ 
text2=request.getParameter("text2"); 
message=" 提 交 了 第 2 个 表单 ， 提 交 内 容 为 "ttext2+""; 


} 

if(request.getParameter("text3")!=nulD){ 
text3=request.getParameter("text3"); 
message=" 提 交 了 第 3 个 表单 ， 提 交 内 容 为 "ttext3+""; 

} 

%> 


图 秘笈 心 法 


应 用 参数 传递 时 ， 如 果 是 提交 到 本 页 ， 也 可 以 省 略 文件 名 直接 输入 问号 “?” 加 参数 和 值 进行 参数 传递 ， 如 


action="?formid=1"。 
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图 实例 说 明 

所 谓 的 JSP 脚本 ， 也 就 是 前 几 个 实例 中 用 到 的 Java 程序 片段 (Scriptlet)。 在 实际 应 用 中 ， 有 了 时 需要 在 JSP 
脚本 中 插入 JavaScript 代码 ， 如 在 一 些 网 站 中 添加 注册 信息 时 ， 注 册 成 功 后 可 能 需要 弹出 一 个 “注册 成 功 ”的 提 
示 信 息 窗口 ， 这 就 需要 在 JSP 脚本 中 插入 JavaScript 的 alert0 方 法 来 实现 。 运 行 本 实例 ， 如 图 4.7 所 示 ， 输 入 用 
户 注册 信息 ， 单 击 “注册 ”按钮 后 ， 将 弹出 注册 成 功 的 提示 框 。 
图 关键 技术 


在 JSP 脚本 中 插入 JavaScript 代码 ， 可 以 应 用 JSP 中 的 out 隐 含 对 象 ， 通 过 out 对 象 可 以 向 客户 端 浏 览 器 输 
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出 信息 ， 并 且 管理 应 用 服务 器 上 的 输出 缓冲 区 。 在 使 用 out 对 象 输出 数据 时 ， 可 以 对 数据 缓冲 区 进行 操作 ， 及 
时 清除 缓冲 区 中 的 残余 数据 ， 为 其 他 的 输出 让 出 缓冲 空间 。 待 数据 输出 完毕 后 ， 要 及 时 关闭 输出 流 。 


用 户 注册 

上 用户 名; 1est 
密码 : 
确认 宝 码 wovee 
性 别 : @ 男 昌文 
年 龄 : 2 
nl 语 庆 而 而 

匡 本 


图 4.7 在 JSP 脚本 中 插入 JavaScript 代码 
out 对 象 一 个 最 基本 的 应 用 就 是 向 客户 端 浏览 器 输出 信息 。onut 对 象 可 以 输出 各 种 数据 类 型 的 数据 ， 在 输出 
非 字符 串 类 型 的 数据 时 , 会 自动 转换 为 字符 串 进行 输出 。out 对 象 提供 了 printtn( 方 法 向 页 面 中 输出 信息 的 方法 ， 
应 用 该 方法 可 以 直接 输出 HTML 标签 ， 因此 ， 可 以 应 用 它 来 输出 <script> 和 </scrip 亿 标签 之 间 的 JavaScript 代码 ， 
其 代码 如 下 : 
<% 
out.printin("<script> alert( 输 出 弹出 提示 窗口 ! "):<script>") 


< 前 注意 : 应 用 out 对 象 的 printin0 方 法 输出 HTML 标签 时 ， 是 以 字符 囊 格式 输出 的 ， 如 果 输 出 标签 体 的 属性 信 
息 , 需要 应 用 转 义 字符 “\”， 如 输出 一 个 文本 框 元 素 : outprintln("<input type=\"text\" name=\"user\"/>")。 


图 设计 过 程 
(1) 创建 用 户 注册 的 表单 页 index.jsp， 将 表单 提交 到 save.jsp 页 ， 关 键 代 码 如 下 : 
<form action="save.jsp” method="post’> 
</form> 


(2) 创建 savejsp 页 ， 该 页 只 是 为 了 演示 如 何在 JSP 脚本 中 插入 JavaScript 代码 ， 并 没有 真正 对 表单 数据 
进行 处 理 ， 如 何 获取 表单 数据 ， 会 在 后 面 的 实例 中 具体 介绍 。savejsp 的 关键 代码 如 下 : 
<% 


out.printin("<script> alert( 注 册 成 功 ! ");window.location.href='index.jsp';</script>"); 


%> 
国 秘笈 心 法 

out 对 象 的 类 一 个 比较 重要 的 功能 就 是 对 缓冲 区 进行 管理 。 通 过 调用 out 对 象 的 clear() 方 法 可 以 清除 缓冲 
的 内 容 。 这 类 似 于 重 置 响应 流 ， 以 便 重新 开始 操作 。 如 果 响 应 已 经 提交 ， 则 会 产生 IOException 异常 的 负 作用 。 
out 对 象 还 提供 了 另 一 种 清除 缓冲 区 内 容 的 方法 ， 即 clearBuffer0 方 法 ， 通 过 该 方法 可 以 清除 缓冲 区 的 “当前 ” 
内 容 ， 而 且 即 使 内 容 已 经 提交 给 客户 端 ， 也 能 够 访问 该 方法 。 


图 实例 说 明 

通过 <jsp:forward> 动 作 标识 可 以 将 请 求 转发 到 其 他 的 Web 资源 ,， 如 另 一 个 JSP 页 面 、HTML 页 面 、Servlet 等 。 
执行 请 求 转发 后 ， 当 前 页 面 将 不 再 被 执行 ， 而 是 去 执行 该 标识 指定 的 目标 页 面 。 运 行 本 实例 ， 将 显示 如 图 4.8 
所 示 的 用 户 登录 页 面 。 
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图 4.8 将 页 面 转发 到 用 户 登录 页 面 


图 关键 技术 


<jsp:forward> 动 作 标 识 的 语法 格式 如 下 : 
<jsp:forward page="url"/> 

或 

<ijsp:forward page="url"> 

子 动作 标识 <jsp:param> 

</isp:forward> 


page 属性 : 用 于 指定 请 求 转发 的 目标 页 面 。 该 属性 值 可 以 是 一 个 指定 文件 路 径 的 字符 串 ， 也 可 以 是 表示 文 


件 路 径 的 JSP 表达 式 。 但 是 请 求 被 转向 的 目标 文件 必须 是 内 部 的 资源 ， 即 当前 应 用 中 的 资源 。 


JSP 的 动作 标识 <jsp: nn 子 标 识 ， 用 于 为 其 他 标识 传递 参数 ， 其 语法 格式 如 下 : 
<jsp:param name=" 参 数 名 " value=" 参 数值 " /> 

参数 说 明 

@ name: 用 于 指定 参数 名 称 。 

@ value: 用 于 设置 对 应 的 参数 值 。 

例如 ， 通 过 <jsp:param> 标 识 为 <jsp:forward> 标 识 指 定 参数 ， 可 以 使 用 下 面 的 代码 : 

Sjsp:forward page="modifjsp "> 

jsp:param name="Wser1d" value="7"/> 

</isp:forward> 


在 上 面 的 代码 中 ， 实 现 了 在 请 求 转发 到 modifyjsp 页 面 的 同时 ， 传 递 了 参数 userId， 其 参数 值 为 7。 


图 设计 过 程 


(1) 创建 一 个 名 称 为 index.jsp 的 文件 ， 该 文件 为 中 转 页 ， 用 于 通过 <jsp:forward> 动 作 标识 将 页 面 转发 到 用 


户 登录 页 面 (login.jsp)， 其 具体 代码 如 下 : 
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<%(@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> 
<html> 


<head> 

<meta http-equiv="Content-Type” content="text/html; charset=GB18030"> 
<title> 中 转 页 </title> 

</head> 


<body> 

jsp:forward page="loginjsp"/> 
</body> 

‘</html> 


(2) 编写 login.jsp 文件 ， 在 该 文件 中 添加 用 于 收集 用 户 登录 信息 的 表单 及 表单 元 素 ， 具 体 代码 如 下 : 


<9%@ page language="java" contentType="text/htmil; charset=GB18030" pageEncoding="GB18030"%> 
<html> 


<head> 

<meta http-equiv="Content-Type” content="text/html; charset=GB18030"> 

<title> 用 户 登 录 </title> 

</head> 

<body> 

<form name="Jorm1" method="post” action=""> 

用 户 名 : <input name="name” type="text"id="name" style="width: 120px "><br> 

密 &nbsp;&nbsp; 码 :<input name="pwd" type="password”id="pwd" style="width: 120px ”> <br> 
br> 
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<input type="submit" name="Submit” value=" 想 交 "> 
</form> 


<body> 
Ahtml> 


国 秘笈 心 法 
通过 <jsp:param> 动 作 标识 指定 的 参数 ， 将 以 “参数 名 -= 值 ”的 形式 加 入 到 请 求 中 。 它 的 功能 与 在 文件 名 后 面 
直接 加 “? 参 数 名 = 参数 值 ”是 相同 的 。 


4.2 JSP 内 置 对 象 


JSP 为 了 简化 开发 ， 提 供 了 一 些 内 置 对 象 ， 用 来 实现 很 多 JSP 应 用 。 在 使 用 JSP 内 置 对 象 时 ， 不 需要 先 定 
义 这 些 对 象 ， 直 接 使 用 即 可 。JSP 提供 了 request、response、session、application、out、page、config、exception 
和 pageContent 9 个 内 置 对 象 。 其 中 request 对 象 、response 对 象 、out 对 象 、page 对 象 、config 对 象 、exception 
对 象 和 pageContent 对 象 的 有 效 范围 是 当前 页 面 ， 而 session 对 象 的 有 效 范 围 是 当前 会 话 ， 即 同一 个 客户 端的 
所 有 页 面 application 对 象 的 有 效 范围 是 当前 应 用 ， 即 在 同一 个 应 用 程序 中 ， 只 要 服务 器 不 关闭 ， 这 个 对 象 就 
有 效 。 

JSP 内 置 对 象 是 应 用 JSP 进行 Web 开发 时 经 常 被 使 用 的 技术 。 通 过 它们 可 以 对 Web 开发 中 的 请 求 、 响 应 、 
会 话 、 应 用 、 输 出 、 配 置信 息 和 异常 信息 等 内 容 进行 控制 。 对 于 不 同 的 内 容 将 由 不 同 的 内 容 进 行 控制 。 下 面 将 
介绍 各 内 置 对 象 的 使 用 场合 。 


ey 
SS 相间 
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图 实例 说 明 

在 Web 应 用 程序 中 ， 经 常 需要 完成 用 户 与 网 站 的 交互 。 例 如 ， 当 用 户 填写 表单 后 ， 需 要 把 数据 提交 给 服务 
器 处 理 ， 这 时 服务 器 就 需要 获取 这 些 信 息 。 本 实例 将 介绍 如 何 获取 表单 提交 的 信息 。 运 行 本 实例 ， 如 图 4.9 所 
示 ， 输 入 用 户 注册 信息 ， 单 击 “ 注 册 ” 按 钮 后 ， 在 JSP 处 理 页 中 将 获取 到 这 些 表单 数据 ， 并 将 其 显示 在 页 面 中 ， 
如 图 4.10 所 示 。 


获取 表单 信息 
用 户 名 : 张 三 
性 别 : m 
ai zhangsan@163.com 年 龄 : 1 
Email: zhangsan@163.com 
4.9 用 户 注册 表单 页 图 4.10 获取 用 户 注册 信息 


图 关键 技术 

JSP 的 内 置 对 象 request 封装 了 由 客户 端 生成 的 HITP 请 求 的 所 有 细节 , 主要 包括 HTTP 头 信息 、 系 统 信息 、 
请 求 方式 和 请 求 参数 等 。 通 过 request 对 象 提供 的 相应 方法 可 以 处 理 客户 端 浏 览 器 提交 的 HTTP 请 求 中 的 各 项 
参数 。 

在 本 实例 中 ， 通 过 request 对 象 的 getParameter0 方 法 可 以 获取 用 户 提交 的 表单 信息 。 例 如 ， 存 在 一 个 name 


属性 为 username 的 文本 框 ， 在 表单 提交 


Java Web 开发 实例 大 全 (基础 卷 ) 


String userName = request.getParameter("usemame"); 


参数 username 与 HTML 表单 的 name 属性 对 应 ， 如 果 参 数值 不 存在 ， 则 返回 


为 String 类 型 。 


图 设计 过 程 


(1) 创建 用 户 注 册 的 表单 页 index.jsp。 


(2) 创建 save.jsp 页 面 ， 在 该 页 面 中 获取 用 户 提 交 的 表单 信息 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<% 

request.setCharacterEncoding("UTF-8"); 

String name=request.getParameter("name"): 

String sex = request.getParameter("sex"); 

String age = request.getParameter("age" 

String email=request.getParameter("email"); 
%> 


<table height="150" width="300"> 
<tr><td align="center”" colspan="4" height="20"></td></tr> 


<tr><td align="center” colspan="4 心 获取 表单 信息 </td></tr> 


区 


<%if(sex—nullll"".equals(sex)) { 
‘out.printin(™™); 

Jelse{ 
out.printin(sex); 


<td> 
<%if(age—nullll"".equals(age){ 
out.printin(™™"); 
Jelse{ 
out.printin(age); 


<td> 


</tr> 
<tr><td align="center” colspan="4" height="20"></td></tr> 
</table> 


图 秘笈 心 法 
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在 获取 表单 请 求 参数 时 ， 很 容易 发 生 乱 码 问题 


后 ， 要 获取 其 value 值 ， 可 以 通过 下 面 的 代码 实现 : 


-个 null 值 ， 


， 这 时 ， 需 要 在 应 用 request 获取 请 求 参数 之 


该 方法 的 返回 值 


用 request 


第 4 章 JSP 基 础 与 内 置 对 象 


对 象 的 setCharacterEncoding() 方 法 设置 请 求 编码 。 需 要 注意 的 是 ， 这 个 编码 是 根据 表单 页 的 编码 格式 而 定 的 ， 


如 表单 页 的 编码 格式 为 UTF-8， 那 么 在 处 理 页 中 应 该 调用 如 下 代码 : 
request.setCharacterEncoding("UTF-8"): 


图 实例 说 明 


在 Web 应 用 程序 中 ， 有 时 需要 通过 超 链接 来 传递 参数 。 假 定 在 显示 员 
工 信 息 的 页 面 中 ,每 行 员工 信息 都 包含 一 个 “删除 ”的 超 链接 ， 然 后 在 这 个 
超 链接 中 需要 指定 用 户 ID 为 参数 ， 当 单 击 “ 删 除 ” 超 链接 时 ， 在 处 理 页 中 
需要 获取 用 户 ID 值 , 最 后 根据 用 户 ID 删除 员工 信息 。 本 实例 将 介绍 如 何 获 


取 超 链接 访问 的 请 求 参数 ， 实 例 运行 结果 如 图 4.11 所 示 。 | 
| | 关键 技术 vd mull 


request 对 象 用 于 处 理 HTTP 请 求 中 的 各 项 参数 。 在 这 些 参数 中 , 最 常用 
的 就 是 获取 访问 请 求 参 数 。 当 通过 超 链接 的 形式 发 送 请 求 时 ， 可 以 为 该 请 求 
传递 参数 ， 这 可 以 通过 在 超 链 接 的 后 面 加 上 问号 ?来 实现 。 注 意 这 个 问号 为 图 4.11 处 理 页 的 运行 结果 
英文 半角 的 符号 。 例 如 ， 发 送 一 个 请 求 到 deletejsp 页 面 ， 并 传递 一 个 名 称 
为 id 的 参数 ， 可 以 通过 以 下 超 链 接 实现 : 

<a href="delete.jsp?id=1"> 删 除 </a> 
图 设计 过 程 

(1) 创建 index.jsp 文件 ,在 该 文件 中 添加 一 个 用 于 链接 到 dealjsp 页 面 的 超 链接 ， 并 传递 两 个 参数 。index. 

jsp 文件 的 具体 代码 如 下 : 


<%(@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> 
<html> 


图 Intrret| fn: 启用 三 ” 所 100% ~ 


<head> 

<meta http-equiv="Content-Type” content="text/html; charset=GB18030"> 
<title> 使 用 request 对 象 获取 请 求 参数 值 </title> 

</head> 

<body> 

<a href="dealjsp?id=1&user= 人 > 处 理 页 </a> 


<lbody> 
</html> 
(2) 创建 dealjsp 文件 ， 在 该 文件 中 通过 request 对 象 的 getParameter0 方 法 获取 请 求 参 数 id、user 和 pwd 


的 值 并 输出 。dealjsp 文件 的 具体 代码 如 下 : 
<%@ page language="java" contentType="text/html: charset=GB18030" pageEncoding="GB18030"%> 
<% 


String id = request.getParameter("id"); /获取 记 参 数 的 值 
String user = request.getParameter("user"); /获取 user 参数 的 值 
String pwd = request.getParameter("pwd"): /获取 pwd 参数 的 值 
%> 


<html> 
<head> 

<meta http-equiv="Content-Type" content="text/html: charset=GB18030"> 
<title> 处 理 页 </title> 

</head> 

<body> 

记 参数 的 值 为 : <%=id%><br> 

user 参数 的 值 为 ，<%=user96><br> 

pwd 参数 的 值 为 <%=pwd%> 
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<Jbody> 
</html> 


力 秘笈 心 法 


在 通过 问号 “?” 来 指定 请 求 参数 时 ， 参 数值 不 需要 使 用 单 引号 或 双 引 号 括 起 来 ， 包 括 字符 型 的 参数 。 可 以 
同时 指定 多 个 参数 ， 各 参数 间 用 符号 “&” 分 阳 即 可 。 


实例 104 初级 
实用 指数 : 食 食 
图 实例 说 明 
在 Web 应 用 程序 中 ， 有 时 需要 将 表单 请 求 提交 到 本 页 进行 处 理 。 本 实 
例 将 介绍 如 何 将 表单 请 求 提交 到 本 页 。 运 行 本 实例 ， 如 图 4.12 所 示 ， 输 入 rn 
用 户 名 和 密码 ， 单 击 “ 登 录 ”按钮 ， 将 在 本 页 直接 获取 到 用 户 名 和 密码 , 并 | 
显示 在 页 面 中 。 [EE 
图 关键 技术 BAER 


实现 将 表单 提交 到 本 页 , 实际 上 很 简单 ， 只 要 将 表单 <form> 的 action 属 图 4.12 将 表单 请 求 提交 到 本 页 
性 设置 为 本 页 即 可 ， 假 定 表单 页 为 indexjsp， 那 么 action 的 值 就 应 该 为 
index.jsp， 然 后 同样 应 用 request 对 象 的 getParameter0 方 法 来 获取 表单 元 素 的 值 。 


图 设计 过 程 
(1) 创建 表单 页 index jsp, i a 息 提交 到 本 页 ， 关 键 代 码 如 下 : 
<form action="index.jsp”" method= 
<table 0 
<tr><td align="center" colspan="4" height="20"></td></tr> 
<tr><td align="center” ct ="4 守 用 户 登录 </td></tr> 
<tr> 
<td> 用 户 名 : </td> 
<td><input type="text" name="name” /></td> 
</tr> 
<tr> 
<td 密 码 :<ltd> 
<td><input type="password" name="pwd" /></td> 
> 
<tr> 
<td></td> 
<td><input type="submit” value=" 登 有 如"/></td> 
< 
<tr> 
<td> 用 户 名 参数 为 : </td> 
<td><%=name %></td> 
< 
<tr> 
<td> 密 码 参数 为 : </td> 
<td><%=pwd %></td> 
<ht> 
<tr><td align="center" colspan="4" height="20"></td></tr> 
</table> 
</fom> 
(2) 在 index.jsp 页 中 获取 表单 信息 ， 关 键 代 码 如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"): 


String name = request.getParameter("name"); 
String pwd = request.getParameter("pwd"): 
%> 
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国 秘笈 心 法 


需要 注意 的 是 , 在 本 实例 的 页 面 中 使 用 request 对 象 的 getParameter0 方 法 来 获取 参数 时 , 在 页 面 被 加 载 后 就 
会 自动 执行 这 段 代 码 ， 因 此 ， 在 本 实例 中 需要 进行 合理 的 判断 ， 只 有 提交 表单 后 才 可 以 执行 request 对 象 的 
getParameter0) 方 法 来 获取 表单 的 代码 。 针 对 这 一 特点 ， 可 以 在 表单 的 “提交 ”按钮 中 添加 一 个 name 属性 ， 以 本 


实例 为 例 ， 在 “登录 ”按钮 的 标签 中 添加 name 属性 ， 代 码 如 下 : 
<input type="submit" name="submit" value=" 注 册 "> 


然后 在 获取 表单 的 请 求 信息 之 前 ， 判 断 用 户 是 否 单 击 了 “登录 ”按钮 ， 只 有 “登录 ”按钮 的 值 不 为 null 时 ， 
he 代码 如 下 : 


这 下 metaspanmaet submit")!=null ){ 


String pwd= ea 


实例 105 
实用 指数 : 但 食 : 


图 实例 说 明 
在 进行 请 求 转发 时 ， 需 要 把 一 些 数据 传递 到 转发 后 的 页 面 进行 处 理 。 这 时 ， 就 需要 使 用 request 对 象 的 

setAttribute0 方 法 将 数据 保存 到 request 范围 内 的 变量 中 。 本 实例 将 介绍 如 何 应 用 request 对 象 进行 数据 传递 ， 运 
行 本 实例 ， 将 显示 如 图 4.13 所 示 的 运行 结果 。 

简直 页 - Windows nteme bpL ES 

i 

实 入 天 | 次 昌 ] 建 网 站 > 尼 ] 网 页 快讯 库 了 

国 结 果 页 偷 ~ 四 


很 抱 欢 ， 页 面 产生 错误 ! 


用 @ Intemet | 保护 模式 启用 而 ” 于 100% ~ 


图 4.13 本 实例 的 运行 结果 
图 关键 技术 


Tequest 对 象 可 以 视 为 一 个 域 , 可 以 应 用 setAttribute0 方 法 向 域 范围 内 存放 数据 。request 对 象 的 setAttribute0 
方法 的 语法 格式 如 下 : 

request.setAttribute(String name.Object object); 

参数 说 明 

@ name: 表示 变量 名 ， 为 String 类 型 ， 在 转发 后 的 页 面 取 数据 时 ， 就 是 通过 这 个 变量 名 来 获取 数据 的 。 

@ object: 用 于 指定 需要 在 request 范围 内 传递 的 数据 ， 为 Object 类 型 。 

在 将 数据 保存 到 request 范围 内 的 变量 中 后 ,可 以 通过 request 对 象 的 getAttribute0 方 法 获取 该 变量 的 值 ， 具 
体 的 语法 格式 如 下 : 

Tequest.getAttribute(String name): 

参数 说 明 

name: 表示 变量 名 ， 该 变量 名 在 request 范围 内 有 效 。 
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图 设计 过 程 
(1) 创建 index.jsp 文件 ， 在 该 文件 中 ， 首先 应 用 Java 的 ty…catch 语句 捕获 页 面 中 的 异常 信息 ， 如 果 没 有 
异常 ， 则 将 运行 结果 保存 到 request 范围 内 的 变量 中 ; 如果 出 现 异 常 ， 则 将 错误 提示 信息 保存 到 request 范围 内 


的 变量 中 ， 然 后 应 用 <jsp:forward> 动 作 指令 将 页 面 转发 到 dealjsp 页 面 。indexjsp 文件 的 具体 代码 如 下 : 
Be language="java" contentType="text/html: charset-GB18030" pageEncoding="GB18030"%%> 


二 
<meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 
<title>Insert title here</title> 


try{ /捕获 异常 信息 


Tequest.setAttribute("result",money/number); /保存 执行 结果 
}catch(Exception e){ 

Tequest setAttribute("result"," 很 抱 凌 ， 页 面 产生 错误 ! /保存 错误 提示 信息 
} 


%> 
<jsp:forward page="deal.jsp"/> 
</body> 


<lhtml> 

(2) 创建 dealjsp 文件 ， 在 该 文件 中 通过 request 对 象 的 getAttribute0 方 法 获取 保存 在 request 范围 内 的 变 
量 result 并 输出 。 这 里 需要 注意 的 是 , 由 于 getAttribute0 方 法 的 返回 值 为 Object 类 型 ， 所 以 需要 调用 其 toString0 
方法 将 其 转换 为 字符 串 类 型 。dealjsp 文件 的 具体 代码 如 下 : 


<%(@O page language="java" contentType="text/html; charset=GB18030" 
pageEncoding="GB18030"%> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 

<title> 结 果 页 </title> 

</head> 

<body> 

<%String message=request.getAttribute("result").toStringO; %> 

<%=message %> 


</body> 

/html> 
图 秘笈 心 法 

由 于 应 用 setAttribute() 方 法 保存 在 request 对 象 中 的 数据 类 型 为 Object， 因 此 ， 在 实现 一 些 数据 的 传递 时 ， 
可 以 将 类 的 对 象 保存 在 request 中 。 假定 有 一 个 保存 用 户 注 册 信息 的 User 类 对 象 , 可 以 将 这 个 对 象 保存 在 request 


中 进行 传递 ， 然 后 在 获取 User 对 象 时 需要 进行 类 型 强制 转换 ， 将 Object 类 型 转换 为 User 类 型 ， 代 码 如 下 : 
User user = (User)request.getAttribute("user"); 


实例 106 有 并 读 取 用 户 登 录 信 息 


图 实例 说 明 

在 互联 网 中 ，cookie 是 小 段 的 文本 信息 ， 在 网 络 服务 器 上 生成 ， 并 发 送 给 浏览 器 。 通 过 使 用 cookie 可 以 标 
识 用 户 身 份 ， 记 录用 户 名 和 密码 ， 跟 踪 重 复 用 户 等 。 浏 览 器 将 cookie 以 key/value 的 形式 保存 到 客户 机 的 某 个 
指定 目录 中 。 运 行 本 实例 ， 第 一 次 显示 的 页 面 如 图 4.14 所 示 : 输入 姓名 mr， 并 单 击 “确定 ”按钮 后 ， 将 显示 如 
图 4.15 所 示 的 运行 结果 。 
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着 二 cookie 保存 并 半 取 用 广 登 录 、[cali GE 


GO re el5xlD 


| 诺 和 0 天 | 次 且 建 汶 网 站 站 ] 网 页 快讯 库 


息 通 寺 coolie 代 邱 并 半 取 用 户 登录 es} 


GO ron -Tals lx? 


袖 YN | 高 目 于 网 站 妈 网 页 快讯 朱 v 


辐 通 过 cookie 保 夺 并 到- ED | 国电 eookie 8 芥 ~ 
| 滞 客 名 果 ， 欢 迎 您 初次 光临 向 欢迎 [ar] 再 次 光临 
引 您 注册 的 时 间 是 ，2010-9-19 
上 16:59:29 


请 输入 姓名 :nr 


| 国 Intemet| WP 二: 启用 而” 页 100% 


图 4.15 第 二 次 运行 的 结果 


图 Intemet | 便 P 杰 式 :启用 级 ~ 页 100% ~ 


4.14 第 一 次 运行 的 结果 


图 关键 技术 


通过 cookie 的 getCookies() 方 法 可 获取 所 有 cookie 对 象 的 集合 , 通过 cookie 对 象 的 getName0 方 法 可 获取 指 
定名 称 的 cookie， 通 过 getValue() 方 法 可 获取 cookie 对 象 的 值 。 另 外 ， 将 一 个 cookie 对 象 发 送 到 客户 端 使 用 了 
Tesponse 对 象 的 addCookie() 方 法 。 

图 设计 过 程 
(1) 创建 indexjsp 文件 ， 在 该 文件 中 首先 获取 cookie 对 象 的 集合 ， 如 果 集 合 不 为 空 ， 就 通过 for 循环 遍历 
cookie 集合 ， 从 中 找 出 设置 的 cookie (这 里 设置 为 mrCookie)， 并 从 该 cookie 中 提取 出 用 户 名 和 注册 时 间 ， 再 


根据 获取 的 结果 显示 不 同 的 提示 信息 。index.jsp 文件 的 具体 代码 如 下 : 


<%(0 page language="java" contentType="text/html; charset=GB18030" 
pageEncoding="GB18030"96> 

<%(0 page import="java.net.URLDecoder" %> 

<html> 

<head> 


<meta http-equiv="Content-Type" content="text/html: charset=GB18030"> 
<title> 通 过 cookie 保存 并 读 取 用 户 登录 信息 </title> 


</head> 
<body> 
<% 
Cookie[] cookies = request.getCookiesO; /从 request 中 获得 Cookie 对 象 的 集合 
String user = ""; /登录 用户 
String date =""; // 注 册 的 时 间 
if(cookies != nulD { 
for (int i= 0; i< cookies.length; i++) { /遍历 cookie 对 象 的 集合 
if (cookies[i].getNameO.equals("mrCookie")) { // 如 果 cookie 对 象 的 名 称 为 mrCookie 
User= URLDecoder decode(cookiesfi].getValueO .split(#"?)[0]): /获取 用 户 名 
date = cookies[i].getValue().split("#")[1]: /获取 注册 时 间 
} 
) } 
if("".equals(user) && "".equals(date)) { 1/ 如果 没有 注册 
%> 
游客 您 好 ， 欢 迎 您 初次 光临 ! 
<form action="deal.jsp" method="post"> 
请 输入 姓名 : <input name="user" type="text" value=""> 
<input type="submit" value=" 确 定 "> 
</form> 
<% 
} else{ /已 经 注册 
%> 
欢迎 [<b><%=user %></b>] 再 次 光临 <br> 
您 注册 的 时 间 是 : <%=date %> 
<% 
} 
%> 
</html> 
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(2) 编写 dealjsp 文件 ， 用 于 向 cookie 中 写 入 注册 信息 。dealjsp 文件 的 具体 代码 如 下 : 
<%0@ page language="java" contentType="text/html: charset-GB18030" pageEncoding="GB18030"%> 
<%@ page import="java.net-URLEncoder" 9%> 


<head> 

‘<meta http-equiv="Content-Type" content="text/html: charset=GB18030"> 
<title> 写 入 cookie</title> 

</head> 

<body> 


<% 

Tequest.setCharacterEncoding("GB18030"); // 设 置 请 求 的 编译 为 GB18030 
String user=URLEncoder.encode(request.getParameter("user")."GB18030"); // 获 取 用 户 名 

Cookie cookie = new Cookie("mrCookie", user+"#"+new java.util.Date().toLocaleString0):// 创 建 并 实例 化 cookie 对 象 
cookie.setMaxAge(60*60*24*30); // 设 置 cookie 有 效 期 30 天 
Tesponse.addCookie(cookie); // 保 存 cookie 

%> 

<script type="text/javascript">window.location href="index.jsp"</script> 

</body> 


</html> 
图 秘笈 心 法 
在 向 cookie 保存 的 信息 中 ， 如 果 包 括 中 文 ， 则 需要 调用 java.net.URLEncoder 类 的 encode0 方 法 将 要 保存 到 


cookie 中 的 信息 进行 编码 ;在 读 取 cookie 的 内 容 时 ， 还 需要 应 用 java.net.URLDecoder 类 的 decode0 方 法 进行 解 
码 。 这 样 ， 就 可 以 成 功 地 向 cookie 中 写 入 中 文 信息 


初级 


实例 
实例 实用 指数 : 让 人 


图 实例 说 明 
运行 本 实例 ， 默 认 执行 的 是 indexjsp 页 面 ， 在 该 页 面 中 ， 又 执行 了 重 定向 页 面 到 loginjsp 的 操作 ， 所 以 在 
浏览 器 中 将 显示 如 图 4.16 所 示 的 用 户 登 录 页 面 。 


征用 广 要 录 - Windows Internet Explorer 


成 图 Internet | 保 扩 模式 启用 何 ” 政 90% 


图 4.16 ”实现 重 定向 页 面 


图 关键 技术 


使 用 response 对 象 提供 的 sendRedirect0 方 法 可 以 将 网 页 重 定向 到 另 一 个 页 面 。sendRedirect0 方 法 的 语法 格 
式 如 下 : 

Tesponse.sendRedirect(String path); 

参数 说 明 

path: 用 于 指定 目标 路 径 ， 可 以 是 相对 路 径 ， 也 可 以 是 不 同 主机 的 其 他 URL 地 址 。 

例如 ， 使 用 sendRedirect0 方 法 重 定 向 网 页 到 loginjsp 页 面 〈 与 当前 网 页 同 级 ) 和 明日 编程 词典 网 (与 该 网 
页 不 在 同一 主机 ) 的 代码 如 下 : 


response.sendRedirect("login.jsp"); // 重 定向 到 loginjsp 页 面 
response.sendRedirect("www.mrbccd.com"); // 重 定向 到 明日 编程 词典 网 
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图 设计 过 程 
(1) 创建 index.jsp 文件 ， 在 该 文件 中 调用 response 对 象 的 sendRedirectO 方 法 重 定向 页 面 到 用 户 登录 页 面 
login.jsp。index.jsp 文件 的 关键 代码 如 下 : 
<%@ page language="Java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> 
<Yresponse.sendRedirect("login.jsp"); %> 
(2) 编写 login.jsp 文件 ， 在 该 文件 中 添加 用 于 收集 用 户 登录 信息 的 表单 及 表单 元 素 ， 关 键 代码 如 下 : 
<form name="orm1" method="post" action=""> 
用 户 名 : ”<input name="name” type="text”id="name" style="width: 120px "><br> 
密 &nbsp;&nbsp; 码 : <input name="pwd" type="password" id="pwd" style="width: 120px"> <br> 
<br 


<input type="submit" name="Submit” value=" 契 交 > 

</form> 
图 秘笈 心 法 

重 定向 操作 支持 将 地 址 重 定 向 到 不 同 的 主机 上 ， 这 一 点 与 转发 不 同 。 在 客户 端 浏览 器 上 将 会 得 到 跳 转 的 地 
址 ， 并 重新 发 送 请 求 链接 。 用 户 可 以 从 浏览 器 的 地 址 栏 中 看 到 跳 转 后 的 地 址 。 进 行 重 定向 操作 后 ，request 中 的 
属性 全 部 失效 ， 并 且 开 始 一 个 新 的 request 对 象 。 


图 实例 说 明 


如 果 静 态 网 页 中 含有 用 户 提交 的 表单 和 字段 信息 , 而 从 网 页 的 源 代码 中 又 可 以 看 到 网 页 被 提交 的 目标 地 址 ， 
那么 修改 静态 页 面 表单 提交 的 目标 地 址 ， 就 可 以 实现 在 本 地 运行 静态 网 页 并 向 服务 器 提交 数据 的 功能 。 这 样 ， 
任何 人 都 可 以 利用 网 页 在 网 站 外 登录 网 站 ， 从 而 给 网 站 留 下 严重 的 安全 隐患 。 为 解决 该 问题 ， 本 实例 介绍 一 种 
防止 表单 在 网 站 外 部 提交 的 方法 ， 运 行 本 实例 ， 如 图 4.17 所 示 ， 在 “用 户 名 ”文本 框 中 输入 用 户 名 ， 在 “密码 ” 
文本 框 中 输入 密码 ， 单 击 “提交 ”按钮 即 可 进入 到 网 页 的 处 理 页 面 ， 此 时 地 址 栏 中 的 地 址 即 为 处 理 页 地 址 〈 用 
户 也 可 以 通过 其 他 方法 获得 )， 当 用 户 在 本 地 计算 机 上 编写 静态 表单 页 时 ， 将 目标 地 址 设置 为 以 上 地 址 后 ， 运 行 
网 页 并 提交 表单 将 显示 如 图 4.18 所 示 的 提示 信息 。 


茜 止 欠 网 站 外 部 提交 表单 1 1 


图 4.17 表单 提交 前 图 4.18 ”从 外 部 提交 表单 后 


图 关键 技术 

本 实例 首先 使 用 request.getRequestURL0O.toString0 方 法 获得 当前 网 页 的 正 地 址 , 然后 使 用 request.getHeader 
("Teferer") 请 求 页面 的 地 址 ， 接 着 使 用 URL urlOne = new URL(String url) 的 方法 分 别 获取 两 个 正 地 址 服务 器 主机 
名 ， 最 后 比较 两 个 主机 的 名 称 是 否 相同 。 如 果 网 页 的 URL 为 空 ， 比 较 时 将 出 现 路 径 有 误 的 信息 。 
图 设计 过 程 


(1) 创建 indexjsp 页 面 ， 添 加 表单 及 相关 的 表单 元 素 ， 并 设置 Form 表单 的 相关 属性 值 ， 关 键 代 码 如 下 : 
<form name="form1" action="doform.jsp" method="post"> 
<table align="center "> 
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和 


$$ 


<td align="center" colspan="2"> 
<input type="submit" name="action2" value=" 息 闪 "> 
<input type="Teset” name="Submit” value=" 重 和 > 
<hd> 
</t> 
</table> 
</form> 


(2) 如 果 表 单 被 提交 ， 将 判断 表单 提交 的 路 径 是 否 有 误 ， 如 果 提 交 的 路 径 有 误 ， 系 统 将 给 予 提示 ， 并 禁止 
从 网 站 外 部 进行 提交 表单 ， 关 键 代码 如 下 : 
<% 


String address = request. getHeader("referer"); /获取 页 面 的 请 求 地 址 

String pathAdd =""; /定义 空 字符 串 

if (address != null) { /1/ 判 断 当 页 面 的 请 求 地址 为 空 时 
URL urlOne = new URL(address); /实例 化 URL 方法 
pathAdd = urlOne.getHostO: /获取 请 求 页 面 的 服务 器 主机 


} 
String addressl = request.getRequestURL().toString(0; // 获 取 当 前 网 页 的 地 址 
String pathAddl =""; 
这 (addressl != nulD { 
URL urlTwo = new URL(address1): 
pathAdd1 = urlTwo.getHostO|; /获取 当前 网 页 的 服务 器 主机 
} 


%> 
<body> 

<table align="center ”> 

<tr><td>&nbsp; énbsp;</td></tr> 

<tu> 
<td> 
<% 
这 (!pathAdd.equals(pathAdd1)) { // 判 断 当前 页 面 的 主机 与 服务 器 的 主机 是 否 相同 

%> 


图 秘笈 心 法 
由 于 网 站 服务 器 的 名 称 是 唯一 的 ， 而 且 每 次 从 客户 端 浏览 服务 器 网 页 时 ， 所 浏览 的 网 页 中 包含 了 网 页 的 来 
源 信息 ， 因 此 可 以 通过 比较 服务 器 名 称 的 方法 来 防止 表单 在 网 站 外 被 提交 。 


bi 
实例 109 象 实现 网 站 计数 器 

图 实例 说 明 
Application 对 象 是 JSP 的 一 个 内 建 对 象 。 当 服务 器 启动 

时 ， 该 对 象 会 被 自动 创建 ， 直 到 服务 器 关闭 该 对 象 才 会 消失 ， a 

并 且 在 此 期 间 可 以 被 多 个 用 户 共同 使 用 。 这 是 不 同 于 session 你 是 第 14 位 访问 本 网 站 的 游客 


对 象 的 。 本 实例 将 使 用 Application 对 象 实现 网 站 计数 器 ， 程 


序 运行 结果 如 图 4 19 所 示 。 图 4.19 Application 对 象 实现 的 网 站 计数 器 
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图 关键 技术 


本 实例 主要 使 用 Application 对 象 的 setAttribute0 和 getAttribute0) 方 法 ， 下 面 分 别 进行 介绍 。 
(1) setAttribute( 方 法 

语法 格式 如 下 : 

setAttribute(String key.String value) 

功能 : 在 Application 对 象 中 添加 属性 。 

参数 说 明 

@ key: 此 参数 设置 属性 名 称 。 

@ value: 此 参数 设置 属性 值 。 
(2) getAttribute() 方 法 

语法 格式 如 下 : 

getAttribute(String key) 

功能 : 获取 指定 属性 的 值 。 

参数 说 明 

key: 此 参数 意义 同 setAttribute0 方 法 的 key 参数 。 


图 设计 过 程 
创建 一 个 首页 面 ndexjsp， 当 用 户 访问 该 页 面 时， 程序 会 自动 将 网 站 的 访问 次 数 加 1， 关 键 代码 如 下 : 
<9% 


int i=0; 
synchronized(application){ 
if(application.getAttribute("times")—nulD) { // 服 务 器 启动 后 的 第 一 位 访问 者 
1; 
} 
else{ 
i=Integer.parseInt((String)application.getAttribute("times")); 
itt; /访问 次 数 加 1 


} 
application.setAttribute("times",Integer.toString(i)); // 将 访问 次 数 存 入 Application 对 象 中 


%> 
<table> 
<tr bgcolor="lightgrey"> 
<td align="center"> 欢 迎 访问 ! </td> 
</t> 
<t> 
<td align="center"> 
您 是 第 <b><%=i9%></b> 位 访问 本 网 站 的 游客 ! 
<td> 
</t> 
‘</table> 


国 秘笈 心 法 


Synchronized(Objecb{…} 方 法 使 多 用 户 同 步 共享 同一 个 对 象 。Object 表示 被 共享 的 对 象 ，} 中 包含 对 该 对 象 
进行 操作 的 代码 。 当 被 共享 的 对 象 正在 被 使 用 时 ， 其 他 的 用 户 只 能 等 待 ， 直 到 上 一 个 用 户 对 其 操作 结束 。 


实例 
实例 110 ae 


图 实例 说 明 


Application 对 象 是 JSP 的 一 个 内 置 对 象 , 当 服务 器 启动 时 自动 创建 直到 服务 器 关闭 。 本 实例 是 用 Application 
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对 象 的 setAttribute0 和 getAttribute0 方 法 来 实现 网 站 计数 器 功能 ， 运 行 结果 如 图 4.20 所 示 。 


第 位 访问 者 访问 者 IP 地 址 访问 时 间 
45 192.168.1.128 2006-10-9 11:12:38 
46 192. 168.1.64 2006-10-10 02:12:42 
7 192. 168.1.57 2006-10-11 03:12:44 
48 192. 168.1.57 2006-10-11 04:37:35 
9 127.0.0.1 2006-10-12 05:35:31 
您 是 第 4 为 访问 者? 
您 的 IP 为 : 127.0.0.1 
您 访问 的 时 间 为 : 2006-10-12 03:35:31 


图 4.20 ”记录 用 户 IP 地 址 和 时 间 的 计数 器 


图 关键 技术 


本 实例 应 用 了 request 对 象 的 getRemoteAddr0 方 法 ， 其 语法 格式 如 下 : 
getRemoteAddr() 
功能 :获得 用 户 的 他 地址 ， 返 回 一 个 字符 串 型 值 。 
I 器 
设计 过 程 
(1) 创建 一 个 对 数据 库 操作 的 DB 类 ， 关 键 代 码 如 下 : 
package com.count.Online; 
import java.sql.*; 
public class DB { 
Private Connection con; 
Private Statement stm:; 
Private ResultSet rs; 
Private String classname="com.microsoft.jdbc.sqlserver.SQLServerDriver"; 
Private String url="jdbe:microsoft:sqlserver://localhost:1433:DatabaseName=db_database07"; 
public DBOf} 
public Connection getConO{ 
ty{ 
Class.forName(classname); 
}catch(ClassNotFoundException e){ 
e.printStack Trace(); 
} 
ty{ 
con=DriverManager.getConnection(url."sa",. 
}catch(Exception e){ 
e.printStack Trace(System.er7); 
con=null: 


} 


Teturn con; 


3 
public Statement getStmedO{ 
try{ 
con=getCon(); 
stm=con.createStatement(ResultSet. TYPE_SCROLL INSENSITIVE; 
ResultSet.CONCUR_READ_ONLY); 
}catch(Exception e){e.printStackTrace(System.er7);} 
Teturn stm; 


} 
public ResultSet search(String sql){ 
getStmed(); 
tyt{ 
Is=stm.executeQuery(sq): 
}catch(Exception e){eprintStackTraceO:} 
Teturn rs; 


} 
public int dosql(String sq){ 
int 一 1: 


i=stm.executeUpdate(sq]): 
jcatch(Exception e){e.printStackTraceO:} 
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retumi; 
} 
} 
(2) 创建 一 个 CountOnline 类 , 在 该 类 中 调用 DB 类 中 的 dosql0 方 法 向 数据 库 中 增加 记录 , 关键 代码 如 下 : 
package com.count.Online; 
import java.sql.*; 
public class CountOnline { 
private String userip; 1 用户 中 地 址 
private String nowdate; // 用 户 访问 时 间 
Private int times: /网 站 的 访问 次 数 
Private DB db=new DBO: 
public CountOnlineO 全 
…// 省 略 了 属性 的 setXXXO 和 getXXX0 方 法 
public ResultSet adduserO{ 
ResultSet rs=null; 
String sql="insert into tb_IPcount values("+this.times+","+this.userip+™",”"+this.nowdatet+")"; /生成 SQL 语句 
ty{ 
db.dosql(sqD); /执行 SQL 语句 
rs=db.search("select * from tb_IPcount); /查询 表 中 的 记录 
}catch(Exception e){e.printStackTraceO:} 
retum rs; /返回 结果 集 


} 
public void dbcloseO{ 
db.closed0; /释放 资源 
} 
(3) 创建 一 个 供用 户 访问 的 页 面 indexjsp。 在 该 页 面 中 获得 网 站 的 访问 次 数 、 访 问 用 户 的 了 P 地 址 和 访问 
时 间 ， 然 后 调用 CountOnline 类 中 的 方法 进行 操作 ， 关 键 代 码 如 下 : 
<%(0 page import="java.util.Date.java.text.* java.sql.*" 9%6> 
<jsp:useBean id="mycount" class="com.count.Online.CountOnline"/> 
<jsp:useBean id="mydb" class="com.count.Online. DB"/> 
<% 
SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"): 
String sql="select MAX(user_order) from tb_IPcount as max"; /查询 最 后 一 次 登录 的 次 数 
ResultSet rs=mydb.search(sqD): 
TS.nextO; 
int max=rs.getInt(1); 
mydb.closedO; 
mycount.setTimes(max+1); /设置 用 户 的 访问 排名 
String ip=request.getRemoteAddr(); 
mycount.setUserip(ip); 1 设置 用 户 于 地址 
String nowdate=format.format(new DateO): 
Inycount,setNowdate(nowdate): /设置 用 户 的 访问 时 间 
rs=mycount.adduser(); /增加 该 用 户 的 访问 信息 
%> 
<table> 
<tr bgcolor="lightgrey"> 
<td align="center"> 第 N 位 访问 者 </td> 
<td align="center"> 访 问 者 他 地 址 </td> 
<td align="center"> 访 问 时 间 </td> 
<tr> 
<% 
while(rs.nextO){ 
%> 


<t> 
<td align="center"><%=rs.getInt("user_order")96></td> 
<td align="center"><%=rs.getString("user_ip")%></td> 
<td align="center"><%=rs.getString("user_time")%></td> 

A> 

<% 


} 
mycount.dbclose():; /关闭 数据 库 连接 
%> 
<t> 
<td align="center" colspan="3"> 
您 是 第 <%=max+19%> 位 访问 者 ! 
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<br> 

您 的 下 为: <%=ip%> 

<br> 

您 访问 的 时 间 为 : <%=nowdate%> 
<hd> 


<t> 
</table> 


图 秘笈 心 法 


在 使 用 Application 全 局 变量 时 需要 注意 的 是 ， 它 是 被 多 个 用 户 共享 的 ， 所 以 当 Application 对 象 正在 被 使 用 
时 应 避免 其 他 用 户 再 对 其 进行 操作 。 


实用 指数 : 食 食 但 


国 实例 说 明 
通过 本 实例 可 以 计算 出 有 多 少 个 卫 访问 网 站 ， 也 可 以 计算 出 每 个 他 | 
地 址 的 访问 次 数 。 运 行 本 实例 ， 程 序 将 记录 用 户 的 他 地址 和 访问 次 数 ， 运 I ES 
行 结果 如 图 4.21 所 示 。 大 5 
得 到 用 户 IP 地 址 后 ， 首 先 在 数据 表 中 查询 该 下 地 址 ， 如 果 存 在 则 更 en 
新 该 地 地址 的 访问 次 数 ， 否 则 插入 一 条 新 的 记录 并 将 访问 次 数 设 为 1。 图 4.21 只 对 新 用 户 计数 的 计数 器 
本 实例 中 使 用 getRemoteAddr0 方 法 获取 用 户 的 他 地 址 ， 其 语法 格式 
如 下 : 
Tequest.getRemoteAddr() 


功能 :获取 用 户 的 他 地 址 ， 返 回 值 为 字符 型 。 

其 中 参数 request 为 JSP 的 内 建 对 象 。 

获取 访问 过 的 人 数 实际 上 就 是 数据 表 中 的 记录 总 数 ， 这 里 可 以 使 用 ResultSet 类 的 getRow0 方 法 获得 ， 其 语 
法 格式 如 下 : 

TS.getRowO 

功能 : 获取 当前 记录 的 排列 行 号 ， 返 回 int 类 型 值 。 

其 中 参数 rs 为 ResultSet 类 对 象 。 


图 设计 过 程 
(1) 创建 一 个 对 数据 库 操 作 的 DB 类 ， 可 参见 实例 110 或 光盘 中 的 相关 代码 。 


(2) 创建 CountOnline 类 ， 在 该 类 中 调用 DB 类 中 的 search0 和 dosql0 方 法 对 数据 库 进 行 操作 ， 关 键 代 码 
如 下 : 


package com.count.Online; 
import java.sql.*; 
public class CountOnline { 
Private String Userip: 
private String nowdate: 
private int times: 
private DB db=new DBO: 
public CountOnlineO{} 
…// 省 略 了 属性 的 setXXXO 和 getXXX0 方 法 
public ResultSet checkuserO{ 
String sql="select * from tb_newusercount where user ip 一 "+this userip+"": 
ResultSet rs=null: 
try{ 
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rs=db.search(sql): 
if(rs.next0){ /如 果 访 问 者 的 卫 存在 于 数据 表 中 ， 则 更 新 访问 次 数 
this.times=rs.getInt("user times"J+1: 
sql="update tb_newusercount set user times="+this.times+" where user_ip="+this.userip+"™"; 
db.dosql(sql); 
jelsef /否则 插入 新 的 记录 
this.times=1; 
sql="insert into tb_newusercount values("+this.userip+",1)"; 
db.dosql(sqD); 


} 

Ts=db.search("select * from tb_newusercount"); /返回 所 有 记录 
}catch(Exception ej{feprintstackTraceO:} 
Tetum rs; 


public void dbcloseO{ 
db.closedO; 
本 


} 
(3) 创建 首页 indexjsp。 在 该 页 面 中 获得 访问 用 户 的 人 P 地 址 ， 然 后 调用 CountOnline 类 中 的 方法 进行 操 
作 ， 关 键 代码 如 下 : 
<%(@ page import="java.sqly" 96> 
<jsp:useBean id="mycount" class="com.count.Online.CountOnline"/> 
<% 
String ip=request.getRemoteAddr(); 
mycount.setUserip(ip); 
ResultSet rs=mycount.checkuser(); 
rs.lastO; 
int num=rs.getRowO; 
%> 
<table> 
<tr bgcolor="lightgrey"> 
<td align="center"> 访 问 者 他 地 址 </td> 
<td align="center"> 访 问 次 数 </td> 
</r> 
<% 
Ts.beforeFirstO 
while(rs.nextO){ 
%> 


<t> 
<td align="center"><%=rs.getString("user_ip")%></td> 
<td align="center"><%= Is.getInt("user times")96></td> 
<ltr> 
<% 
} 
%> 
<t> 
<td align="center" colspan="2"> 
您 的 他 为 : <%=ip%> 
<br> 
您 的 访问 次 数 为 : <%=mycount.getTimes096> 次 
<br> 
共有 <%=num%> 个 新 用 户 访问 过 本 页 
</td> 


图 秘笈 心 法 

在 使 用 ResultSet 类 的 getRow0 方 法 获取 总 记录 数 之 前 ， 应 使 用 ResultSet 类 的 last0 方 法 将 记录 指针 指向 最 
-条 记录 ， 其 语法 格式 如 下 : 

slastO 


功能 : 将 记录 指针 指向 最 后 一 条 记录 ， 返 回 boolean 类 型 值 。 


地 
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其 中 参数 rs 为 ResultSet 类 对 象 。 
ResultSet 类 能 够 使 用 last0 和 getRow( 方 法 的 前 提 是， 将 查询 结果 集 设 为 可 滚动 的 。 


图 实例 说 明 
运行 本 实例 后 将 会 显示 用 户 的 登录 时 间 ， 并 且 每 过 10 秒 刷新 一 次 
页 面 显示 用 户 的 停留 时 间 ， 实 例 运行 结果 如 图 4.22 所 示 。 Re 


| | 关键 技术 您 登录 的 时 间 为 : 2006-10-20 11;36:52 
当 用 户 访问 页 面 时 记录 用 户 的 访问 时 间 , 然后 求 出 当前 时 间 与 用 户 - 
登录 时 间 的 时 间 差 ， 即 为 用 户 停留 时 间 。 将 session 的 有 效 活动 时 间 设 ”图 422 统计 用 户 在 页 面 的 个 留 时 间 
置 为 稍 大 于 页 面 刷新 的 时 间 。 
本 实例 使 用 的 函数 和 方法 分 别 介 绍 如 下 。 
(1) Date 类 的 构造 函数 
语法 格式 如 下 : 
Date time=new Date0 
功能 ;获取 当前 时 间 。 
(2) Date 类 的 getTime0 方 法 
语法 格式 如 下 : 
DateObject getTimeO 
功能 : 获取 从 1970 年 1 月 1 日 午夜 起 的 毫秒 数 ， 返 回 long 类 型 的 数值 。 
其 中 参数 DateObject 为 Date 类 对 象 。 
(3) Date 类 的 toLocalString0 方 法 
语法 格式 如 下 : 
DateObjecttoLocalstring0 
功能 : 将 时 间 格 式 化 为 本 地 时 间 格 式 ， 返 回 值 为 字符 型 。 
其 中 参数 DateObject 为 Date 类 对 象 。 
(4) JSP 内 置 对 象 session 的 setMaxInactiveInterval0 方 法 


您 在 本 页 的 停留 时 间 为 : 0 小 时 86 分 15 秒 


功能 : 设置 session 对 象 的 有 效 活动 时 间 ， 该 时 间 以 秒 为 单位 。 
其 中 参数 num 表示 设置 的 秒 数 。 
(5) JSP 内 置 对 象 session 的 isNew0 方 法 
语法 格式 如 下 : 
session.isNew() 
功能 : 判断 当前 用 户 是 否 是 新 用 户 ， 返 回 boolean 类 型 值 。 
当 用 户 刷新 网 页 时 通过 此 方法 得 到 的 值 为 false。 
图 设计 过 程 
(1) 创建 StopTime.java 类 来 计算 用 户 停留 的 时 间 ， 关 键 代 码 如 下 : 
package com.count.stoptime: 
import java.util.*; 


public class StopTime { 
private int h=0; 
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Pprivate int m=0; 

private int s=0; 

Ppublic StopTimeO{} 

public void counttime(Date start){ 
Date end-new Date(); /获得 当前 时 间 
long howmuch=end.getTime()-start.getTime(); // 获 得 当前 时 间 与 登录 时 间 相差 的 毫秒 数 
h=(int)(howmuch/1000/60/60): 1/ 计算 小 时 
howmuch=howmuch-h*60*60*1000; 
mr=(int)howmuch/1000/60): /1/ 计 算 分 钟 
howmuch=howmuch-m*60*1000; 
s=(int)(howmuch/1000); // 计 算 停 留 的 秒 数 


} 
…// 省 略 了 属性 的 getXXX0 方 法 


} 
(2) 创建 首页 面 index.jsp， 用 于 显示 用 户 的 停留 时 间 ， 主 要 代码 如 下 : 
<%(0 page import="java.util.*" %> 
<ijsp:useBean id="mycounttime" class="com.count.stoptime.StopTime" scope="page"/> 
<% 
session.setMaxInactiveInterval(11); // 设 置 session 的 有 效 活动 时 间 为 11s 
Date now=new Date0: /获取 当前 时 间 
iflsession isNewO){ // 如 果 是 新 用 户 ， 记 录用 户 登录 时 间 
session.setAttribute("start",now); 
} 
else{ /调用 以 用 户 登 录 时 间 为 参数 的 counttime0 方 法 ， 计 算 停 留 时 间 
， mycounttime.counttime((Date)session.getAttribute("start")): 
%> 
<meta http-equiv="refresh" content="10"> <!-- 设 置 刷新 时 间 --> 
<table> 
<t> 
<td align="center"> 
您 登录 的 时 间 为 : <%=((Date)session.getAttribute("start")).toLocaleStringO%> 
</td> 
<jt> 
<t> 
<td align="center"> 
您 在 本 页 的 停留 时 间 为 ，<%=mycounttime.getHO%> 小 时 <%=mycounttime.getMO%> 分 
<%=mycounttime.getSO%> 秒 


图 秘笈 心 法 
设置 页 面 的 刷新 时 间 还 可 以 使 用 另 一 种 方法 一 一 response.setHeader("Refresh","10")， 该 方法 表示 10 秒 刷 新 
-次 页 面 。 
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图 实例 说 明 

session 在 网 络 中 被 称 为 会 话 。 由 于 HTTP 协议 是 一 种 无 状态 协议 , 也 就 是 当 一 个 客户 向 服务 器 发 出 请 求 时 ， 
服务 器 接收 请 求 并 返回 响应 后 ， 该 连接 结束 ， 而 服务 器 并 不 保存 相关 的 信息 。 为 了 弥补 这 一 缺点 ，HTTP 协议 
提供 了 session。 通 过 session 可 以 在 应 用 程序 的 Web 页 间 进 行 跳 转 ， 并 保存 用 户 的 状态 ， 使 整个 用 户 会 话 一 直 
存在 下 去 ， 直 到 关闭 浏览 器 。 但 是 ， 如 果 在 一 个 会 话 中 ， 客 户 端 长 时 间 不 向 服务 器 发 出 请 求 ，session 对 象 就 会 
自动 消失 。 这 个 时 间 取 决 于 服务 器 ， 例 如 ，Tomcat 服务 器 默认 为 30 分 钟 。 不 过 这 个 时 间 可 以 通过 编写 程序 进 
行 修改 。 使 用 session 对 象 一 个 最 常用 的 功能 就 是 记录 用 户 的 状态 。 下 面 将 通过 一 个 具体 的 实例 介绍 应 用 session 
对 象 实现 用 户 登 录 。 运 行 本 实例 ， 首 先进 入 的 是 用 户 登 录 页 面 ， 输 入 用 户 名 (mr) 和 密码 (mrsoft) 后 ， 单 击 
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“提交 ”按钮 ， 将 显示 如 图 4.23 所 示 的 系统 主页 ， 如 果 输 入 用 户 名 mr， 密 码 不 输入 mrsoft， 则 重新 返回 到 用 户 
登录 页 面 。 在 系统 主页 ， 单 击 “ 退 出 ” 超 链 接 ， 将 销毁 当前 session， 重 新 返回 到 用 户 登 录 页 面 。 


a Rerostt LO 


文件 四 “编组 四 查看 WW 收 训 sd ” 讲 


EE EE 


4.23 ”系统 主页 


关键 技术 


通过 session 对 象 可 以 存储 或 读 取 客户 相关 的 信息 ， 如 用 户 名 、 购 物 信息 等 。 这 可 以 通过 session 对 象 的 
setAttribute0 方 法 和 getAttribute0 方 法 实现 ， 下 面 分 别 进行 介绍 。 
(1) setAttribute() 方 法 
该 方法 用 于 将 信息 保存 在 session 范围 内 ， 语 法 格式 如 下 : 
session.setAttribute(String name,Object obj) 
参数 说 明 
@ name: 用 于 指定 作用 域 在 session 范围 内 的 变量 名 。 
@ obj: 保存 在 session 范围 内 的 对 象 。 
例如 ， 将 用 户 名 “无 语 ”保存 到 session 范围 内 的 usemame 变量 中 ， 可 以 使 用 下 面 的 代码 ;: 
session.setAttribute("username"," 无 语 "); 
(2) getAttribute0 方 法 
该 方法 用 于 获取 保存 在 session 范围 内 的 信息 ， 语 法 格式 如 下 : 
getAttibute(String name) 
参数 说 明 
name: 指定 保存 在 session 范围 内 的 关键 字 。 
例如 ， 读 取保 存 到 session 范围 内 的 usemame 变量 的 值 ， 可 以 使 用 下 面 的 代码 : 
session.getAttribute("username"); 
图 设计 过 程 
(1) 创建 index.jsp 文件 ， 在 该 文件 中 添加 用 于 收集 用 户 登录 信息 的 表单 及 表单 元 素 ， 关 键 代 码 如 下 : 
<form name="form1" method="post" action=""> 
用 户 名 : <input name="name" type="text”id="name” style="width: 120px"><br> 
密 &nbsp;&nbsp; 码 : <input name="pwd" type="password” id="pwd" style="width: 120px"> <br> 
<input type="submit” name="Submit" value=" 趣 交 "> 
</form> 
(2) 编写 dealjsp 文件 ， 在 该 文件 中 模拟 用 户 登录 (这 里 将 用 户 信息 保存 到 一 个 二 维 数组 中 )， 如 果 用 户 登 
录 成 功 ， 将 用 户 名 保存 到 session 范围 内 的 变量 中 ， 并 将 页 面 重 定 向 到 main.jsp 页 面 ， 否则 ， 将 页 面 重 定向 到 
index.jsp 页 面 ， 重 新 登录 。dealjsp 文件 的 具体 代码 如 下 : 
<%@ page language= "Java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> 


E29 Page import="java.util.*" %> 
String[][] userList={ {"mr","mrsoft"}, {"wegh","111"}, {"sk"."111"}}:; // 定 义 一 个 保存 用 户 列表 的 二 维 数组 
boolean flag—false: // 登 录 状态 
request.setCharacterEncoding("GB18030"); // 设 置 编码 
String usemame=request.getParameter("usemame"); /获取 用 户 名 
String pwd=request.getParameter("pwd"): /获取 密码 
for(int i=0:i<userList.length:i++){ /遍历 二 维 数组 
if(userList[i][0].equals(username)){ 1/ 判断 用 户 名 

if(userList[i[1].equals(pwd)){ /判断 密码 

flag=true: // 表 示 登 录 成 功 
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break: /跳出 for 循环 

} 
} 
if(flag){ // 如 果 值 为 rue， 表 示 : 
session.setAttribute("usemame",username); de session 中 
Tesponse.sendRedirect("main.jsp"); // 卡 转 到 主 ; 
jelset 
Tesponse.sendRedirect("index.jsp"); // 跳 转 到 用 户 登录 页 面 
} 


%> 
(3) 编写 mainjsp 文件 ， 在 该 文件 中 ， 首 先 获取 并 显示 保存 到 session 范围 内 的 变量 ， 然 后 添加 一 个 退出 
超 链 接 。main.jsp 文件 的 具体 代码 如 下 : 
<%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> 
<% 
String usermame=(String)session.getAttribute("username"); 。 // 获 取保 存在 session 范围 内 的 用 户 名 
%> 


<html> 

<head> 

‘<meta http-equiv="Content-Type” content="text/html; charset=GB18030"> 
<title> 系 统 主页 </title> 

</head> 


<body> 
您 好 ! [<%=username %>] 欢 迎 您 访问 ! <br> 
<a hre 人 "eritjgp 必 [退出 ]</a> 
</body> 
</html> 
(4) 编写 exitjsp 文件 ， 在 该 文件 中 销毁 session"， 并 重 定向 页 面 到 index.jsp 页 面 。exitjsp 文件 的 具体 代码 
如 下 时 


<9%@ page language="java" contentType="text/html; charset=GB18030" pageEncoding="GB18030"%> 
<% 


session invalidateO: /销毁 session 
Tesponse.sendRedirect("index.jsp"); // 重 定向 页 面 到 indexjsp 
%> 


图 秘笈 心 法 
虽然 客户 端 长 时 间 不 向 服务 器 发 送 请 求 后 ，session 对 象 会 自动 消失 ， 但 对 于 某 些 实时 统计 在 线 人 数 的 网 站 
(如 聊天 室 ), 每 次 都 等 session 过 期 后 , 才能 统计 出 准确 的 人 数 , 这 是 远 远 不 够 的 。 所 以 还 需要 手动 销毁 session 。 
通过 session 对 象 的 invalidate( 方 法 可 以 销毁 session， 语 法 格式 如 下 : 
session.invalidate():; 
session 对 象 被 销毁 后 ， 将 不 可 以 再 使 用 该 session 对 象 。 如 果 在 session 被 销毁 后 ， 再 调用 session 对 象 的 任 
何方 法 ， 都 将 报 出 Session already invalidated 异常 。 


实用 指数 : 室 食 | 


图 实例 说 明 


用 户 在 站 点 的 停留 时 间 可 以 通过 计算 从 session 对 象 的 创建 到 session 对 象 的 销毁 之 间 的 时 间 差 来 得 到 。 运 
行 本 实例 ， 系 统 会 在 用 户 下 线 时 把 用 户 的 登录 、 离 开 和 停留 时 间 写 进 数据 表 中 ， 如 图 4.24 所 示 。 


er ip Taser_ontine [user offtine [aser stoptine 
192. 168. 1.38 2006-10-13 10:43:37 2006-10-13 10:44:41 0 小 时 1 分 4 秒 
192. 168. 1. 12 2008-10-13 10:45:22 2006-10-13 10:45:43 0 小 时 0 分 21 秘 
192. 168. 1. 16 2008-10-13 10:45:53 2006-10-13 10:45:46 0 小 时 0 分 52 秒 
192. 168. 1,22 2006-10-13 10:46:49 2006-10-13 10:47:46 0 小 时 0 分 59 秒 
192. 168.1.14 2006-10-13 12:51:13 2006-10-13 12:51:39 0 小 时 0 分 26 秒 


192. 168. 1. 12 2006-10-20 11:46:48 2006-10-20 11:47:21 0 小 时 0 分 33 秒 
192. 168. 1.47 2006-10-27 05:12:12 2006-10-27 05:12:31 0 小 时 0 分 18 秘 
127.0.0.1 2008-10-27 05:14:54 2006-10-27 05:15:38 0 小 时 0 分 43 秘 


4.24 统计 用 户 在 站 点 停留 的 时 间 
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图 关键 技术 
本 实例 主要 继承 HttpSessionBindingListener 接口 监听 会 话 的 创建 与 销毁 。 继 承 该 接口 的 类 必须 实现 继承 的 
抽象 方法 valueBound(HttpSessionBindingEvent) 和 valueUnbound(HttpSessionBindingEvent)。 前 者 在 向 session 中 
存 入 实现 该 接口 的 类 对 象 时 触发 ， 后 者 在 从 session 移 除 该 对 象 时 触发 。 

图 设计 过 程 
(1) 创建 对 数据 库 进 行 操作 的 DB 类 文件 ， 关 键 代码 如 下 : 


public class DB { 
Private Connection con; 
private Statement stm; 
private ResultSet rs; 


private String classname="com microsoftjdbc sqlserverSQLServerDriver' 
private String url="jdbe:microsoft:sqlserver://localhost:1433:DatabaseName=db_databaseO08"; 


public DBO€} 
public Connection getConO{ 
ty{ 
Class.forName(classname); 
con=DriverManager. getConnection(url,"sa' 
}catch(Exception e){ 
e.printStackTrace(); 
} 


Teturn con; 


} 
public Statement getStmO{ 
ty{ 
con=getCon(); 
stm=con.createStatement(); 
}catch(Exception e){e.printStackTrace(System.er7);} 
Tetum stm; 
} 
public int dosql(String sqD){ 
int i=1; 


i=stm.executeUpdate(sql); 
}catch(Exception e){e.printStack Trace();} 
Tetum i; 


} 
} 


// 加 载 数 据 库 驱 动 类 


); // 获 取 数 据 库 连 接 


/获取 数据 库 连接 
/获取 stm 对象 


/返回 stm 对 象 

/| 执行 SQL 语句 

/获取 stm 对 象 

/| 执行 SQL 语句 ， 获 取 执行 结果 
// 返 回执 行 结果 


(2) 创建 StopTime 类 ， 该 类 用 来 计算 停留 的 时 间 ， 关 键 代码 如 下 : 
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public class StopTime { 
private int h=0; 
Private int m=0; 
private int s=0; 
Private Date start=null; 
private Date end=null: 


/创建 时 间 
// 结 束 时 间 


private SimpleDateFormat format=new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); 


public StopTimeO 人 

public void setStart(Date start){ 
this.start=start: 

. 

public void counttime(Date end){ 
his.end=end; 
long howmuch=this.end.getTime()-start.getTime():; 
h(int)(howmuch/1000/60/60): 
howmuch=howmuch-h*60*60*1000; 
m=(int)(howmuch/1000/60): 
howmuch=howmuch-m*60*1000: 
s=(int)(howmuch/1000): 


/计算 停留 时 间 的 方法 


// 计 算出 相差 的 毫秒 数 
// 计 算出 小 时 
/剩余 的 毫秒 数 

1/ 计 算出 分 钟 


// 计 算出 秒 数 


第 4 章 JSP 基础 与 内 置 对 象 


public String getTimesO{ 
String times=thish+" 小 时 "+this mt" 分 "+this st" 秒 ": 
Tetum times: 


和 
public String getstartO{ 
Tetum format format(start); 


4 
public String getEndO{ 
return format format(end): 
} 
} 
(3) 创建 UserLine 类 ， 该 类 实现 HTTP 会 话 的 监听 ， 关 键 代 码 如 下 : 
package com.count.stoptime; 
import java.util.*; 
import javax.servlet http HttpSessionBindingEvent: 
public class UserLine implements javax.servlet.http. HttpSessionBindingListener{ 
Private String userip; 
Private StopTime stoptime=new StopTime(); 
public UserLineO{ 


} 
…// 省 略 了 属性 的 setXXXO 和 getXXX0 方 法 
public void valueBound(HttpSessionBindingEvent arg0){ 
stoptime.setStart(new DateO); /记录 创建 的 时 间 
System.out println(this-userip+" 于 "+new DateO.toLocaleString0+" 上 线 ! "); 


} 

public void valueUnbound(HttpSessionBindingEvent arg0){ 
stoptime.counttime(new Date()); // 计 算 停 留 时 间 
System.out.printin(this.useript" 于 "+new DateO-toLocaleString0+" 下 线 ! 
writetimeO; // 将 信息 写 入 数据 库 中 


} 
public void writetimeO{ 
String starttime=stoptime.getStartO: 
String endtime=stoptime.getEnd(); 
String times=stoptime.getTimes(); 
String sql= "insert into tb_stoptime values("+starttimet+"™," 
DB db=new DBO; 
db.dosql(sqD; 
db.closed0: 
} 
(4) 创建 站 点 的 首页 面 mdexjsp。 当 用 户 访问 该 页 面 时 ， 先 设置 session 的 有 效 活动 时 间 ， 当 将 实现 会 话 
监听 的 类 对 象 存 入 session 对 象 后 ， 触 发 监听 器 的 valueBound0 方 法 记录 用 户 的 登录 时 间 ， 关 键 代码 如 下 : 
<9%@ page import="com.count.stoptime.*" 9%> 
<% 


session.set MaxInactiveInterval(10); /设置 session 的 有 效 活动 时 间 
String userip=request.getRemoteAddr(); // 获 得 用 户 的 中 地址 
UserLine userline=new UserLine(): /实例 化 一 个 监听 类 对 象 
userline.setUserip(userip); /设置 下 
session.setAttribute("logonuser",userline); /将 实例 化 的 监听 类 对 象 存 入 session 对 象 中 
%> 
<table> 


<tr bgcolor—"lightgrey" height="25"> 
<td align="center"> 
欢迎 登录 ! 
</td> 
</tr> 
<t> 
<td> 
本 实例 用 于 统计 用 户 在 站 点 的 停留 时 间 。<br> 
该 时 间 是 一 个 session 对 象 从 创建 到 结束 期 间 的 时 间 差 。<br> 
本 实例 应 用 了 Servlet 事件 监听 中 对 会 话 监听 的 方法 。<br> 
主要 是 通过 继承 HttpSessionBindingListener 接口 监听 对 HTTP 会 话 操作 ! 
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图 秘笈 心 法 

HttpSessionBindingListener 接口 能 够 监听 会 话 与 一 个 属性 绑 定 或 解除 绑 定 的 事件 ， 当 Web 应 用 把 一 个 属性 
与 会 话 绑 定 后 ，Servlet 容器 会 调用 该 接口 的 valueBound0 方 法 ， 当 Web 应 用 将 要 把 一 个 属性 与 会 话 解除 绑 定之 
前 ，Servlet 容器 会 调用 valueUnbound0 方 法 。 


初级 


实例 115 实用 指数 : 育才 


图 实例 说 明 
本 实例 中 判断 用 户 是 否 在 线 是 通过 对 HTTP 会 话 的 监听 来 实现 的 .运行 本 站 
实例 , 用户 可 以 输入 任意 用 户 名 进行 登录 ， 如 果 用 户 名 正在 使 用 ， 则 提示 “该 1! 
用 户 已 在 线 ”， 否 则 进入 如 图 4.25 所 示 的 页 面 。 现世 缀 上 天 4 用 户 各 * 主 天 
本 


图 关键 技术 


通过 继承 HttpSessionBindingListener 接口 实现 对 HTTP 会 话 的 监听 。 继承 
该 接口 的 类 必须 实现 继承 的 抽象 方法 valueBound(HttpSessionBindingEvent) 和 valueUnbound(HttpSessionBinding 
Event)。 前 者 在 向 session 中 存 入 实现 该 接口 的 对 象 时 触发 ， 后 者 在 从 session 移 除 该 对 象 时 触发 。 
图 设计 过 程 
(1) 创建 监听 HITP 会 话 的 OnLine 类 文件 ， 具 体 代 码 如 下 : 
package com.line; 
import java.util.*; 
import javax.serviet.*; 
import javax.servlet.http.HttpSession: 
import javax.servlethttp .HttpSessionBindingEvent' 
import javax.serviet.http. HttpSessionBindingListener; 
public class OnLine implements HttpSessionBindingListener{ 
Private String username: /1/ 用 户 输入 的 用 户 名 
Private boolean mark=true; 
Private Vector ve=new Vector(); 


public void setUsername(String usemame){ 
this.username=username; 


图 4.25 判断 用 户 是 否 在 线 


public void valueBound(HttpSessionBindingEvent se) { 
HttpSession session=se.getSession(); 
ServletContext sct=session.getServletContext(); // 该 对 象 可 被 所 有 页 面 共享 
ve=(Vector)sct.getAttribute("online"); 
if(ve—null){ 1// 服 务 器 启动 后 ， 第 一 个 用 户 进行 访问 
Vc=new VectorO: 
Ve.add(username): 
jelse{ 
if(ve.contains(username)){ /如 果 存 在 该 用 户 
mark=false; 


jelse 
ve.add(username):; 


} 
sct.setAttribute("online",ve): 


} 

public void valueUnbound(HttpSessionBindingEvent se) { 
HttpSession session=se.getSession(); 
ServletContext sct=session.getServietContextO:; 
ve=(Vector)sct. getAttribute("online"); 
if(ve!=nulD){ 
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vc.removeElement(this.usemame); // 用 户 下 线 时 移 除 该 用 户 
上 
public boolean getMarkO{ 
Teturn this.mark: 


上 
} 


(2) 创建 UserLogOn 类 文件 ， 其 中 的 checkuser0 方 法 用 来 验证 用 户 信息 并 返回 


在 用 户 名 不 为 空 的 情况 下 ， 调 用 OnLine 类 中 的 方法 进行 相应 的 操作 ， 关 键 代码 如 下 : 


package com.line; 
import javax.servlet.http.HttpSession; 
public class UserLogOn { 
Private String username; 
Private String backstr=""; 
private OnLine on=new OnLineO; 
public UserLogOnO{} 
…// 省 略 了 username 属性 的 setXXXO 和 getXXX0 方 法 
public boolean checkuser(HttpSession session){ 
boolean mark=true; 
if(this.username—nullllthis.usemame.equals("")){ 
this.backstr="<li> 请 输入 <b> 用 户 名 ! </b></li><br>"; 
mark=false; 
} 
if(mark){ 
on.setUsername(this.username); 
session.setAttribute("onlineuser",on); 
mark=on.getMarkO; 
if(!mark) 
this.backstr=" 该 用 户 已 在 线 !"; 
} 
Teturn mark; 


// 将 OnLine 监听 类 对 象 存 入 session 中 


public String getBackstrO{ 
Teturn this.backstr; 
} 
} 
(3) 创建 首页 面 index.jsp 供用 户 输入 登录 信息 ， 关 键 代码 如 下 : 
<form action="dologon.jsp"> 
<table> 
<tr bgcolor="lightgrey" height="30"> 
<td align="center"> 用 户 登录 </td> 
<t> 
<tr height="30"> 
<td align="center"> 
用 户 名 : <input type="text" name="username" size="30"> 
<td> 
</tr> 
<tr bgcolor="lightgrey"> 
<td align="center"> 
<input type="submit" name="logon" value=" 登 录 "> 
<input type="reset" name="clear" value=" 重 置 "> 
</td> 
</tr> 
</table> 
</form> 


-个 boolean 类 型 值 。 该 类 


(4) 创建 接收 Form 表单 的 页 面 dologonjsp。 在 该 页 面 中 调用 UserLogOn 类 中 的 checkuser0 方 法 来 验证 用 
户 身份 。 如 果 输 入 的 用 户 名 不 为 空 并 且 该 用 户 不 在 线 ， 则 转向 myline.jsp 页 面 ， 关 键 代 码 如 下 : 


<jsp:useBean id="mylogon" class="com line.UserLogOn"/> 
<% 
String username-request.getParameter("username"); 
iftusemame—null) 
Usermame=""; 
Usemame=new String(usemame.getBytes("ISO-8859-1"),"gbk"); 
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mylogon.setUsername(username); /设置 用 户 名 
这 mylogon.checkuser(session)){f // 如 果 用 户 名 不 为 空 并 且 该 用 户 不 在 线 
session.setAttribute("usemame",username); 
response.sendRedirect("myline.jsp"); 
} 
%> 
<table> 
<tr bgcolor="lighterey" height="30"> 
<td align="center"> 登 录 状况 </td> 
</> 
<tr height="50"> 
<td align="center"> 
<%=mylogon.getBackstr)%> 
</td> 


</tr> 
</table> 


(5) 创建 mylinejsp 页 面 ， 该 页 面 用 于 显示 用 户 的 在 线 情况 ， 关 键 代码 如 下 : 
<%@ page import="java.util.*+"96> 
<% 


session.setMaxInactiveInterval(10); 
Vector vec=(Vector)application.getAttribute("online"): 


<tr> 
<td width="6096" align="center" valign="middle">10 秒 内 没有 发 言 <br> 您 将 被 视 为 下 线 </td> 
</a> 
<t> 
<td align="center" valign="middle"> 
<% 
这 vec 一 nullllvec.sizeO0 一 0) 
out:printin(" 没 有 用 户 ! "); 
else{ 
if(vec.contains(session.getAttribute("username"))){ 
out.printin(" 您 已 经 上 线 ! 用 户 名 : "+session.getAttribute("username”)); 
} 
else 
out.println(" 您 没有 上 线 ! "); 
} 
%> 
</td> 
</tr> 
<tr bgcolor="lightgrey"> 
<td align="center" height="25" colspan="2"> 
<% 
if(session.getAttribute("usemame")=null) /表示 session 过 期 已 销毁 
out.printin(" 您 已 经 下 线 ! "); 
else 
if(vec.contains(session.getAttribute("usemame"))) 
out.printin("<a href='myline.jsp>[ 发 言 ]</a>"); 
else 
out.printin(" 请 先 登 录 ! "); 
%> 
</table> 
<% 
if(!vec.contains(session.getAttribute("usemame”))) 
out.println("<a href="index.jsp>[ 登 录 ]</a>"); 
%> 


图 秘笈 心 法 


本 实例 另外 设置 一 个 Vector 对 象 , 并 将 它 存 入 Application 对 象 中 ,以 用 来 存储 在 线 的 用 户 。 当 用 户 登 录 时 ， 
如 果 用 户 名 存在 于 Vector 对 象 中 ， 则 提示 “该 用 户 已 在 线 ” 信 息 ， 否 则 将 该 用 户 名 存 入 Vector 对 象 中 ; 当 用 户 
下 线 时 ， 从 Vector 对 象 中 移 除 该 用 户 名 。 
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人 初级 
买 例 116 
实例 实用 指数 : 人 福全 
国 实例 说 明 
本 实例 主要 实现 显示 正在 访问 网 站 人 数 的 功能 , 它 可 以 使 管理 员 知 道 网 站 当 i 
前 被 访问 的 情况 ， 以 此 来 了 解 网 站 的 受 关注 程度 。 运 行 本 实例 ， 页 面 中 将 显示 正 i 
在 访问 网 站 的 所 有 用 户 ， 并 统计 出 在 线 人 数 ， 实 例 运行 效果 如 图 4.26 所 示 。 | 
关键 技术 TO 
本 实例 应 用 的 方法 介绍 如 下 。 4.26 实时 统计 在 线 人 数 
(1) Vector 对 象 的 elements0 方 法 
语法 格式 如 下 : 


Enumeration em=VectorObject.elements() 
功能 : 返回 Vector 对 象 中 的 所 有 值 ， 其 结果 是 一 个 Enumeration 枚 举 对 象 。 
参数 说 明 
@ em: 表示 一 个 Enumeration 枚 举 对 象 。 
@ VectorObject: 表示 实例 化 的 Vector 对 象 。 
(2) EnumerationObject 对 象 的 nextElement0 方 法 
语法 格式 如 下 : 
EnumerationObject.nextElementO 
功能 : 遍历 枚 举 对 象 中 的 值 。 使 用 该 方法 获得 的 值 应 强制 转换 为 该 值 原 来 的 类 型 。 
(3) Enumeration 枚 举 对 象 的 hasMoreElements0 方 法 
语法 格式 如 下 : 
EnumerationObject.hasMoreElements() 
功能 :判断 枚 举 对 象 中 是 否 还 存在 值 ， 该 方法 返回 一 个 boolean 类 型 值 。 
其 中 参数 EnumerationObject 为 实例 化 的 枚 举 对 象 。 
图 设计 过 程 
(1) 创建 用 于 监听 HTTP 会 话 的 OnLine 类 文件 和 用 于 验证 登录 信息 的 LogOnNum 类 文件 。 由 于 这 两 个 类 
的 实现 技术 与 实例 115 中 的 OnLine 类 和 User LogOn 类 相同 ， 在 此 不 再 殉 述 。 
(2) 创建 一 个 首页 面 index.jsp 供用 户 输入 登录 信息 。 相 关 代 码 可 参见 实例 115。 
(3) 创建 接收 Form 表单 的 页 面 dologon.jsp。 相 关 代码 可 参见 实例 115 中 的 dologon.jsp 文件 或 光盘 。 
(4) 创建 onlinejsp 页 面 ， 该 页 面 用 于 显示 所 有 在 线 用 户 的 信息 ， 关 键 代码 如 下 : 
区 page import="java.util.*+"%0> 
session.setMaxInactiveInterval(10); 
Vector vec=(Vector)application.getAttribute("online"); 


%> 
<table> 


<t> 
<td align="left" valign="middle"> 
<table> 
<% 
if(vec—nulllvec.size0—0) 
outprintin("<tr><td align='center> 没 有 用 户 ! </td></tr>"); 
else{ /显示 所 有 在 线 用 户 
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iflusemame.equals(session getAttribute("username"))) 
out printin("<tr><td align—left'><li><font color=Ted>"+usermame+"</font></td></tr>"); 
lse 
E out.println("<tr><td align="left'><li>"+usermame+"</td></tr>"); 
JWwhile 
} 
%> 
</table> 
</td> 
< 
<tr bgcolor="lightgrey"> 
<td align="center" height="25" colspan="2"> 
<% 
iflsession.getAttribute("usermame")—nul) { 
outprintin(" 您 已 经 下 线 ! "); 
了 
else{ 
if(vec.contains(session.getAttribute("username")){ 
out.printin("<a href='onlinejsp>[ 发 言 ]</a>"); 
out.printin(" 在 线 人 数 "+vec size0+” 人 ! "); 
} 


elst 


© 
out.println(" 请 先 登录 ! "); 
} 


%> 
</table> 
<% 


if(!vec.contains(session.getAttribute("username”))) 
out.printin("<a href='index.jsp>[ 登 录 ]</a>"); 
%> 


图 秘笈 心 法 

本 实例 主要 是 通过 HttpSessionBindingListener 接口 来 监听 session 会 话 的 绑 定 状态 ， 当 用 户 登 录 时 ， 会 将 用 
户 名 保存 到 session 中 ， 这 时 就 会 触发 HttpSessionBindingListener 接口 的 valueBound0 方 法 ， 然 后 将 用 户 名 保存 
在 Vector 中 ， 再 将 Vector 存储 在 ServletContext 中 ， 最 后 在 页 面 中 读 取出 用 户 名 信息 并 显示 ， 此 时 设置 session 
的 有 效 期 为 10 秒 ， 当 session 超时 后 ， 就 会 触发 HttpSessionBindingListener 接口 的 valueUnBound( 方 法 ， 然 后 
从 Vector 中 移出 当前 的 用 户 。 


4.3 JSP 的 自 定 义 标 签 
JSP 中 设计 自 定义 标签 的 目的 就 是 为 了 实现 HTML 代码 的 重用 ， 许 多 公司 已 经 有 属于 自己 的 自 定义 标签 ， 


将 多 样 化 的 表格 、 复 杂 的 报表 等 封装 成 自 定义 标签 ， 并 逐步 完善 形成 一 个 平台 ， 在 此 基础 上 继续 进行 程序 开发 ， 
大 大 提高 了 开发 的 效率 以 及 风险 控制 能 力 。 
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图 实例 说 明 
本 实例 主要 使 用 标签 体 的 getBodyContent0 方 法 自 定义 一 个 标签 ,把 一 段 字母 按 大 写 输 出 ,运行 结果 如 图 4.27 
所 示 。 


图 关键 技术 


使 用 BodyTagSupport 类 ， 再 调用 PageContent0 方 法 ，BodyTag 接口 除了 常用 的 doStartTag0、doEndTag0 之 
外 ， 还 有 doInitBody0， 该 方法 每 次 处 理 完 标签 体 都 要 被 执行 ， 重 载 这 个 方法 来 处 理 自己 的 标签 体 ， 这 个 方法 通 
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常 返回 SKIP BODY TAG， 指明 没有 标签 体 需要 继续 处 理 ， 如 果 返 回 的 是 EVAL_ BODY _TAG， 则 这 个 标签 体 
被 再 次 处 理 ， 导 致 调用 doAfterBody0， 直 到 doAfterBody 返回 SKIP BODY。 


B TFET Windows mtemet opiorer (==).= lm) 
GSO/ -lolx) se 5 
2 HUD BEV CR TRD Sh 

六 和 E 关 。 国 赴 4t 的 富生 


HEILO WELCOME TO MR NETWORKSCHOOLIN! 


OO meet | RFR EE 全 00% 一 


图 4.27 按 大 写 输出 结果 


图 设计 过 程 


(1) 创建 BodyTagSupport 类 的 实现 类 TagBodyjava， 主 要 代码 如 下 : 
public class TagBody extends BodyTagSupport { 
public int doEndTag() throws JspException { 
String ct = this.getBodyContentO.getStringO: 
/获取 标签 体 的 代码 


{ 
/以 大 写 输出 
this.pageContext.getOutO.print(cttoUpperCaseO); 
} catch (IOException e) { 
} 
Tetum EVAL PAGE; 
} 


} 
(2) 创建 tagbody.tld 文件 ， 主 要 代码 如 下 : 
<tlib-version>1.0</tlib-version> 
<short-name>toUpperCase</short-name> 
<tag> 
<name>toupp</name> 
<tagclass>com.mr.bodycontent. TagBody</tagclass> 
<bodycontent>JSP</bodycontent> 
</tag> 
(3) 创建 index.jsp 页 面 ， 主 要 代码 如 下 : 
<body> 
<toUpperCase:toupp>hello welcome to mr networkschool!!!!</toUpperCase:toupp> 
<body> 


图 秘笈 心 法 


当 执行 doStartTag() 方 法 时 ， 返 回 值 若是 EVAL_ BODY _ BUFFERED， 则 不 会 输出 ;返回 值 如 果 是 EVAL_ 
BODY_INCLUDE， 则 会 输出 标签 体内 容 。 标 签 体 的 内 容 是 通过 setBodyContent0 方 法 添加 到 标签 类 中 的 ， 可 以 
使 用 getBodyContent0 方 法 得 到 标签 体 的 内 容 。 
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图 实例 说 明 
本 实例 定义 了 一 个 numbers 变量 进行 自 减 运算 ， 使 用 doAfterBody0 方 法 来 循环 然后 在 页 面 中 输出 苹果 ， 效 
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果 如 图 4.28 所 示 。 
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4.28 运行 结果 


图 关键 技术 


本 实例 主要 使 用 BodyTagSupport 类 的 doAfterBody0 方 法 ， 如 果 该 方法 返回 Tag.SKIP BODY， 就 不 再 执行 
标签 主体 的 内 容 ， 如 果 该 方法 返回 IterationTag.EVAL_ BODY_ AGAIN， 就 继续 重复 执行 标签 主体 的 内 容 。 
图 设计 过 程 
(1) 创建 实现 类 Mul 类 ， 用 doAfterBody0 方 法 来 控制 单 次 执行 还 是 多 次 执行 ， 主 要 代码 如 下 : 
public class Mul extends BodyTagSupport { 
private int numbers; // 定 义 变量 numbers 
public int doStartTag( throws JspException { 
numbers = 5; /初始 值 为 5 
Teturn super.doStartTag(); 


} 
public int doAfterBody() throws JspException { 
if (numbers-- > 0) { // 自 减 运算 
ty{ 
this.getPreviousOutO 
-println(this.getBodyContentO.getStringO); 
} catch (Exception e) { 
1 
retum EVAL BODY _ AGAIN: 
] else 
retum SKIP_BODY; 
} 
} 
. 
(2) 创建 multld 标签 ， 代 码 如 下 : 
<tlib-version>1.0</tlib-version> 
<short-name>tagmul</short-name> 
<jspversion>1.1</jspversion> 


<tag> 
<name>muls</name> 
<tag-class>com.zm.Mul</tag-class> 
<body-content>JSP</body-content> 
<tag> 


(3) 创建 index.jsp 页 面 ， 使 用 <pre> 人 迭代 ， 主 要 代码 如 下 : 
<h3 align="center> 
<pre><tagmul:muls> 苹 果 </tagmul:muls></pre> 
<h3> 


图 秘笈 心 法 
带 标签 体 的 标签 大 体 可 以 分 为 单 次 执行 (single Evaluation) 和 多 次 执行 (multiple Evaluation)。 单 次 执行 指 
的 是 标签 体 只 会 被 使 用 一 次 ， 而 多 次 执行 是 指标 签 体 可 以 被 使 用 多 次 。 
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实用 指数 : 依依 


实例 119 


图 实例 说 明 
本 实例 通过 自 定义 一 个 标签 为 Copyright 和 相对 应 的 java 类 来 实现 ， 此 类 必须 实现 Tag 接口 ， 在 JSP 中 执 

行 自 定义 的 标签 <taglib:copyright 人 来 输出 定义 好 的 版 权 内 容 ， 运 行 结果 如 图 4.29 所 示 。 
着 定义 S 才 板 芭 信 龟 -Vindovs Internet pplorer [= 于 加 


SOU- 
文件 四 Pr EW dma) TRAV wa) 
祖国 


@2005-2010 mingrisofi com 二 1CPiE8851274 号 


国 nemet | 条 昼 六 启 朋 伍 ” 二 lo% 


4.29 版 权 信息 


图 关键 技术 

所 有 的 标签 处 理 类 都 要 实现 JspTag 接口 。 这 个 接口 只 是 一 个 标识 接口 ， 没 有 任何 方法 ， 主 要 是 作为 Tag 和 
SimpleTag 接口 的 共同 接口 。 在 JSP 2.0 以 前 ， 所 有 的 标签 处 理 类 都 要 实现 Tag 接口 ， 实 现 该 接口 的 标签 为 传统 
标签 。Tag 接口 定义 了 所 有 传统 标签 处 理 类 都 要 实现 的 基本 方法 ， 包 括 以 下 几 种 。 
setPageContext(PageContext pc): 由 Servlet 容器 调用 该 方法 ， 向 当前 标签 处 理 对 象 ( 即 Tag 对 象 ) 传递 
当前 的 PageContext 对 象 。 
setParent(Tag t): 由 Servlet 容器 调用 该 方法 ， 向 当前 Tag 对 象 传递 父 标签 的 Tag 对 象 。 
getParent0: 返回 Tag 类 型 的 父 标签 的 Tag 对 象 。 
release(): 当 Servlet 容器 需要 释放 Tag 对 象 占用 的 资源 时 ， 会 调用 此 方法 。 
doStartTag(): 当 Servlet 容器 遇 到 标签 的 起 始 标志 时 ， 会 调用 此 方法 。 
doEndTag(): 当 Servlet 容器 遇 到 标签 的 结束 标志 时 ， 会 调用 此 方法 。 
图 设计 过 程 

(1) 创建 一 个 Copyright 类 ， 主 要 代码 如 下 : 
public class copyright implements Tag { 
Private PageContext pageContext: /在 JSP 中 显示 的 内 容 


public PageContext getPageContextO { 
return pageContext: 


口 


口 口 口 口 口 


Public void setPageContext(PageContext pageContext) { 
this.pageContext 王 pageContext: 


} 
public int doEndTagO throws JspException { // 标 签 结束 时 执行 
2 out = pageContext.getOutO: /获取 out 对 象 
二 已 定义 的 版 权 信息 
out.printin(ResourceBundle.getBundle("copyright").getString("copyright")): 
} catch (IOException e) { 
throw new JspException(e): 
轩 


return EVAL PAGE: 


public int doStartTagO throws JspException { // 标 签 开 始 时 执行 
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return SKIP BODY: 
a voidreleaseO { 


} 
public Tag getParentO { 
Tetum null; 


¥ 
Ppublic void setParent(Tag arg0) { 
} 
} 


(2) 创建 tld 标签 库 描述 文件 ， 在 /WEB-INF/ 下 新 建 taglib.tld 并 添加 以 下 代码 : 
<?xml version="1.0" encoding="UTF-8"> 
<taglib version="2.0" xmlns="http://iava.sun.com/xml/ns/j2ee” 
xmins:xsi="http://www.w3.org/2001/XMLSchema-instance” 
xsi:schemaLocation="http://java.sun.conmy/xml/ns/i2ee web-jsptaglibrary_ 2 0xsd"> 
<Hlib-version>1.0</tlib-version> 
<jspversion>1.1</jspversion> 
<short-name>taglib</short-name> 
<uri>http://mingrisoft.com/tags</uri> 
<tag> 
<name>copyright</name> 
<tagclass>com mrtags.copyright</tagclass> 
<bodycontent>JSP</bodycontent> 
</tag> 
</taglib> 


(3) 创建 copyrightjsp 页 面 ， 并 添加 刚 定义 好 的 标签 ， 主 要 代码 如 下 : 
<body> 


<taglib:copyright></taglib:copyright> 
dy> 


力 秘笈 心 法 


标签 处 理 类 的 对 象 (Tag 对 象 ) 由 Servlet 容器 负责 创建 。Servlet 容器 在 执行 JSP 文件 时 ， 如 果 遇 到 JSP 文 
件 中 的 自 定义 标签 ， 就 会 寻找 缓存 中 的 相关 Tag 对 象 ， 如 果 还 不 存在 ， 就 创建 一 个 Tag 对 象 ， 把 它 存放 在 缓存 
中 ， 以 便 下 次 处 理 自 定义 标签 时 重复 使 用 。 
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图 实例 说 明 


本 实例 介绍 如 何 从 服务 器 上 获得 图 片 文件 并 显示 给 客户 端 。 运 行 本 实例 ， 在 页 面 中 将 显示 服务 器 中 的 指定 
图 片 ， 如 图 4.30 所 示 。 


径 [ET 了 GET = 


图 4.30 图 片 浏览 标签 


134 


第 4 章 JSP 基础 与 内 置 对 象 


图 关键 技术 


通过 BufferedInputStream 建立 输入 流 完成 读 取 文件 的 操作 ， 其 语法 格式 如 下 : 


FileInputStream in = new FileInputStream(new File(fileName)) 
参数 说 明 
@ fileName: 文件 的 名 称 。 


@ new File(fileName): 建立 文件 名 称 为 fleName 的 文件 。 通 过 类 BufferedInputStream 建立 缓冲 输入 流 ， 它 


的 参数 为 FileInputStream。 


图 设计 过 程 


(1) 创建 imagetag.java 类 文件 ， 此 类 继承 自 SimpleTagSupport 类 。 在 该 类 中 分 别 定义 了 两 个 变量 fleName 
和 response， 表 示 图 片 的 名 称 和 给 予 客户 端的 响应 ， 并 在 doTag0 方 法 中 完成 图 片 数据 的 传输 ， 关 键 代码 如 下 : 


public class imagetag extends SimpleTagSupport { 
Private String fileName; 
Private HttpServletResponse response; 
public void setFileName(String fileName) { 
this.fileName = fileName; 
} 


public void setResponse(HttpServletResponse response) { 
this response = response; 


} 
public void doTagO{ 
try{ 
FileInputStream in = new FileInputStream(new File(fileName)); 
BufferedInputStream bufferin = new BufferedInputStream(in); 
OutputStream out = response.getOutputStream(); 
BufferedOutputStream bufferout = new BufferedOutputStream(out); 
byte b[] = new byte[1024*5]; 
for(int i =bufferin.read(b):i!=1;){ 
bufferout.write(b); 
bufferin read(b): 
} 
bufferout.flush(); 
bufferout.closeO; 
bufferin.closeO: 
outcloseO; 
in.closeO; 
} catch (FileNotFoundException e) { 
e.printStackTrace(): 
} catch (IOException e) { 
e.printStackTrace(); 
} 
} 
} 
(2) 创建 标签 描述 文件 exampletld， 相 应 地 描述 标签 类 的 配置 
<tlib-version>1.0</tlib-version> 
<short-name>filetag</short-name> 
<tag> 
<name>filetag</name> 
<tag-class>com.mr.imagetag</tag-class> 


<body-content>empty</body-content> 
<attribute> 


<rtexprvalue>true</rtexprvalue> 
<Jattribute> 
tag> 


/创建 输入 流 完成 读 取 文件 
/创建 缓冲 输入 流 参数 为 让 
/向 客户 端 输出 流 

// 创 建 缓冲 输出 流 参数 为 out 


， 关 键 代 码 如 下 : 
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(3) 在 web.xml 中 配置 引导 标签 类 的 地 址 和 tld 文件 的 位 置 ， 关 键 代码 如 下 : 


人 
<taglib-location>/WEB-INF/example .tld</taglib-location> 
</taglib> 
isp-config> 
(4) 创建 tagimagejsp 页 面 ， 它 的 作用 是 引入 自 定义 的 图 片 标签 ， 然 后 读 取 服 务 器 上 的 图 片 并 将 其 显示 在 
页 面 上 ， 关 键 代 码 如 下 : 
< 
<filetag:filetag response="$ {pageContext.response}" 


fileName='<%=pageContext.getServietContext|.getRealPath("Hdjpe”) 9%6> /> 


图 秘笈 心 法 
文件 流 读 取 完毕 后 ， 应 该 调用 其 close0 方 法 及 时 关闭 流 ， 以 免 造 成 不 必要 的 异常 和 占用 不 必要 的 内 存 空间 。 
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力 实例 说 明 
进行 Web 开发 或 者 网 站 设计 时 ， 数 据 下 载 是 经 常会 用 到 的 功能 ， 本 实例 通过 SimpleTag 类 设计 一 个 通用 的 
文件 下 载 标签 ， 完 成 文件 下 载 功能 。 运 行 本 实例 ， 如 图 4.31 所 示 ， 单 击 “ 下 载 ” 超 链接 即 可 下 载 指定 文件 。 


| 编号 | 文件 名 称 
01 ”JavaScript 快 速 查询 手册 
02 Spring 开 发 参考 手册 
[55 程序 员 超 级 开发 宝典 
jtySaL 4. 1. 0 中 文 参 考 手册 
J2EE 0A 项 目 开发 日 记 
J2EE 体 系 结构 设计 
lapache-tomcat-5. 5.16 
apache-tomcat-5. 5. 16-admin 
AdbeRdr60 中 文正 式 版 


图 4.31 自 定义 文件 下 载 标 签 


图 关键 技术 


在 制作 文件 下 载 标签 时 ， 最 关键 的 步骤 是 实现 文件 下 载 功能 ， 本 实例 实现 文件 下 载 的 基本 思路 如 下 : 
(1) 通过 request 类 中 的 getRealPath0 方 法 获得 文件 的 真实 路 径 ， 即 文件 在 服务 器 上 的 绝对 路 径 。 
(2) 通过 response 类 中 的 setHeader0 方 法 设置 客户 端 文 件 下 载 的 路 径 。 
(3) 通过 文件 类 BufferedInputStream 进行 数据 的 读 入 。 
(4) 通过 BufferedOutputStream.java 类 进行 数据 的 写 入 ， 实 现 文件 的 下 载 。 
图 设计 过 程 
(1) 创建 DownTag.java 类 文件 ， 此 类 继承 自 SimpleTagSupport 类 ， 关 键 代码 如 下 : 
import javax serviet.*; 
public class DownTag extends SimpleTagSupport { 
首先 ,创建 存放 文件 的 名 称 及 相应 的 HttpServletResponse 和 HttpServletRequest 类 对 象 的 属性 ， 并 且 设 置 相 
对 应 的 get0/set0 方 法 ， 关 键 代 码 如 下 : 
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private String fileName: 
Private String fileType; 
private HttpServletResponse response: 
private HttpServletRequest request:; 
private String filePath=null; 


public void setRequest(HttpServietRequest request) { 
this.request =request; 

} 

public void setFileName(String filePath) { 

this fleName = filePath; 


} 

public void setFileType(String fileType) { 

this fileType = fileType; 

} 

public void setResponse(HttpServletResponse response) { 


this.response = response; 
} 


/文件 的 名 称 

/文件 的 类 型 
/1/HttpServletResponse 的 属性 名 称 
//HttpServletRequest 的 属性 名 称 
/文件 的 路 径 


然后 ， 在 doTag() 方 法 中 编写 实现 文件 下 载 的 代码 ， 先 设置 客户 端 要 下 载 文件 的 位 置 ， 接 着 定义 输入 缓冲 流 


和 输出 缓冲 流 进行 文件 的 读 写 操作 ， 关 键 代码 如 下 : 

public void doTagO throws JspException{ 

filePath = request.getRealPath("/"); 

Tesponse.setHeader("Content-disposition", "attachment; filename=" +fileName + "." + fileType); 

wy{ 
fileName = new String(fileName.getBytes("ISO-8859-1"),"GBK"); 
String convertfilepath = filePath.trim() + "download\ + fileName.trim(| +"."+ fileType.trimO; 
File file = new File(convertfilepath replaceAllI\W\", "/")); 
FileInputStream input = new FileInputStream(file); 
BufferedInputStream bufferinput = new BufferedInputStream(input); 
ServletOutputStream out = response.getOutputStream(); 
BufferedOutputStream bufferoutput = new BufferedOutputStream(response.getOutputStream()); 
byte[] temp = new byte[2048]; 
int bytesRead; 
While ((bytesRead = (input.read(temp., 0, temp.length))) '= -1 ) { 

bufferoutput.write(temp, 0, bytesRead); 


} 

bufferoutput.flush|; 

if (input ‘= null) { 
input.close(); 

; (bufferoutput ‘= nulD) { 
out.closeO; 
bufferoutput.closeO; 


|! 
} catch (Exception e) { 
eprintStackTraceO: 
} 


} 


/文件 名 转换 编码 


// 蔡 换 路 径 中 的 斜 杠 
/实例 化 文件 输入 流 
// 带 缓冲 文件 输入 流 
/获取 文件 输出 流 
// 圭 装 文件 输入 流 


/刷新 
/关闭 输入 流 


/关闭 文件 输出 流 
/关闭 缓冲 输出 流 


(2) 在 WEB-INF 目录 下 编写 down.tld 文件 ， 完 成 标签 的 配置 ， 在 这 个 配置 中 设置 标签 中 所 使 用 的 类 文件 


以 及 这 个 类 中 的 私有 变量 ， 关 键 代 码 如 下 : 
<tag> 
<name>tagfile</name> 
<tag-class>com.DownTag</tag-class> 
<body-content>empty</body-content> 
<attribute> 
<name>fileName</name> 
<required>true</required> 
<rtexprvalue>true</rtexprvalue> 
</attribute> 
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(3) el 文件 中 添加 所 使 用 的 标签 ， 关 键 代码 如 下 : 


es 
<taglib-location>/WEB-INF/down.tld</taglib-location> 
/taglib> 
(4) 在 Web 根 目 录 下 建立 一 个 indexjsp 文件 ， 在 这 个 文件 中 连接 数据 库 并 显示 数据 库 中 要 下 载 的 文件 信 


关键 代码 如 下 : 
<form action="" method="post"> 
<table width="639" border="1" cellspacing="0" cellpadding="0"> 
<t> 


语 


<td width="54"> 编 号 <td> 
<td width="244"> 文 件 名 称 </td> 
<td width="94"> 文 件 大 小 </td> 

<td width="64"> 文 件 类 型 </td> 
<td width="92"> 文 件 路 径 </td> 
<td width="77"> 文 件 下 载 /td> 

<t> 

<c:forEach var="collection" items="$ {collection}"> 

<t> 

<td><c:out value="$ {collection[0]}"/></td> 
<td><c:out value="$ {collection[1]}"/></td> 
<td><c:out value="$ {collection[2]}"/></td> 
<td><c:out value="$ {collection[3]}"/></td> 
<td><c:out value="$ {collection[4]}"/></td> 
<td align="center"><a href="downfile.jsp?name=$ {collection[1]}&type=$ {collection[3]}"> 下 载 </a></td> 

<down:tagfile /> 
</> 
</c:forEach> 
</table> 
</form> 


(5) 在 Web 根 目录 下 创建 downfilejsp 文件 ， 完 成 文件 下 载 功能 ， 关 键 代 码 如 下 : 


<down:tagfile fileName="$ {param['name']}" fileType="$ {param['type']}" response=" Tequest="<%0=request%0>"/> 


图 秘笈 心 法 


在 实现 文件 的 下 载 功能 时 ， 应 用 该 自 定义 标签 即 可 ， 这 样 不 仅 可 以 提高 代码 的 可 重用 性 ， 而 且 能 够 提高 项 
目的 开发 效率 ， 避 免 在 JSP 中 编写 大 量 的 Java 代码 。 
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图 实例 说 明 

本 实例 将 介绍 如 何 通过 SimpleTag 来 制作 通用 的 标签 。 该 方法 实现 的 标签 可 以 移植 到 任何 一 个 JSP 页 面 中 ， 
实例 中 定义 的 标签 接收 SQL 查询 语句 作为 参数 ， 在 使 用 时 只 需 更 改 相 应 的 参数 即 可 实现 不 同 的 数据 查询 功能 ， 
实例 运行 结果 如 图 4.32 所 示 ， 页 面 中 显示 了 标签 返回 的 用 户 查 询 结果 。 
图 关键 技术 


通过 JspWriterjava 类 向 页 面 输出 表格 ， 然 后 在 表格 中 进行 数据 填充 。 获 取 JspWriter 对 象 的 语法 格式 如 下 : 
JspWiiter out = this.getJspContextO .getOutO: 
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= 男 21 | 2201048402154 团员 1594306++t 长 春 市 亚太 大 街 
李 四 男 22 | 2201048008171 团员 159Tereer 长 春 市 解放 大 路 
王 五 男 23 | 2201048502155 团员 135TB+e++t 长 春 市 青年 路 
起 六 党 18 | 2201048705134 党 员 BT96S¢#* 长 春 市 新 民 大 街 
4.32 自 定义 数据 查询 标签 运行 结果 
图 设计 过 程 
(1) 创建 DBCon.java 类 ， 用 于 创建 数据 库 连 接 ， 关 键 代 码 如 下 : 
public class DBCon { 
public static Connection getConnectionO{ 
Connection conection = null; 
ty{ 
Class forName("com .microsoftjdbc.sqlserver SQLServerDriver"); // 加 载 数据 库 驱 动 类 
conection = DriverManager. getConnection("jdbe:microsoft:sqlserver://localhost:1433:DatabaseName=db_database17 ","sa","");// 创 建 连接 
}catch(Exception e){ 
e.printStackTrace(); 
} 
Teturn conection; 


} 
} 


(2) 创建 TableTag.java 类 文件 ， 此 类 继承 自 SimpleTag 类 ， 关 键 代 码 如 下 : 


import java.io.*; 
import java.sql.*; 


public class TableTag extends SimpleTag: 


Support { 
/定义 两 个 变量 分 别 用 来 存储 表格 的 标题 名 称 和 查询 的 SQL 语句 


Private String tableTitle[]; 

public void setTableTitle(String[] title) { 
this.tableTitle = title; 

} 


Private String sqlSelect: 
public void setSqlSelect(String sqD) { 
this.sqlSelect = sql; 


} 

public void doTagO { 

/获取 数据 库 的 连接 并 执行 SQL 语句 
connection = DBCon.getConnection(); 


PreparedStatement pstmt = connection.prepareStatement(this.sqlSelect): 


java.sql.ResultSet resultset = pstmt.executeQuery(): 
ResultSetMetaData rsmd = resultset.getMetaData(); 


// 显 示 表格 的 标题 


out.write("<table border=] align 一 center><tr bgcolor=#669966" 


for (inti=0;i< tableTitle.length ;iH+){ 


ty{ 


out write("<td height=’28>" + tableTitle[i] + "</td>"): 


} catch (IOException e) { 
e.printStack TraceO: 
} 
} 
out.write("</tr>"): 
while(resultset .nextO){ 


out write("<tr align='center height=28px’ >"); 
i=1;i<=rsmd.getColumnCount| ;i+H){ 


for (i 


1/ 标题 名 称 定义 为 数组 


/定义 SQL 语句 


// 获 取 数 据 库 连 接 
/执行 SQL 语句 
/获取 结果 集 

// 获 取 表 结构 对 象 


align='center>"); 


out.write("<td>" + Tesultset getObject(D toStringO + "</td>"): 


} 
out-write("</tr>"); 


} 
out.write("</table>"): 


// 输 出 表 头 


/循环 输出 表 中 的 记录 
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}catch(Exception sq){ 
sql.printStack TraceO): 


} catch (SQLException ef 
printStackTrace(); 


e 
} 
} 


} 
(3) 在 WEB-INF 目录 下 建立 tabletag.tld 标签 文件 ， 描 述 自 定义 的 标签 及 配置 自 定义 标签 文件 ， 关 键 代码 
如 下 : 


<tag-class>com.TableTag</tag-class> 
<body-content>empty</body-content> 
<attribute> 
<name>tableTitle</name> 
i required> 
<rtexprvalue>true</rtexprvalue> 
</attribute> 
<attribute> 
<name>sqlSelect</name> 
<required>true</required> 
<rtexprvalue>true</rtexprvalue> 
</attribute> 
</tag> 
(4) 在 web.xml 配置 文件 中 引入 tabletag.tld 标签 文件 ， 关 键 代码 如 下 : 
<taglib> 
<taglib-uri>/tabletag</taglib-uri> 
<taglib-location>/WEB-INF/tabletag.tld</taglib-location> 
</taglib> 
(5) 创建 indexjsp 页 面 文件 ， 引 入 自 定义 的 标签 后 ， 先 定义 两 个 参数 用 来 为 标签 属性 赋值 ， 然 后 在 这 个 页 
面 中 使 用 该 标签 ， 关 键 代码 如 下 : 


<%0@ taglib uri="/WEB-INF/tabletag.tld" prefix="tagtable"96> 
<% 

String[] tableTitle = {" 姓 名 "," 性 别 "," 年 龄 "," 身 份 证 号 "," 政 治 面貌 "," 家 庭 电 话 "," 家 庭 地 址 "}: 
String sqlSelect = "SELECT top 6 name, sex, age, sfzhm, zzmm, jtdh, jtdz FROM docu_stu_info "; 
request.setAttribute("title",tableTitle); 

Tequest.setAttribute("sql",sqlSelect); 

%> 


<tagtable:tbg tableTitle="S$ {title}" sqlSelect="$ {sql}"/> 
国 秘笈 心 法 

在 实际 项 目 开发 过 程 中 ， 经 常 需 要 进行 数据 查询 ， 而 数据 查询 的 实现 过 程 都 是 类 似 的 ， 因 此 可 以 考虑 实现 
-个 公共 的 自 定义 查询 标签 ， 在 查询 数据 时 ， 调 用 自 定义 标签 即 可 ， 这 样 可 以 提高 开发 效率 。 

初级 
实用 指数 : 傅 铺 
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图 实例 说 明 
JSP 自 定义 标签 可 以 减少 JSP 页 面 中 嵌入 的 Java 脚本 ， 使 得 页 面 程序 易于 维护 ， 并 提高 代码 重用 率 。 本 实 
例 使 用 自 定义 标签 在 页 面 中 输出 一 个 用 户 指定 位 数 的 随机 数 ， 如 图 4.33 所 示 。 
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请 半 拉 要 生成 的 租 机 数 长 度 : [6 习 生态 


生成 的 随机 数 为 : 863751 


http: /Iwww mrbccd com 


图 4.33 ”生成 随机 数 


图 关键 技术 
本 实例 中 设计 的 标签 含有 一 个 length 属性 ， 这 就 需要 在 标签 处 理 类 中 定义 一 个 相对 应 的 属性 和 get、set 方 
法 。 另 外 ， 还 需要 在 标签 描述 文件 中 配置 这 个 属性 。 


图 设计 过 程 
(1) 编写 RandomNumjava 类 文件 ， 继 承 自 TagSupport 类 ， 并 在 该 类 中 编写 一 个 生成 随机 数 的 方法 


createRandom()， 在 doEndTag0 方 法 中 调用 该 方法 生成 一 个 随机 数 ， 关 键 代码 如 下 : 
public class RandomNum extends TagSupport { 
private static final long serialVersionUID = 1L; 
protected String length; /标签 属性 
Public String getLengthO { 
Tetum length; 
} 


public void setLength(String length) { 
this.length = length; 
} 


public int createRandomO{ // 根 据 长 度 生成 一 个 随机 数 
inti= (int)(Math.random(O)*(Math.pow(10, Integer.parseInt(length)))): 
Tetumi; 


} 
public int doEndTag() throws JspException { 
ty{ 
pageContext.getOut().print(createRandom()); // 获 取 输 出 对 象 ， 输 出 随机 数 
} catch (IOException e) { 
e.printStackTraceO; 
} 


retum super.doEndTag(): 
} 
(2) 在 WEB-INF 文件 夹 中 编写 mytag.tld 描述 文件 ， 关 键 代 码 如 下 : 
<?xml version="1.0" encoding="UTF-8"?> 
<taglib xmins="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd" 
Version="2.0"> 
<tlib-version>1.0</tlib-version> 
<short-name>mytag</short-name> 
<uri>http://www.tag.com/mytag</uri> 
<tag> 
<description> 生 成 随机 数 </description><!-- 标签 描述 --> 
<name>randomNum</name><!-- 标签 名 称 --> 
<tag-class>com.jwy.tag.RandomNum</tag-class><!-- 标签 路 径 -> 
<body-content>empty</body-content><!-- 标签 体 --> 
<attribute> 
<name>length</name><!-- 属性 名 称 --> 
<required>true</required><!-- 是 否 必须 指定 此 属性 -> 
<rtexprvalue>true</rtexprvalue><!-- 是 否 能 接受 JSP 表达 式 或 EL 表达 式 -> 
</attribute> 
/tag> 
</taglib> 
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(3) 在 web.xml 中 对 自 定义 标签 库 进行 引用 ， 关 键 代码 如 下 : 
i 


<taglib-uri>http://www.tag.com/mytag</taglib-uri> 
<taglib-location>/WEB-INF/mytag.tld</taglib-location> 


</taglib> 
lisp-config> 
(4) 编写 index.jjsp 页 面 ， 在 此 页 面 中 使 用 自 定义 标签 ， 关 键 代 码 如 下 : 
<body> 
<form action="index.jsp" method="post" name="f1"> 
请 选择 要 生成 的 随机 数 长 度 ; 
<select name="len"> 
<option selected="selected" value="0"> 请 选择 位 数 </option> 
‘<option value="1">1</option> 
<option value="2">2</option> 
‘<option value="3">3</option> 
<option value="4">4</option> 
‘<option value="5">5</option> 
‘<option value="6">6</option> 
<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
</select> 
<input type="submit" value=" 生 成 "> 
</form> 


<% 
if (request.getParameter("len")!=null&-&!"0".equals(request.getParameter("len"))) { 


%> 

生成 的 随机 数 为 : 

<mytag:randomNum length='<%6=request.getParameter("len")%6> /> 
<% 


} 
<body> 
图 秘笈 心 法 
根据 本 实例 的 实现 ， 读 者 可 以 使 用 自 定义 标签 生成 验证 码 。 
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图 实例 说 明 
本 实例 使 用 自 定义 标签 来 生成 产品 分 类 导航 目录 。 运 行 本 实例 ， 如 图 4.34 所 示 ， 单 击 产品 类 别名 称 就 可 以 
看 到 该 类 别 中 的 全 部 产品 。 


国 = 


4.34 产品 导航 目录 
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图 关键 技术 


如 果 要 在 页 面 中 使 用 自 定义 标签 ， 首 先 要 在 web.xml 文件 中 对 标签 库 进 行 引 用 声明 (具体 代码 见 设计 过 程 
步骤 (4))， 然 后 还 要 在 页 面 中 引用 标签 ， 关 键 代码 如 下 : 
"0@taglib prefix="mytag" uri="http://www.tag.com/mytag"%6> 
图 设计 过 程 
(1) 编写 MenuTag.java 类 文件 ， 并 让 该 类 继承 TagSupport 类 ， 然 后 重 写 父 类 中 的 doStartTag0 方 法 ， 并 在 
此 方法 中 调用 自 定义 显示 菜单 的 方法 ， 关 键 代 码 如 下 : 
public class MenuTag extends TagSupport { 


public int doStartTagO throws JspException { 
HttpServletRequest request = (HttpServletRequest) pageContext.getRequest0; /创建 request 对 象 


HttpSession session = request.getSession(); // 创 建 session 对 象 
List list = (List) session. getAttribute("menuList"); /| 获取 会 话 对 象 中 保存 的 List 列表 
loadMenu(list); 1/ 调用 生成 菜单 的 方法 
Tetum super.doStartTagO); 
} 
y 


(2) 在 MenuTag 类 中 编写 loadMenu0 方 法 ， 该 方法 将 List 列表 中 保存 的 菜单 内 容 显 示 在 页 面 中 ， 并 将 用 
户 选中 的 项 目 展开 ， 关 键 代 码 如 下 : 


Private void loadMenu(List menuList) { 


JspWriter out = pageContext.getOutO|; /获取 向 页 面 输出 的 out 对 象 
HttpServletRequest request = (HttpServletRequest) pageContext.getRequest(); // 创 建 request 对 象 
HttpSession session = request.getSession(); // 创 建 session 对 象 
ty{ 
if (menuList.isEmptyO) { 
out.write("<table><tr><td> 没 有 可 以 显示 的 菜单 <td></tr></table>"); 
j else{ 
for (inti= 0; i < menuListsizeO: i++) { /循环 List 列表 


List sList = (Lisb menuList.get(i); 
out write("<a href='index.jsp?id=" +i+ ">"+ sList.get(0) + "</a><br>"); 
if (pageContext.getRequest|.getParameter("id") != null) { 1/ 判断 是 否 被 选中 
if (Integer.parseInt(pageContext.getRequest().getParameter("id")) — i) { 
for (intj = 1;j < sList.sizeO: j++) { // 显 示 子 项 目 
out.write("é&nbsp; énbsp;" + sList.get(j) + "<br>"); 
} 


} 
} 
} catch (Exception e) { 
e.printStack Trace(); 
} 


} 
(3) 编写 mytag.tld 标签 描述 文件 ， 关 键 代码 如 下 : 


<?xml version="1.0" encoding="UTF-8"?> 
<taglib xmilns="http://java.sun.com/xml/ns/j2ee”" 
xmins:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee web-jsptaglibrary_2_0.xsd" 
Version="2.0"> 
<tlib-version>1.0</tlib-version> 
<short-name>mytag</short-name> 
<uri>http://www.tag.com/mytag</uri> 
<tag> 
<description> 生 成 菜单 </description> 
<name>nemuTag</name> 
<tag-class>comjwytag MenuTag</tag-class> 
<body-content>empty</body-content> 
/tag> 
</taglib> 


143 


Java Web 开发 实例 大 全 (基础 卷 ) 
(4) 在 web.xml 配置 文件 中 对 标签 库 进 行 引用 声明 ， 关 键 代码 如 下 : 


<isp-config> 
<taglib> 
<taglib-uri>http://www.tag.com/mytag</taglib-uri> 
<taglib-location>/WEB-INF/mytag.tld</taglib-location> 
</taglib> 
</isp-config> 


(5) 编写 index:jsp 页 面 文件 ， 首 先 引 入 自 定义 标签 库 ， 然 后 在 该 文件 中 初始 化 一 个 List 列表 对 象 并 保存 


到 session 对 象 中 ， 最 后 调用 该 标签 ， 关 键 代 码 如 下 : 
<%@page contentType="text/html" pageEncoding="GBK"%6> 
<%@page import="java.util.*"96> 
<%@taglib prefix="mytag" uri="http://wwwtag.com/mytag"96> 
<html> 
<body> 

<% 
if (session.getAttribute("menuList") — null) { 
List<List<String>> menuList = new ArrayList<List<String>>(); 
List<String> sListl = new ArrayList<String>0: 
sList1.add(" 硬 件 " 
sListl.add(" 显 示 器 "); 
sList1.add(" 主 机 "); 
sListl.add(" 显 卡 "); 
sList1.add("CPU"): 
sList1.add(" 内 存 "); 
sList1.add(" 硬 盘 "); 
menuList.add(sList]); 
List<String> sList2 = new ArrayList<String>(): 


sList2.add(" 音 箱 "); 
sList2.add(" 耳 机 "); 
sList2.add(" 摄 像 头 "); 
menuList.add(sList2); 
ooo /省 略 部 分 代码 
Session .setAttribute("menuList", menuList); 
} 
%> 
产品 导航 目录 
<br> 
<mytag:nemuTag /> 
</body> 
</html> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 编写 论坛 中 的 功能 菜单 ， 还 可 以 从 数据 库 中 读 取 菜 单 内 容 。 
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5.1 字符 串 处 理 


在 开发 Web 应 用 程序 时 ， 由 于 大 部 分 数据 都 是 以 字符 串 形式 表示 的 ， 所 以 避免 不 了 要 对 这 些 字符 串 数据 进 
行 处 理 。 例 如 ， 有 了 时 需要 将 小 写 金额 转换 为 大 写 ， 将 一 个 长 的 字符 串 进行 截取 ; 过 滤 字 符 串 中 的 空格 等 ， 这 些 
操作 在 程序 中 会 经 常用 到 。 本 节 将 介绍 一 些 常用 的 字符 串 处 理 的 JavaBean。 


高 级 | 
实用 指数 ， 友 交友 去， 
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图 实例 说 明 
运行 本 实例 后 ， 在 页 面 中 输入 数字 格式 的 金额 ， 然 后 单 击 “ 转 换 ” 按 钮 后 会 
行 结果 如 图 5.1 所 示 。 


示人 金额 的 大 写 汉字 形式 ， 运 


请 第 生息 转 搞 结 果 : 
金富 12345678934 转换 吉 亿 项 任 参合 肆 拾 伍 万 陆 任 染 合 撞 拾 玖 元 估 角 肆 分 


图 5.1 小 写 金额 转换 为 大 写 


图 关键 技术 
实现 本 实例 ， 首 先 需 要 在 JavaBean 类 中 定义 一 个 表示 大 写 数字 的 数组 和 一 个 表示 数字 位 数 的 数组 ， 代 码 


A 


ing submoneyCN[]={ 
然后 在 自 定义 的 JavaBean 方法 中 鱼 环 趟 理 数 字 字 符 中 的 每 一 位 数字 , 经 过 判断 将 每 位 数字 都 转换 为 大 写 汉 


字 ， 最 后 组 合成 一 个 完整 的 以 大 写 汉 字 表 示 的 金额 字符 串 。 
图 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 关 键 代码 如 下 : 
public class StringUtil { 
private String money; /| 转换 之 前 的 数字 金额 
Private String submoneyCN[]={"", /表示 数字 位 数 的 数组 
private String numberCNNU={f" 零 ," 会 "." 肆 "," 伍 "," 陆 "." 米 "." 担 "," 玖 "}; /大 写 数 字 的 数组 
public StringUtilO {} /默认 的 构造 方法 
… /此 处 省 略 了 formatCN 以 及 money 属性 的 getXXXO 和 setXXX0 方 法 
pe 
* 转换 数字 金额 为 大 写 金额 
* @return 返回 转换 后 的 大 写 金额 
4 
public String convertO{ 
int point=money.indexOf("."); 1/ 判断 字符 串 是 否 包 含 小 数 点 
if(point!—1){ 
String money1=money substring(0.point): /小 数 点 之 前 的 部 分 
String money1_1=(new StringBuffer(tmoneyl)reverseO)tostring0O: // 字 符 串 倒序 
String money2=money.substring(point+1); /小 数 点 之 后 的 部 分 
这 money2.lengthO<2){ 1/ 如 果 小 数 点 后 的 部 分 少 于 两 位 ， 用 0 补 齐 
if(money2.length)—0) money2="00' 
else money2+="0"; 
} 
else /如 果 小 数 点 后 的 位 数 大 于 两 位 ， 则 只 取 前 两 位 
money2=money.substring(point+1.point+3); 
int len = moneyl_1 .lengthO; // 字 符 串 反 转 之 后 ， 小 数 点 之 前 的 字符 位 数 
int pos=len-1 
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String sigle=""; 

boolean allhavenum=false: 

boolean havenum=false; 

boolean mark=false; 1/ 车 当前 数 为 0， 将 该 值 设 为 qe， 否则 设 为 false 
/4* 以 下 代码 为 读 出 小 数 点 左面 的 部 分 */ 


while(pos>—0){ 
1/ 截取 1 位 数字 ， 如 数字 1234.56， 将 左 侧 的 字符 串 反 转 ， 值 为 4321， 则 截取 的 值 为 1 
sigle=money1_1.substring(pos.pos+1): 
/t# 读 取 “ 亿 单元 ”的 代码 
* 假设 读 取 10024531042.34 
* 小 数 点 左面 反 转 后 为 24013542001 
* pos 的 初始 值 为 10 
* mark 的 初始 值 为 false 
* havenum 的 初始 值 为 false 
本 4 
ifpos>=S&&pos<12){ 
if(!sigle.equals("0")){ /如 果 当 前 值 不 为 0 
这 'marlo{ /如 果 当 前 值 的 前 一 位 数 不 为 0 
formatCN+—numberCNN[Integer.parseInt(sigle)]}+submoneyCN[pos%4]; 
于 


else{ /如 果 当 前 值 不 为 0， 但 该 值 的 前 一 位 数 为 0 
/如 果 在 当前 值 之 前 有 不 为 0 的 数字 出 现 
/该 条 件 用 来 处 理 用 户 输入 的 如 0012.34 的 数值 
if(allhavenum) formatCN+=" 零 "; 


formatCN+=numberCNN[Integer.par'selInt(sigle)]+submoneyCN[pos%%4]; 


mark=false; 
} 
havenum=true; 
//allhavenum 表示 小 数 点 左面 的 数 中 是 否 有 不 为 0 的 数字 
allhavenum=true; 


} 
else{ // 如 果 当 前 值 为 0 
mark=true; 


} 
// 如 果 当 前 数字 为 该 单元 最 后 一 位 ， 并 且 该 单元 中 有 不 为 0 的 数字 出 现 
if(pos%4—0&-&-havenum){ 
formatCN+4=" 亿 "; 
havenum=false: 
} 


… // 此 处 省 略 了 其 他 单元 的 转换 ， 其 转换 过 程 与 以 上 代码 “ 亿 单 元 ”的 转换 过 程 类 似 
Ppos--; 


} 
A* 碰 到 小 数 点 时 的 读 法 */ 
if(allhavenum) //allhavenum 表示 小 数 点 左面 的 内 容 中 是 否 有 数字 出 现 
formatCN+=" 元 "; 
else// 如 果 小 数 点 左面 的 部 分 都 为 0， 如 00.34 应 读 为 : 零 元 3 角 4 分 
formatCN=" 零 元 "; 
/4*# 以 下 代码 为 读 出 小 数 点 右面 的 部 分 */ 
if(money2.equals("00")) 
formatCN+=" 整 "; 
else{ 
/四 读 出 角 ， 如 120.34 读 为 : 1 佰 2 抬 元 零 3 角 4 分; 123.04 读 为 : 1 佰 2 拾 3 元 零 4 分 */ 
if(money2.startsWith("0")ll(allhavenumé-&-money1.endsWith("0")){ 
formatCN+=" 零 "; 


} 
if(!money2.startsWith("0")){ 
formatCN+=numberCNN[Integer.parseInt(money2.substring(0.1))]+" 角 ": 


} 
// 读 出 分 ， 如 12.30 读 为 : 1 拾 2 元 3 角 零 分 


formatCN+=numberCNN[Integer.parseInt(money2.substring(1))]H+" 分 "; 
| 


formatCN=" 输 入 的 格式 不 正确 ! 格式 : 888.00"; 
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return formatCN:; 
} 
} 
(2) 新 建 ndexjsp 页 面 ， 用 于 输入 数字 金额 ， 关 键 代码 如 下 : 
<form action="convertjsp” method="post"> 
<table> 


ey <td align="center" bgcolor="siyblue”> 请 输入 金额 </td> 
<tr height="25~> 
<td bgcolor="yellow”> 
金额 : <input type="text" name="money"id="money”"/> 
<input type="submit” value=" 厦 藤 ~ 
</t> 
</table> 
</form> 
(3) 新 建 convertjsp 的 处 理 页 ， 用 于 获得 表单 的 请 求 信 息 ， 并 调用 Bean 类 的 方法 转换 金额 ， 关 键 代 码 如 下 : 
<% 
String money=request.getParameter("money"); 


%> 
<isp:useBean id="strBean" class="com.lh.bean.StringUtil"></isp:useBean> 
<ijsp:setProperty property="money" name="strBean" value="<%=money %>"/> 
<table> 
<tr><td align="center" bgcolor="skyblue"> 转换 结果 : </td></tr> 
<tr height="25"> 
<td bgcolor="yellow"><jsp:getProperty property="money”" name="strBean"/></td> 
</t> 
</table> 


图 秘笈 心 法 


本 实例 的 实现 关键 是 如 何 找到 其 中 的 算法 规律 。 例 如 ， 读 取 123456789.34 这 样 一 个 数字 ， 可 以 将 数据 以 小 
数 点 为 界限 分 为 两 个 部 分 ， 小 数 点 左 侧 的 数字 从 个 位 起 每 4 位 组 成 一 个 单元 ， 然 后 像 读 取 个 、 十 、 百 、 千 的 方 
法 读 取 各 个 单元 ， 并 加 上 该 单元 的 单位 ， 小 数 点 右 侧 的 数字 可 以 直接 读 取 。 


图 实例 说 明 
本 实例 将 用 户 输入 的 回 车 和 空格 转换 成 能 够 在 JSP 页 中 输出 的 回 车 和 空格 。 运 行 本 实例 ， 在 输入 框 中 输入 
- 段 包 含 空 格 和 回 车 的 内 容 ， 提 交 表单 后 ， 在 显示 信息 页 中 的 内 容 会 包含 空格 和 回 车 ， 运 行 结果 如 图 5.2 所 示 。 


医 到 
5.2 ”转换 输入 文本 中 的 回 车 和 空格 


图 关键 技术 


本 实例 主要 应 用 String 类 中 的 replaceAll0 方 法 ， 将 用 户 输入 的 空格 和 回 车 替换 为 HTML 代码 中 的 <br> 和 
&nbsp， 该 方法 用 于 将 字符 串 中 的 某 个 子 字符 串 蔡 换 为 指定 的 字符 串 ， 其 语法 格式 如 下 : 

replaceAll(String regex, String replacement) 

参数 说 明 

@ regex: 字符 串 中 原来 的 子 字符 串 。 
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@ replacement: 替换 后 的 子 字 符 串 。 
图 设计 过 程 
(1) 新 建 StingUtil 的 JavaBean 类 ， 该 类 主要 包含 一 个 转换 空格 和 换行 符 的 方法 ， 关 键 代码 如 下 : 
public class StringUtil { 
Private String str; /要 蔡 换 的 字符 串 


public void setStr(String stD{f 
this str = str; 
} 


public String getStrO{ 
return replace(str); 
训 
* 替换 字符 串 的 方法 
+ @param str: 源 字 符 串 


* @return 蔡 换 后 的 字符 串 
和 


public String replace(String st){ 
newStrl = strreplaceAll(" ", "gnbsp:"); // 营 换 字符 串 中 的 空格 为 &nbsp 
newStr2 = newStrl replaceAll("rm", "<br>"): // 蔡 换 换行 符 为 <br> 
return newStr2; // 返 回 蔡 换 后 的 字符 串 


} 
} 
(2) 新 建 index.jsp 页 面 ， 用 于 在 表单 中 输入 包含 空格 和 换行 的 测试 内 容 ， 关 键 代码 如 下 : 
<form action="replacejsp” method="post”> 


<table> 
<tr><td align="center"> 请 输入 信息 </td> 


<td><textarea rows="5" cols="30" name="info” ></textarea></td> 


<td align="center"><input type="submit” value=" 存 从"/></td> 
</tr> 
</table> 
/form> 


(3) 新 建 replace.jsp 页 面 ， 该 页 面 用 于 获得 表单 信息 ， 并 调用 Bean 类 的 方法 实现 字符 串 中 的 空格 和 换行 


的 转换 ， 关 键 代码 如 下 : 
<body> 
<% 
String info = request.getParameter("info”"): 
%> 
<jsp:useBean id="strBean" class="com.Ih.bean.StringUtil"></isp:useBean> 
<jsp:setProperty property="str” name="strBean” value="<%=info %>"/> 
<table width="240"> 
<tr> 
<td align="center 必 查看 信息 结果 </td> 
< 
<t> 
<td height="100" valign="top”> 
<jsp:getProperty property="str”" name="strBean”/> 


</tr> 
</table> 


<Jbody> 
国 秘笈 心 法 

转换 空格 和 回 车 经 常 应 用 在 论坛 网 站 的 用 户 留言 板 中 。 例 如 ， 在 留言 板 中 ， 用 户 输入 留言 内 容 时 ， 可 能 会 
故意 输入 回 车 和 空格 ， 因 此 在 显示 用 户 的 留言 内 容 时 ， 应 该 包含 用 户 输入 的 回 车 和 空格 。 
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国 实例 说 明 


在 程序 开发 过 程 中 ， 字 符 串 类 型 的 数据 使 用 得 非常 频繁 ， 经 常 需要 获得 字符 串 的 实际 长 度 ， 然 后 可 以 根据 


该 字符 串 的 长 度 值 来 操作 字符 串 ， 本 实例 的 运行 结果 如 图 5.3 所 示 。 


5.3 计算 字符 串 的 实际 长 度 


图 关键 技术 


本 实例 主要 应 用 String 类 的 getLength 方法 、toCharArray 方法 和 getBytes 方法 。 如 果 字 符 串 中 不 包含 中 文 


字符 ， 那 么 使 用 getLength 方法 就 可 以 获得 字符 串 的 长 度 。 使 用 getLength 方法 时 ， 字 符 串 的 每 一 位 字符 的 长 度 
都 被 认为 是 1， 由 于 中 文字 符 占 两 位 长 度 ， 所 以 使 用 getLength 计算 出 的 包含 中 文字 符 串 的 长 度 是 不 对 的 。 


计算 包含 中 文字 符 串 的 长 度 时 ， 可 以 配合 使 用 toCharArray 方法 和 getBytes 方法 。 首 先 使 用 toCharArray 方 


法 将 一 个 字符 串 转换 为 字符 数组 ， 然 后 循环 这 个 字符 数组 ， 将 每 个 字符 通过 getBytes 方法 转换 为 字 节 数组 并 获 
取 字 节 数 组 长 度 ， 最 后 累计 每 个 字符 的 长 度 ， 从 而 获得 整个 字符 串 的 实际 长 度 。 


图 设计 过 程 
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(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 该 类 中 提供 的 方法 用 于 获得 字符 串 的 实际 长 度 ， 关 键 代 码 如 下 : 


public class StringUtil { 


Private String str; // 需 要 计算 长 度 的 字符 串 
private int strLength; // 字 符 串 的 实际 长 度 
public String getStrO { 

return str; 


} 
public void setStr(String str) { 
this.str = str; 


} 
public int getStrLengthO { 
char[] ¢ =strtoCharArrayO: // 将 字符 串 转换 为 字符 数组 
int 人 actualLength = 0; // 用 于 保存 每 个 字符 的 实际 长 度 
for(int i=0;i<c.length:it+){ 
factualLength =String.valueOfc[i]).getBytes0.length: // 获 得 字 节 数组 的 长 度 
if(factualLength—3){ // 当 程序 编码 为 UTF-8 时 ， 汉 字 实 际 的 字 节 长 度 为 3 
factualLength =2: /此 处 将 字 节 长 度 改 为 2 
} 
strLength+=factualLength; // 将 每 个 字符 的 长 度 累 加 ， 结 果 就 是 字符 串 的 总 长 度 
) 
return strLength; 
. 
public void setStrLength(int strLength) { 
this.strLength = strLength: 


3 
} 


(2) 新 建 indexjsp 网 页 ， 该 页 中 包含 一 个 提交 字符 串 信 息 的 表单 ， 关 键 代码 如 下 : 


<tr height="35"> 
<td align="center"> 请 输入 字符 串 : </td> 
<td> 


<input type="texi" name = "str”/> 
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<input type="submit” value=" 想 交 " 亡 
<htd> 
<ltr> 
</table> 
/form> 


(3) 新 建 getlengthjsp 页 ,在 该 页 中 首先 获得 表单 中 的 字符 串 ,然后 调用 StringUtil 类 的 方法 计算 字符 串 的 


长 度 ， 关 键 代 码 如 下 : 
<body> 


String str = request.getParameter("str"); 
%> 
<jsp:useBean id="strBean” class="com.lh.bean.String Util”></isp:useBean> 
<jsp:setProperty property= "Str" name="strBean” value="<%=str 96>"/> 
<table> 
<tr><td> 字 符 串 : </td> 
<td align="1eft"><jsp:getProperty property="str” name="strBean”/></td> 


<> 
<tr><td> 实 际 长 度 ，</td> 

<td><jsp:getProperty property="strLength" name="strBean"/></td> 
</> 


</table> 
</body> 


图 秘笈 心 法 


由 于 在 数据 库 中 保存 的 字符 串 类 型 的 值 是 按 实 际 的 字符 串 长 度 保存 的 ， 英 文 占 一 个 长 度 ， 而 汉字 字符 占 两 
个 长 度 。 如 果 保 存 到 数据 库 的 字符 串 长 度 超出 数据 库 中 定义 的 实际 长 度 ， 将 会 抛 出 异常 导致 程序 终止 。 因 此 在 
将 数据 保存 到 数据 库 之 前 ， 判 断 字符 串 的 实际 长 度 是 很 有 必要 的 。 
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国 实例 说 明 


在 实际 程序 开发 中 ， 经 常会 对 字符 串 进 行 截取 ， 如 在 论坛 网 站 的 帖子 列表 中 ， 当 某 个 帖子 的 标题 过 长 时 ， 
需要 截取 该 帖子 标题 的 部 分 内 容 显示 在 列表 中 ， 然后 其 余 内 容 以 省 略 号 代替 。 运 行 本 实例 ， 效 果 如 图 5.4 所 示 。 


明日 科技 有 限 公司 ! 您 好 ! 明 昌 科技 
司 ! 您 好 ! 明日 科 # 


图 5.4 字符 串 截 取 


图 关键 技术 


本 实例 主要 使 用 String 类 中 的 substring0 方 法 实现 字符 串 截 取 ， 其 语法 格式 如 下 : 

substring(int beginIndex.int endIndex) 

参数 说 明 

@ beginIndex: 指定 截取 字符 串 的 起 始 位 置 。 

@ endIndex: 指定 截取 字符 串 的 结束 位 置 。 该 参数 为 可 选 参 数 ， 如 果 不 指定 此 参数 ， 则 截取 时 是 从 起 始 位 
置 beginIndex 截取 到 字符 串 的 末尾 。 


国 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 在 该 类 中 实现 字符 串 的 截取 操作 ， 关 键 代码 如 下 : 
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public class StringUtil { 
Private String str; // 需 要 截取 的 源 字符 串 
Public String getStrO { 
if(str.lengthQ>50){ /如 果 字 符 串 的 长 度 大 于 50， 则 从 0 开始 截取 到 50， 之 后 的 以 省 略 号 代替 
return str.substring(0,50)+"..."; 
}: 


return str; 
ee 
this.str = str; 
i } 
(2) 新 建 indexjsp 页 ， 该 页 包含 一 个 输入 留言 内 容 的 表单 ， 关 键 代码 如 下 : 
<form action="substrjsp” method="post"> 
<table> 


<td align="center"> 请 输入 留言 内 容 : </td></tr> 


<td><textarea rows="5" cols="30" name="str "></textarea></td> 


<td align="center”><input -type="submit” value=" 起 区 "/><ltd> 


</table> 
</form> 


(3) 新 建 substrjsp 页 ， 用 于 处 理 表单 提交 过 来 的 留言 信息 ， 关 键 代 码 如 下 : 
<% 


String str = request.getParameter("str"); 
%> 
<ijsp:useBean id="strBean" class="com.Ih.bean.StringUtil"></jsp:useBean> 
<jsp:setProperty property="str”" name="strBean” value="<%=str 9%0>"/> 
<table width="200"> 
<t> 
<td width="60" valign="top "> 留言 内 容 : </td> 
<td align="1eft"><jsp:getProperty property="str” name="strBean”/></td> 


</table> 
力 秘笈 心 法 

在 StringBuffer 类 中 同样 包含 substring0 方 法 ， 该 方法 也 可 以 实现 字符 串 截取 。StringBuffer 用 于 表示 可 以 修 
改 的 字符 串 ，StringBuffer 是 与 Sting 同等 的 类 ， 它 表示 可 增加 和 可 编写 的 字符 序列 。 
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实例 实用 指数 : 信人 娘 食 广 : 


图 实例 说 明 


将 字符 串 转 换 为 数组 也 是 在 开发 中 常用 的 技术 ， 如 用 户 在 某 个 表单 页 中 选中 了 多 个 复 选 框 ， 在 处 理 这 些 选 
中 的 内 容 时 ， 需 要 获得 复 选 框 的 所 有 选中 内 容 ， 此 时 需要 使 用 JavaScript 方法 将 所 有 选中 的 内 容 累加 ， 然 后 将 这 
个 累加 后 的 字符 串 提交 ， 在 服务 器 端 获 得 该 字符 串 时 ， 就 需要 将 这 个 包含 多 个 复 选 框 内 容 的 长 字符 串 分 解 为 数 
组 ， 然 后 再 进一步 处 理 。 运 行 本 实例 ， 在 “您 喜欢 的 运动 有 : ”中 ， 选 中 多 个 复 选 框 内 容 ， 然 后 提交 表单 ， 最 后 
在 服务 器 处 理 页 中 将 复 选 框 的 内 容 转换 为 数组 并 显示 ， 运 行 结 果 如 图 5.5 所 示 。 

您 喜欢 的 运动 有 : 
回 打 税 球 国 吕 足球 列 打 乒乓 球 


TE 有 【 拉 这 球 】 【台中 球 】 打上 世 球 】 跑步 J 


5.5 字符 串 转换 为 数组 


加 网 


152 


第 5 章 JavaBean 技术 


图 关键 技术 


本 实例 主要 通过 String 类 的 split0 方 法 来 实现 将 字符 串 转 换 为 数组 。split0 方 法 包含 一 个 String 类 型 的 参数 
regex， 调 用 时 会 以 regex 为 字符 串 的 分 隔 符 ， 将 字符 串 分 隔 为 字符 串 数组 ， 代 码 如 下 : 
String str = "a.b.c.d"; 
String strArr[] = str.split(","); 
图 设计 过 程 
(1) 新 建 StringUtil 的 JavaBean 类 ， 在 该 类 中 实现 将 字符 串 转换 为 数组 ， 关 键 代 码 如 下 : 


public class StringUtil { 


Private String str /要 分 隔 的 字符 串 
Private String strArr[]: /分 隔 后 的 字符 串 数 组 
Private String listSeparator; /分 隔 符号 
public StringUtilO{} 1/ 默认 构造 方法 
public String getStrO { 

return str; 


3 
public void setStr(String str) { 
this.str = str; 


} 

/*e 返 回 分 隔 符 */ 

public String getListSeparatorO { 
return listSeparator; 


} 

/4# 设 置 分 隔 符 */ 

public void setListSeparator(String listSeparator) { 
this.listSeparator = listSeparator; 


} 
/** 返 回 字符 串 数组 */ 
public String[] getStrArrO { 
return str.split(listSeparator); // 根 据 分 隔 符 号 分 隔 字 符 串 为 数组 
} 


} 
(2) 新 建 index.jsp 页 ， 在 该 页 中 主要 包含 一 个 隐藏 域 和 多 个 复 选 框 的 表单 ， 关 键 代 码 如 下 : 
<form action="toarrayjsp" method="post”> 
<input type="hidden” name = "likes” id="ikes” /> 
<table width="220> 
<tr bgcolor="skyblue ”><td align="center> 您 喜欢 的 运动 有 : </td></tr> 
<t> 
<td> 
<input type="checkbox" name="ike" value=" 力 伪 现 "> 打 篮 球 
<input type="checkbox” name="like” value=" 凯 外 开 ~ 踢 足球 
<input type="checkbox” name="like” value=" 力 大 苹 刷 > 打 乒 乓 球 
<input type="checkbox” name="like” value=" 物 步 "> 跑步 
<input type="checkbox” name="like” value=" 力 为 毛 殊 > 打 羽毛 球 
<input type="checkbox” name="ike” value=" 游 冻 呈 游泳 
<td> 
<t> 
<tr bgcolor="skyblue”> 
<td align="center"> 
<input type="submit" value=" 想 交 " onclick="getSelectCheckbox0" /> 
<td> 


(3) 编写 “提交 ”按钮 的 onClick 事件 所 调用 的 JavaScript 方 法， 该 方法 用 于 获得 所 有 选中 复 选 框 的 内 容 ， 
并 将 该 值 赋 给 隐藏 域 ， 关 键 代 码 如 下 : 
<script type="text/avascript”> 
function getSelectCheckboxO{ 
Var checkObi = document.getElementsByName("like"): // 著 得 复 选 框 对 象 ， 该 对 象 是 个 数组 
a checkObij length :if 
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if(checkObij[i].checked—true){ // 如 果菜 个 复 选 框 为 选中 状态 
likeStr+=checkObj[i].valuet”","; // 将 选中 的 复 选 框 值 组 合 ， 并 以 “,” 分 隔 
} 


} 
/将 组 合 后 复 选 框 的 内 容 赋 给 隐藏 域 ， 表 单 提交 后 ， 获 得 的 是 该 隐藏 域 的 内 容 
document getElementById("likes").value = likeStr ; 
} 
-</script> 
(4) 新 建 toarrayjsp 页 ， 该 页 用 于 处 理 表单 请 求 ， 并 调用 JavaBean 方法 将 字符 串 转换 为 数组 ， 然 后 将 数组 
中 的 元 素 显示 在 表格 中 ， 关 键 代码 如 下 : 
<% 


String likes = request.getParameter("likes"); // 从 请 求 中 获取 以 “,” 分 隔 的 字符 囊 


%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 
puesBean id="strBean” class="com.Ih.bean.StringUtil”></isp:-useBean> 
- 对 StringUtil 类 的 对 象 strBean 的 str 属性 赋值 --> 
3 ‘setProperty property="str” name="strBean” value="<%=likes %>"/> 
- 对 StringUtil 类 的 对 象 strBean 的 listSeparator (分 隔 符 ) 属性 赋值 --> 
setProperty property="listSeparator" name="strBean” value=", "/> 
<% 


String likeAr{[] = strBean.getStrArrO; /分隔 后 的 字符 串 数组 


%> 
<table> 
<t> 
<td width="100" valign="top > 您 选择 的 运动 有 : </td> 
<% 
for(int i= 0:i<likeArr.length:i++){ 
%> 
<td align="Ieft"> 【<%=likeAr[i] %>) </td> 
<%} %> 
</tr> 
</table> 


图 秘笈 心 法 


将 字符 串 转换 成 数组 的 操作 在 实际 的 程序 开发 中 经 常用 到 ， 所 以 读者 应 该 掌握 。 
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图 实例 说 明 
在 实际 的 开发 过 程 中 , 经 常 需要 将 数组 转换 为 字符 串 。 本 实例 将 介绍 如 何 将 数组 元 素 转换 为 字符 串 并 显示 ， 
运行 结果 如 图 5.6 所 示 。 


| 
图 关键 技术 


将 数组 元 素 转换 为 字符 串 非常 简单 ， 主 要 通过 循环 数组 ， 然 后 在 图 5.6 将 月 份 数组 转换 为 字符 串 显 示 
循环 中 依次 将 每 个 元 素 取出 来 ， 再 把 所 有 元 素 拼接 成 一 个 字符 串 。 
图 设计 过 程 

(1) 新 建 名 为 StingUtil 的 JavaBean 类 ， 该 类 主要 用 于 将 数组 转换 为 字符 串 ， 关 键 代码 如 下 : 


Public class StringUtil { 


Private int intAnmf]: // 整 型 数组 
Private String str= // 将 数组 转换 后 的 字符 串 
public StringUtilO{} // 默 认 构 造 方法 
/+ 返回 字符 串 */ 
Public String getStrO { 
for(int i=0:;i<intArr length:i+H){ /循环 整 型 数组 
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str+=String.valueONintAr{[iD): // 将 每 个 数组 元 素 转换 为 字符 串 并 拼 成 字符 串 
ifGi<intArrlength-Df 
St /| 每 个 字符 串 以 “.” 隔 开 
} 
return str 


} 

/4 给 字符 串 赋值 */ 

public void setStr(String str) { 
this.str = str; 

} 

/*4 返 回 数组 */ 

Public int[] getIntArO { 
return intArr 


给 数 组 夺 值 
Publie void setIntArr(int[] intAr) { 
this intAmr = intArr: 

} 
} 
(2) 新 建 index.jsp 网 页 ， 在 该 页 中 定义 一 个 整 型 的 表示 月 份 的 数组 ， 然 后 调用 StringUtil 类 中 的 方法 将 数 

组 转换 为 字符 串 并 显示 在 表格 中 ， 关 键 代码 如 下 : 

<% 


int month[] =new int[12]: // 创 建 一 个 月 份 的 数组 
for(int i=0;i<month.length:i++){ // 通 过 循环 给 月 份 数组 的 元 素 赋值 
month[i] =i+1; 


} 
%> 
<!-- 使 用 useBean 动作 导入 StringUtil 类 -> 
<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil"></jsp:useBean> 
<!-- 对 StringUtil 类 对 象 中 的 intArr 数组 属性 赋值 -> 
<jsp:setProperty property="intAr7" name="strBean” value="<9%=month 96>"/> 
<table width="220> 
<tr bgcolor="skyblue’> 
<td align="center"> 一 年 中 的 月 份 : </td></tr> 
<t> 
<td align="center”> 
<!-- 获得 StringUtil 类 对 象 中 的 str 属性 值 ， 该 值 为 数组 转换 后 的 字符 串 --> 
jsp:getProperty property="str"" name="strBean"/> 


</tr> 
</table> 


图 秘笈 心 法 
将 数组 元 素 转换 为 字符 串 的 操作 在 实际 的 程序 开发 中 经 常用 到 ， 所 以 读者 应 该 掌握 转换 的 方法 。 
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图 实例 说 明 


在 实际 的 开发 过 程 中 ， 经 常 需要 将 整 型 值 转换 为 字符 串 。 本 实例 将 通过 几 种 方法 来 介绍 如 何 将 整 型 值 转换 
为 字符 串 型 ， 运 行 结果 如 图 5.7 所 示 。 


使 用 Sring volueOff) 方 法 转 痪 inf 值 - 
年 龄 :35 万 
使 用 Integer.toShing1) 方 法 转换 int 值 : 
2: 35: 


年 龄 岁 
使 用 ntegervalueOfll.toshringl) 方 法 转换 inf 值 : 
年 龄 3 35 岁 


5.7 将 整 型 年 龄 转换 为 字符 串 
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图 关键 技术 


将 整 型 值 转换 为 字符 串 ， 可 以 使 用 以 下 3 种 简便 的 方法 。 
(1) String.valueOfO 
String 类 的 valueOfO 方 法 实现 了 将 多 种 类 型 的 值 转换 为 字符 串 。 在 String 类 中 该 方法 实现 了 重 载 ， 可 以 转 
换 的 类 型 包括 boolean 类 型 的 值 、char 类 型 的 值 、char[] 类 型 的 值 、double 类 型 的 值 、float 类 型 的 值 、int 类 型 的 
值 、long 类 型 的 值 以 及 Object 类 型 的 值 。 
(2) Integer.toString() 
Integer 类 的 toString() 方 法 中 包含 一 个 int 类 型 的 参数 ， 当 使 用 该 方法 时 ， 可 以 直接 调用 该 方法 并 传 入 一 个 
int 类 型 的 参数 ， 即 可 将 int 值 转换 为 字符 串 。 
(3) Integer.valueOfO.toString() 
使 用 Integer 类 的 valueOfO.toString() 方 法 时 ,首先 将 int 值 转换 为 Integer 对 象 , 然后 再 调用 toString0 方 法 即 
可 转换 为 字符 串 。 


图 设计 过 程 


(1) 新 建 名 为 StingUtil 的 JavaBean 类 ， 在 该 类 中 实现 了 将 int 值 转换 为 字符 串 的 3 种 方法 ， 关 键 代 码 如 下 : 


Ppublic class StringUtil { 


Private int intValue=0; /| 转换 前 的 int 值 
Private String strValuel: /转换 后 的 字符 串 1 值 
Private String strValue2: /| 转换 后 的 字符 串 2 值 
Private String strValue3; /| 转换 后 的 字符 串 3 值 
public StringUtilO{} // 默 认 构 造 方法 
public String getStrValuel0 { 
return String.valueOfintValue); // 使 用 String 类 的 valueOf0 方 法 转换 


1 
public String getStrValue20 { 

return Integer.toString(intValue); /使 用 Integer 类 的 toString0 方 法 转换 
} 


public String getStrValue30 { 
return Integer.valueOfintValue).toString0: /使 用 Integer.valueOf.toString0 方 法 


ee /此 处 省 略 了 其 他 属性 的 set 方法 和 get 方法 


(2) 新 建 ndexjsp 页 ， 在 该 页 中 分 别 调用 StringUtil 类 的 这 3 种 方法 返回 字符 串 值 ， 并 显示 在 页 面 中 ， 关 
键 代码 如 下 : 
<% 
int userAge = 35; 


%> 
<!-- 使 用 useBean 动作 导入 StringUtil 类 --> 
<jsp:useBean id="strBean" class="com. Ih.bean. String Util"></jsp:useBean> 
<!-- 对 StringUtil 类 对 象 中 的 intValue 属性 赋值 -> 
<jsp:setProperty property="intValue” name="strBean” value="<%=userAge %>"/> 
<table> 
<tr bgcolor="siyblue”> 
<td align="center 必 使 用 String.valueOf0 方 法 转换 int 值 :</td> 
</tr> 
<t> 
<td align="center"> 
<!-- 获得 StringUtil 类 对 象 中 的 strValuel 属性 值 -> 
年 龄 1: <jsp:getProperty property="strValuel1” name="strBean"/> 岁 
</td> 
</t> 
<tr bgcolor="siyblue"> 
<td align="center> 使 用 Integer.toString0 方 法 转换 int 值 : </td> 
</t> 
<t> 
<td align="center"> 
<!-- 获得 StringUtil 类 对 象 中 的 strValue2 属性 值 -> 
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年 龄 2: <jsp:getProperty property="strValue2" name="strBean"/> 岁 
<itd> 
</tr> 
<tr bgcolor="skyblue"> 
<td align="center"> 使 用 Integer.valueOf0.toString0 方 法 转换 int 值 : </td> 
</tr> 
<t> 
<td align="center"> 
<!-- 获得 StringUtil 类 对 象 中 的 strValue3 属性 值 --> 
年 龄 3: <jsp:getProperty property="strValue3"name="strBean"/> 岁 
</td> 
</t> 
</table> 


图 秘笈 心 法 
在 实际 开发 过 程 中 ， 经 常 需要 将 整 型 值 转换 为 字符 串 类 型 ， 因 此 读者 应 该 至 少 掌握 本 实例 中 讲解 的 3 种 转 
换 方法 中 的 一 种 。 
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图 实例 说 明 
在 实际 的 开发 过 程 中 ， 有 时 需要 将 字符 串 值 转换 为 整 型 ， 如 用 户 填写 注册 表单 时 输入 的 年 龄 或 者 商品 信息 
表单 中 的 商品 数量 。 本 实例 将 介绍 如 何 把 一 个 字符 串 值 转换 为 整 型 ， 运 行 结 


果 如 图 5.8 所 示 。 er 
| | 关 键 技 术 mc 
将 字符 串 转换 为 整 型 值 ， 主 要 使 用 的 是 Integer 类 的 parselnt0 方 法 和 图 58 字符 曲 值 转换 为 整 型 值 
valueOf0 方 法 。 它 们 都 可 以 接收 一 个 String 类 型 的 参数 。parseInt0 方 法 返回 
-个 int 类 型 的 值 , valueOf0 方 法 则 返回 的 是 Integer 对 象 , 该 对 象 可 以 直接 作为 int 值 输出 , 也 可 以 通过 intValueO 


方法 转换 为 int 类 型 。 当 参数 不 符合 转换 条 件 时 ， 如 将 字符 串 a 转换 为 int 类 型 时 ， 会 抛 出 一 个 javalang. 
NumberFormatException 类 型 的 异常 。 


图 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 , 该 类 主要 实现 了 将 字符 串 转换 为 整 型 的 两 种 方法 , 关键 代码 如 下 : 
public class StringUtil { 
private int intValuel: // 第 一 种 方法 转换 后 的 int 值 
Private int intValue2: // 第 二 种 方法 转换 后 的 int 值 
Private String strValue:; // 被 转换 的 字符 串 
public StringUtilO{} // 默 认 构造 方法 
public int getIntValuel0 { 
return Integer.parseInt(str Value): // 使 用 Integer 类 的 parseInt0 方 法 转换 


站 
Ppublic int getIntValue20 { 
return Integer.valueOf str Value): /使 用 Integer 类 的 valueOf0 方 法 转换 
. 
public String getStrValueO { 
return strValue: 


} 

Public void setStrValue(String strValue) { 
this.strValue = strValue: 

} 

} 


(2) 新 建 index.jsp 页 ， 在 该 页 中 调用 StringUtil 的 两 种 转换 方法 ， 将 字符 串 转换 为 整 型 值 ， 关 键 代码 如 下 : 
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String strAge = "26"; 


%> 
<!-- 使 用 useBean 动作 导入 StringUtl 类 --> 

<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil”></isp-useBean> 

<!-- 对 StringUtil 类 对 象 中 的 strvalue 属性 赋值 -> 

<jsp:setProperty property="strValue” name="strBean” value="<%=strAge 9%6>"/> 
<table> 


<tr bgcolor="siyblue”> 
<td align="center ”> 使 用 Integer.parseInt0 方 法 转换 字符 囊 :</td> 


<td align="center”> 
<!-- 获得 StringUtil 类 对 象 中 的 intValuel 属性 值 --> 
年 龄 1: <jsp:getProperty property="intValuel1” name="strBean"/> 岁 
<ltd> 
<> 
<tr bgcolor="skyblue> 
<td align="center"> 使 用 Integer.valueOf0 方 法 转换 字符 串 : </td> 


<td align="center”> 

<!-- 获得 StringUtil 类 对 象 中 的 intValue2 属性 值 --> 

年 龄 2:，<jsp:getProperty property="intValue2” name="strBean"/> 岁 
</td> 


‘</table> 


图 秘笈 心 法 
在 实际 开发 过 程 中 ， 经 常 需要 将 字符 串 转换 为 整 型 。 如 用 户 注册 表单 中 的 年 龄 ， 通 过 表单 提交 默认 为 字符 
串 类 型 ， 因 此 在 服务 器 端 获取 到 年 龄 信息 时 ， 就 需要 将 其 转换 为 整 型 。 


为 指定 长 度 的 字符 串 
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图 实例 说 明 


本 实例 介绍 如 何 将 整 型 数据 格式 化 为 指定 长 度 的 字符 串 ， 如 果 位 数 不 够 ， 以 0 补 齐 ， 实 例 运行 结果 如 图 5.9 
所 示 。 


格式 化 之 前 的 数字 : 
序 符 串 : 000028 


28 


Er 格式 化 之 后 
图 5.9 将 整 型 值 转换 为 指定 长 度 的 字符 串 


图 关键 技术 


实现 数字 格式 化 ， 主 要 应 用 的 是 java.text.NumberFormat 类 ， 它 提供 了 一 些 用 于 将 Number 对 象 和 数字 格式 
化 为 本 地 字符 串 或 者 通过 语义 分 析 把 本 地 化 的 字符 串 转换 为 Number 对 象 的 方法 。 本 实例 用 到 的 几 个 方法 介绍 
如 下 。 

(1) NumberFormat 类 的 getmstance() 方 法 

功能 : 该 方法 用 于 返回 当前 默认 语言 环境 的 通用 数值 格式 。 

(2) NumberFormat 类 的 setMinimumIntegerDigits() 方 法 

功能 : 该 方法 用 于 设置 数 的 整数 部 分 所 允许 的 最 小 位 数 ， 如 果 位 数 不 够 ， 则 在 数字 前 用 0 补 齐 。 

(3) NumberFormat 类 的 format0 方 法 

功能 : 该 方法 用 于 将 数字 格式 化 为 字符 串 。 
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图 设计 过 程 


(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 该 类 主要 实现 了 将 数字 格式 化 的 方法 ， 关 键 代 码 如 下 : 


public class StringUtil { 

Private int intValue; 

Private String formatStr; 

Private int minimumDigit; 

public StringUtilO{} 

public int getMinimumDigitO { 
return minimumDigit; 


} 

public void setMinimumDigit(int minimumDigit) { 
this.minimumDigit = minimumDigit: 

} 

public int getIntValue( { 
return intValue: 


public void setIntValue(int intValue) { 
this.intValue = intValue; 


} 

public String getFormatStrO { 
NumberFormat nf =NumberFormat.getInstance(); 
nf.setMinimumIntegerDigits(minimumDigit); 
return nf.format(intValue).replace(",", ""); 


} 

public void setFormatStr(String formatStr) { 
this.formatStr = formatStr 

} 


} 
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// 将 要 格式 化 的 整 型 值 
/格式 化 后 的 字符 串 
/格式 化 后 字符 串 的 最 少 位 数 
/ 葡 认 的 构造 方法 


/获取 常规 数值 格式 对 象 
/设置 格式 化 数字 的 整数 部 分 最 少 位 数 
/返回 格式 化 的 字符 串 并 把 字符 串 中 的 “,” 苦 换 掉 


(2) 新 建 ndex.jsp 页 ， 该 页 主要 包含 一 个 表单 ， 关 键 代码 如 下 : 


<form action="formatjsp" method="post”> 
<table> 
<t> 


<td align="right"> 请 输入 要 格式 化 的 数字 : </td> 


<td><input type="text” name="num" /></td> 
</tr> 
<tr> 


<td align= yight"> 请 输入 格式 化 后 的 字符 串 长 度 : </td> 


<td><input type="text” name="Jength” /></td> 


</tr> 
<tr> 
</tr> 
‘</table> 
</form> 
(3) 新 建 formatjsp 的 处 理 页 ， 用 于 获得 表单 请 求 信息 ， 并 调用 
<% 
String num = request.getParameter("num"); 
String length = request.getParameter("length"); 
int n = Integer.parseInt(num); 
int 1 = Integer.parseInt(length); 
%> 


<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 


// 获 取 表 单 中 字符 串 格式 的 数字 
// 获 取 字符 串 格式 的 长 度 
/转换 为 int 类 型 


<ijsp:useBean id="strBean” class="com. Ih.bean. StringUtil”></jsp:useBean> 


<!-- 对 StringUtil 类 的 intValue 属性 赋值 --> 


<jsp:setProperty property="intValue” name="strBean” value="<%=n %>"/> 


<!-- 对 StringUtil 类 的 minimumDigit 属性 赋值 -> 


<jsp:setProperty property="minimumDigit” name="strBean” value—"<%=] %>"/> 


<table> 
<t> 
<td> 格 式 化 之 前 的 数字 : </td> 
<td align="left"> 


<! 一 获得 StringUtil 类 的 intValue 属性 值 -> 
<jsp:getProperty property="intValue” name="strBean”/> 


StringUtil 类 的 方法 格式 化 数字 ， 关 键 代 码 
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<htd> 
<ltr> 
<t> 
<td> 格 式 化 之 后 的 字符 串 : </td> 
td align="left"> 
<! 一 获得 StingUtil 类 的 formatstr 属性 值 -> 
<jsp:getProperty property="formatStr”” name="strBean"/> 
</td> 
</r> 
</table> 


图 秘笈 心 法 
实现 本 实例 可 以 不 用 NumberFormat 类 ， 通 过 + 连接 符 就 可 以 实现 ， 这 一 部 分 代码 比较 简单 ， 此 处 不 再 详细 
介绍 。 
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图 实例 说 明 
在 实际 的 开发 过 程 中 ， 有 时 会 遇 到 显示 长 整 型 数字 的 问题 ， 为 了 方便 用 户 查看 ， 需 要 将 数字 分 位 显示 。 本 


分 位 之 前 的 数字 : 
分 位 之 后 的 数字 : 


图 5.10 分 位 显示 长 数字 


图 关键 技术 


长 整 型 的 数字 可 以 用 long 类 型 表示 , 在 Java 中 的 long 类 型 最 大 值 为 19 位 的 数字 922,3372,0368,5477,5807， 
定义 时 应 该 在 数字 末尾 加 上 工 ， 和 否则 会 被 默认 为 int 类型， 代码 如 下 : 

long value = 12345678901234567891; 

可 以 应 用 StringBuffer 类 的 insert0 方 法 和 reverse0 方 法 将 一 个 long 类 型 的 数字 分 位 。 使 用 insert0 方 法 可 以 
动态 地 向 一 个 StringBuffer 对 象 类 型 的 字符 串 中 的 指定 位 置 插入 指定 的 字符 串 ， 由 于 分 位 是 从 数字 的 个 位 开始 ， 
所 以 需要 使 用 reverse0 方 法 将 字符 串 反 转 。insert0 方 法 的 语法 格式 如 下 : 

public StringBuffer insert(int offsetString str) 

参数 说 明 

@ offset， 表示 偏 移 量 ， 该 参数 值 必须 大 于 等 于 0， 且 小 于 等 于 此 序列 的 长 度 。 

@ str: 表示 要 插入 的 字符 串 。 


国 设计 过 程 
(1) 新 建 StingUtil 的 JavaBean 类 ， 在 该 类 中 实现 了 将 long 类 型 的 数字 转换 为 分 位 字符 串 ， 关 键 代 码 如 下 : 
public class StringUtil { 
Private long longValue: /要 分 位 的 数字 
private int digit /分 位 位 数 
Private String formatstr // 分 位 后 的 字符 串 
public StringUtilO{} /区 认 的 构造 方法 
public long getLongValueO { 
return longValue: 


} 

public void setLongValue(long longValue) { 
this.longValue = longValue: 

} 
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public int getDigitO { 
return digit; 


} 
Public void setDigit(int digit) { 
this.digit = digit; 
} 
public String getFormatstrO { 
StringBuffer sb = new StringBuffer(String.valueOflongValue)); // 将 long 类 型 的 值 转换 为 可 动态 修改 的 StringBuffer 对 象 
sb =sb.reverse(); // 将 字符 串 反 转 
int 1 = sb.length|; 
if(digit—0){ // 如 果 分 位 位 数 为 0， 设 置 字符 串 的 长 度 为 分 位 位 数 
digit=l; 
} 
int count = 0; 
/4* 计 算出 插入 的 分 位 符 个 数 */ 
if(l9%digit—0) 
count=]/digit-1; 
else 
count=l/digit; 
for(int i= 0;i<count:iH+){ 
sb =sb.insert((i+1)*digitti ,","); // 在 分 位 的 位 置 插入 分 位 符 
} 
return sb.reverse().toString(; 


J 

public void setFormatStr(String formatStr) { 
this.formatStr = formatStr; 

} 


} 
(2) 新 建 index.jsp 页 ， 该 页 主要 用 于 输入 表单 信息 ， 关 键 代码 如 下 : 
<form action="formatjsp" method="post”> 
<table> 
<tr> 
<td align="right"> 请 输入 数字 :</td> 
<td><input type="text" name="longValue” /></td> 
</tr> 


<td align="right"> 请 输入 分 位 位 数 :</td> 
<td><input type="text” name="digit” /></td> 


(3) 新 建 formatjsp 页 ， 该 页 用 于 获取 表单 信息 并 调用 StringUtil 类 的 方法 实现 长 数字 的 分 位 ， 关 键 代码 如 下 : 


<% 


String longValueStr = request.getParameter("longValue"); // 获 取 表 单 中 的 长 数字 的 字符 串 
String digit = request.getParameter("digit"): // 获 取 分 位 位 数字 符 串 
long longValue = Long.parseLong(longValueStr); // 将 长 数字 的 字符 串 转 换 为 long 类 型 
intd = Integer.parseInt(digit); // 将 分 位 位 数字 符 串 转换 为 int 类 型 


%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 
<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil"></isp:useBean> 
<!-- 对 StringUtil 类 的 longValue 属性 赋值 --> 
‘<jsp:setProperty property="longValue” name="strBean” value="<%=longValue %>"/> 
<!-- 对 StringUtil 类 的 digit 属性 赋值 -> 
<jsp:setProperty property="digit” name="strBean” value="<%=d 9%>"/> 
<table> 
<tr> 
<td > 分 位 之 前 的 数字 : </td> 
<td align="left"> 
<jsp:getProperty property="longValue” name="strBean"/> 
<td> 
</tr> 
<tr> 
<td > 分 位 之 后 的 数字 : </td> 
<td align="1eft"> 
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<jsp:getProperty property="formatStr”" name="strBean"/> 
<itd> 


</r> 
</table> 


图 秘笈 心 法 

对 于 本 实例 中 计算 分 位 位 置 的 表达 式 “(i+l)*digitri” 可 以 这 样 理解 ， 如 果 准 备 插入 第 一 个 分 隔 符 即 i=0， 
那么 应 该 跳 过 digit 个 字符 在 第 digit 位 置 处 插入 分 隔 符 ; 如 果 已 经 插入 了 一 个 分 隔 符 , 准备 插入 第 二 个 分 隔 符 时 ， 
则 应 该 跳 过 (i+1)*digit 个 字符 ， 因 为 在 这 之 前 已 经 插入 了 一 个 分 隔 符 ， 整 个 长 度 增加 了 一 位 ， 所 以 此 时 插入 分 隔 
符 的 位 置 应 再 加 上 分 隔 符 的 个 数 ， 即 (i+1)*digitti。 


实例 135 


力 实例 说 明 

在 开发 网 站 时 ， 为 了 避免 网 站 遭 到 SQL 语句 的 注入 式 攻 击 ， 应 该 考虑 到 过 滤 字 符 串 中 的 危险 字符 。 运 行 本 
实例 ， 当 在 文本 框 中 输入 “& ;*<> --/ %=#” 等 字符 时 ， 在 处 理 页 中 会 把 这 些 字符 过 滤 掉 ， 然 后 显示 出 过 滤 
后 的 字符 串 ， 运 行 效果 如 图 5.11 所 示 。 


请 输 人 字符 申 ; mridelelefrom user where name 过 小 之 前 的 宇 符 圳 : “mr';deletefrom user where name='q' 
LEF 过 小 之 后 的 字符 圳 : mrdelelefrom user where nameq 


5.11 过 滤 输 入 字符 串 中 的 危险 字符 


图 关键 技术 

本 实例 主要 应 用 String 类 提供 的 replaceAll0 方 法 ， 该 方法 用 于 过 滤 字 符 串 中 包含 的 所 有 指定 的 子 字符 串 ， 
其 语法 格式 如 下 : 

public String replaceAll(String regex, String replacement) 

参数 说 明 


@ regex: 表示 需要 替换 的 字符 串 。 
@ replacement: 表示 蔡 换 后 的 字符 串 。 
图 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 该 类 实现 了 过 滤 字 符 串 中 的 危险 字符 的 方法 ， 关 键 代码 如 下 : 
public class StringUtil { 


Private String sourceStr; 。// 源 字符 串 


private String targetStr: /替换 后 的 字符 串 
Public String getSourceStrO { 


return sourceStr; 
void setSourceStr(String sourceStr) { 
this.sourceStr = sourceStr; 
Do String Br 
/过 滤 字 符 & 
/过 滤 字 符 : 
/过 滤 字 符 ' 
// 过 滤 字 符 < 
/过滤 字符 > 
// 过 滤 字 符 / 
// 过 滤 字 符 % 
// 过 滤 字 符 = 
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return fargetStr: 


} 

public void setTargetStr(String targetStr) { 
this.targetStr = targetStr; 

} 


} 
(2) 新 建 ndex:jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代码 如 下 : 
<form action="/filterstr:jsp"” method="post”> 
<table> 
<tr> 
<td align="right"> 请 输入 字符 串 : </td> 
<td><input type="text" name="sourceStr” size="40"/></td> 


</tr> 
<td colspan="2" align="center"><input type="submit" value=" 过 游 "/></td> 
</table> 
</form> 
(3) 新 建 filterstrjsp 页 ， 用 于 获得 提交 过 来 的 表单 信息 ， 并 通过 StringUtil 类 来 实现 过 滤 危险 字符 ， 关 键 
代码 如 下 : 
<% 


String sourceStr = request.getParameter("sourceStr"); 
%> 


<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
Eee id="strBean”" class="com.Ih.bean.StringUtil"></isp:useBean> 
- 对 StringUtil 类 的 sourceStr 属性 赋值 --> 
本 SetProperty property="sourceStr” name="strBean”" value="<%=sourceStr %>"/> 
<table> 
<t> 
<td> 过 滤 之 前 的 字符 串 :</td> 
<td align="1eft"> 
<jsp:getProperty property="sourceStr” name="strBean”/> 


</t> 
<tr> 
<td> 过 滤 之 后 的 字符 串 : </td> 
<td align="1eft"> 
<jsp:getProperty property="targetStr”" name="strBean"/> 
</tr> 
</table> 


图 秘笈 心 法 
在 开发 网 站 的 用 户 登 录 模 块 、 信 息 添加 模块 以 及 信息 修改 模块 时 ， 为 了 防止 SQL 语句 的 注入 式 攻击 ， 应 该 
对 表单 中 的 数据 进行 特殊 字符 过 滤 。 


实例 136 初级 


实用 指数 : 雄 友 雪灾 


图 实例 说 明 

在 用 户 输入 表单 信息 时 ， 有 些 文本 框 的 内 容 不 允许 为 空 ， 而 且 输 入 的 字符 串 不 允许 包含 空格 。 在 读 取 数据 
库 中 的 数据 时 ， 如 果 有 些 字 段 被 允许 为 空 值 ， 那 么 在 读 取 该 字段 值 时 将 导致 程序 出 现 异常 ， 所 以 在 程序 中 应 该 
过 滤 掉 这 些 空 值 或 者 包含 空格 的 字符 串 ， 实 例 运 行 效 果 如 图 5.12 所 示 。 


请 输 和 字符 由 。 表 日 科 车 过 小 之 前 的 字符 串 ， 明日 科技 
E 本 过 让 之 后 的 字符 市: 明日 科技 


5.12 ”过 滤 字 符 串 中 的 空格 或 NULL 值 
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图 关键 技术 
本 实例 主要 应 用 String 类 中 提供 的 replaceAlI0 方 法 ， 该 方法 用 于 蔡 换 字符 串 中 指定 的 子 字符 串 。 
图 设计 过 程 
(1) 新 建 名 为 StingUtil 的 JavaBean 类 ， 该 类 用 于 过 滤 字符 串 中 的 空格 或 NULL 值 ， 关 键 代码 如 下 : 


public class StringUtil { 


private String sourceStr: // 源 字符 串 
Private String targetstr /过滤 后 的 字符 串 
public StringUtilOf} /默认 的 构造 方法 
public String getSourceStrO { 

return sourceStr; 


} 
Ppublic void setSourceStr(String sourceStr) { 
this.sourceStr = sourceStr; 


上 
public String getTargetStr) { 
if(sourceStr—nul){ // 如 果 源 字符 串 为 NULL 
sourceStr=""; 
} 
sourceStr = sourceStr.replaceAll(" ", ""); // 如 果 源 字符 串 中 包含 空格 则 蔡 换 
targetStr = sourceStr; 
return targetStr; 
} 
public void setTargetStr(String targetStr) { 
this.targetStr = targetStr; 
} 


} 
(2) 新 建 index.jsp 页 ， 用 于 输入 字符 串 信 息 ， 关 键 代码 如 下 : 
<form action="/filterstrjsp” method="post”> 
<table> 
<t> 
<td align="right"> 请 输入 字符 串 : </td> 
<td><input type="text” name="sourceStr”” size="30"/></td> 
</tr> 
<t> 
<td colspan="2" align="center"><input type="submit” value=" 坟 小 " /></td> 
</tr> 
</table> 
</form> 


(3) 新 建 filterstrjsp 页 ， 该 页 用 于 获取 用 户 输入 的 表单 信息 ， 并 通过 使 用 StringUtil 类 来 实现 字符 串 过 滤 ， 
关键 代码 如 下 : 
<% 


String sourceStr = request.getParameter("sourceStr"); 
%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
<ijsp:useBean id="strBean” class="com. Ih.bean. String Util”></jsp:useBean> 
<!-- 对 StringUtil 类 的 sourceStr 属性 赋值 --> 
<ijsp:setProperty property="sourceStr” name="str Bean” value="<%=sourceStr %>"/> 
<table> 
<tr> 
<td> 过 滤 之 前 的 字符 串 : </td> 
<td align="left"><jsp:getProperty property="sourceStr” name="strBean"/></td> 


<td> 过 滤 之 后 的 字符 串 : </td> 
<td align="1eft"><jsp:getProperty property="targetStr” name="strBean"/></td> 


国 秘笈 心 法 
为 了 防止 向 数据 库 中 插入 包含 大 量 空格 或 NULL 值 的 元 余数 据 ， 应 该 在 数据 插入 到 数据 库 之 前 ， 对 数据 中 
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可 能 包含 的 空格 或 NULL 值 进 行 过 滤 。 


实例 137 | 
实用 指数 : 友 女 廊 仙 : 
图 实例 说 明 


本 实例 可 以 获得 用 户 输入 汉字 的 拼音 的 第 一 个 字母 ， 这 里 涉及 的 是 常用 汉字 ， 一 些 特殊 汉字 没有 按照 这 个 
规律 编码 ， 请 根据 实际 情况 另行 判断 ， 实 例 运 行 效果 如 图 5.13 所 示 。 


请 给 人 汉字 村 


输入 的 汉字 : 明日 科技 
拼音 简 码 : 。 MRKJ 


图 5.13 ”获取 汉字 的 拼音 简 码 


图 关键 技术 


本 实例 首先 将 输入 的 字符 串 转换 为 数组 ， 然 后 循环 该 数组 ， 在 循环 中 使 用 String 类 的 getBytes0 方 法 将 每 个 
字符 都 转换 为 字 节 数组 ， 根 据 字 节 数组 的 长 度 来 判断 当前 这 个 字符 是 汉字 还 是 字母 。 

如 果 当 前 字符 为 汉字 ， 首 先 计 算出 该 汉字 的 Unicode 编码 ， 然 后 根据 汉字 的 Unicode 编码 范围 来 指定 当前 
汉字 的 首 字 母 。 

Unicode 字符 集 是 一 种 双 字 节 编码 方式 的 字符 集 ， 使 用 0 一 65535 之 间 的 双 字 节 无 符号 整数 对 每 个 字符 进行 
编码 ， 可 以 定义 65536 个 不 同 的 字符 。Unicode 字符 集 是 对 ASCII 码 字 符 集 的 扩展 ，Unicode 字符 集中 的 前 128 
个 字符 对 应 ASCII 码 字 符 集中 的 字符 并 且 与 之 具有 相同 的 编码 值 。 


图 设计 过 程 


(1) 新 建 StringUtil 的 JavaBean 类 ， 该 类 实现 了 获取 汉字 拼音 简 码 的 方法 ， 关 键 代码 如 下 : 


public class StringUtil { 


Private String sourceStr // 源 字符 串 
Private String shortPhonetic=""; / 苇 得 汉字 的 拼音 简 码 字符 串 
public String getSourceStrO { 


return sourceStr: 


} 
Public void setSourceStr(String sourceStr) { 
this.sourceStr = sourceStr: 


} 
Public String getShortPhoneticO { 
char cAm[] = sourceStrtoCharArrayO: /将 字符 串 转换 为 数组 
byte b[] ; 
String sp =""; /该 变量 用 于 在 循环 中 保存 单个 字 的 拼音 首 字母 
for(int i=0:i<cArr.length:it+){ 
b =String.valueOfcAn[i]).getBytesO: 
if(b.length>1){ // 如 果 字符 串 字 节 长 度 大 于 1， 则 为 汉字 
int code= 256*(b[0]+256)+(b[1]+256): // 根 据 字 节 值 获得 汉字 的 Unicode 无 符号 编码 
/加 以 下 代码 根据 汉字 的 编码 范围 指定 汉字 的 拼音 首 字 母 */ 
if (code > 一 45217 && code <= 45252) { 


} else if (code 盖 45253 && code <=45760) { 

} elseif (code >= 45761 && code <= 46317) { 
sp—"C"; 

} else if (code >— 46318 && code <=46825) { 

} else if (code >— 46826 && code <=47009) { 


} elseif (code >— 47010 && code <— 47296) { 
Sp="F"; 
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} elseif(code 盖 47297 &&c code <— 47613) { 
sp—"G": 
} elseif (code >— 47614 && code <— 48118) { 


sp="H"; 
} else if (code >— 48119 && code <— 49061) { 
sp="T"; 
} else if (code >— 49062 && code < 一 49323) { 
Sp—"K"; 
} else if (code >— 49324 &é&: code < 一 49895) { 
Ln: 
} else if (code >— 49896 && code <= 50370) { 
sp="M"; 
} else if (code >= 50371 &é: code <= 50613) { 
es 
} else if (code >— 50614 && code <= 50621) { 
sp—"O"; 
} else if (code >= 50622 && code <= 50905) { 
Wp 
} else if (code >= 50906 &&e code <= 51386) { 
} else if (code >= 51387 && code <= 51445) { 
sp="R"; 
} else if (code >— 51446 && code <= 52217) { 
sp="S"; 
} else if (code >= 52218 && code <= 52697) { 
sp="T", 


} else if (code >= 52698 && code <= 52979) { 


Sp="W"; 
} else if (code 盖 52980 &é& code <= 53640) { 
sp="X"; 
} else if (code 盖 53689 && code <= 54480) { 
Sp="Y"; 
} else if (code >= 54481 &é& code <= 62289) { 
sp="2"; 
} 
else{ // 如 果 为 英文 字母 ， 则 直接 返回 字母 本 身 
sp=String.valueONcAr[i)); 
} 
shortPhonetic +=sp; // 将 转换 后 的 每 个 汉字 拼音 简 码 连 接 成 一 个 字符 串 
} 
return shortPhonetic; 


} 
} 
(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 
<form action="getsjhort 加 hometicjsp" method="post"”> 
<table> 
<t> 
<td align="right"> 请 输入 汉字 : </td> 
<td><input type="text” name="sourceStr” size="30"/></td> 
</tr> 
<t> 
<td colspan="2" align="center"><input type="submit” value=" 阁 胸 玉 疗 蘑 厄 " /></td> 
</tr> 
</table> 
</form> 


(3) 新 建 getshortphonetic.jsp 页 ， 用 于 获得 表单 信息 ， 并 通过 StringUtil 类 获得 汉字 字符 串 的 拼音 简 码 ， 关 
键 代码 如 下 : 
<% 


String sourceStr = request.getParameter("sourceStr"); 


%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 

<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil”></isp:useBean> 

<!-- 对 StringUtil 类 的 sourceStr 属性 赋值 --> 

<jsp:setProperty property="sourceStr” name="strBean” value="<%=sourceStr 96>"/> 
<table> 
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<td> 输 入 的 汉字 : </td> 
<tdalign= "ef> 

<jsp:getProperty property="sourceSh” name="strBean”"/> 
<ltd> 


<td> 拼 音 简 码 : </td> 
<td align—"1eft"> 
<jsp:getProperty property="shortPhonetic”" name="strBean"/> 


</t> 
</table> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 设置 网 上 书城 中 显示 图 书 名 称 的 拼音 简 码 功能 ， 还 可 以 将 网 页 中 的 信息 按 中 文 拼音 
排序 。 


5.2 数据 验证 


在 程序 开发 过 程 中 ， 为 了 保持 数据 的 统一 完整 性 和 合法 性 ， 在 数据 保存 到 数据 库 之 前 ， 对 数据 进行 验证 这 
-环节 是 必 不 可 少 的 。 本 节 将 介绍 几 个 常用 的 数据 验证 的 JavaBean 实例 。 


图 实例 说 明 
在 网 站 注册 用 户 信息 时 ， 用 户 名 信息 往往 不 多 以 数字 或 者 其 他 特殊 字符 开头 。 本 实例 将 介绍 如 何 判断 字符 


串 是 否 以 指定 字符 开头 ， 运 行 结果 如 图 5.14 所 示 。 


请 办 好 | 明日 科 丢 


输入 的 字符 目 : 你 好 ! 明日 科技 
开头 的 字符 圳 : 你 好 ! 
验证 结果 : frue 


输入 的 字符 束 : 你 好 ! 明日 科技 
开头 的 字符 串 : 明日 
验证 结果 : false 


图 5.14 判断 字符 串 是 否 以 指定 字符 串 开头 


图 关键 技术 


本 实例 主要 应 用 String 类 中 提供 的 startsWith0 方 法 来 实现 , 该 方法 用 于 判断 字符 串 是 否 以 指定 的 前 级 开始 ， 
其 语法 结构 如 下 : 

Ppublic boolean startsWith(String prefix) 

参数 说 明 

prefix: 为 指定 的 开始 字符 串 ， 如 果 字符 串 以 prefix 开头 ， 则 方法 返回 值 为 tue， 否 则 返回 false。 

在 String 类 中 还 实现 了 一 个 同名 的 重 载 方法 ， 语 法 结构 如 下 : 

Public boolean startsWith(String prefix.int toffset) 

参数 说 明 

@ prefix: 为 开始 的 字符 串 。 

@toffset: 为 子 字符 串 出 现 的 索引 位 置 。 
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功能 : 该 方法 用 于 测试 此 字符 串 从 指定 索引 开始 的 子 字符 串 是 否 以 指定 前 级 开始 。 例如 , 字符 串 “abcdefg”， 
判断 第 二 个 索引 处 是 否 以 “c” 开 头 ， 代 码 如 下 : 


String str="abcdefg": 
str.startsWith("c", 2); 


图 设计 过 程 
(1) 新 建 名 为 StingUtil 的 JavaBean 类 ， 用 于 判断 字符 串 是 否 以 指定 的 子 字符 串 开 头 ， 关 键 代 码 如 下 : 


public class StringUtil { 
Private String startStr ; /指定 开头 的 字符 串 
Private String str: /被 判断 的 字符 串 
Private boolean check: // 判 断 结果 
public String getStartStrO { 
return startStr; 
} 
public void setStartStr(String startStr) { 
this.startStr = startStr; 


} 
public String getStr0 { 
return str; 


} 
public void setStr(String str) { 
this.str = str; 


ee boolean isCheckO { 
/使 用 startsWith0 方 法 判断 字符 串 是 否 以 指定 字符 开头 ， 如 果 是 则 返回 tue， 否则 返回 false 
return str.startsWith(startStr); 
} 
(2) 新 建 ndexjsp 页 ， 该 页 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 
<form action="checkjsp” method="post"”> 
<table> 
<t> 
<td align="ight"> 请 输入 字符 串 : </td><td><input type="fext”name="str” /></td> 
</r> 
<t> 
<td align="7ight”> 请 输入 开头 的 字符 串 :</td> 
<td><input type="text” name="startStr”” /></td> 
</tr> 


<t> 
<td colspan="2" align="center"><input type="submit” value=" 狗 证 "/></td> 
</r> 


</table> 


图 秘笈 心 法 
String 类 的 startsWith0 方 法 并 不 是 唯 i 寺 汪 还 可 以 通过 String 类 的 
indexOf0 方 法 来 实现 。indexOf0 方 法 包含 4 种 重 载 方法 ， 这 些 方法 的 说 明 请 参见 JavaAPI。 
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图 实例 说 明 


在 实际 开发 过 程 中 ， 有 时 需要 判断 一 个 字符 串 是 否 包含 英文 字母 。 本 实例 将 介绍 如 何 检查 一 个 字符 串 中 是 
否 包 含 英文 字母 ， 运 行 结果 如 图 5.15 所 示 。 


图 关键 技术 
本 实例 主要 应 用 String 类 的 toCharArray0 方 法 。 首 先 通过 该 方法 将 指定 的 字符 串 转换 为 字符 数组 ， 然 后 特 
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环 该 字符 数组 ， 已 知 大 写 英文 字母 的 ASCII 码 范围 在 65 一 90 之 间 ， 小 写 英 文字 母 的 ASCII 码 范 围 在 97 一 122 
之 间 ， 所 以 根据 字符 的 ASCII 码 值 就 可 以 判断 出 字符 串 中 是 否 包含 英文 字母 。 
请 输 人 字符 串 : 你 好 ! mrsofiware 明 日 软件 | 和 信守 Rl mrsoftware 明 日 软件 


| 去 挤 英 文 宇 母 后 的 宇 符 韦 ， 你 好 | 明日 软件 


是 否 


[EE 


图 5.15 检查 字符 串 中 是 否 包 含 英文 字母 
图 设计 过 程 
(1) 新 建 名 为 StingUtil 的 JavaBean 类 ， 在 该 类 中 包含 一 个 判断 字符 串 是 否 包 含 英文 字母 的 方法 ， 关 键 代 
码 如 下 : 
public class StringUtil { 
Private String str // 要 判断 的 字符 串 
Private boolean hasEn:; // 是 否 包含 英文 字符 


Public String getStrO { 
return str 
} 


public void setStr(String str) { 
this.str = str; 
} 


public boolean isHasEnO { 
char cArr[] = str.toCharArrayO); // 将 字符 串 转 换 为 字符 数组 
boolean b =false; 
StringBuffer sb =new StringBuffer(' 
StringBuffer sb2 =new StringBuffer(" 
for(int i=0:i<cArrlength:i+H){ 
int ascii = (inbcArr[i]; // 强 制 转换 可 以 直接 得 到 字符 的 ASCI 码 
// 英 文字 符 的 ASCII 码 范 围 ， 大 写字 母 A~z 的 范围 是 65~90， 小 写字 母 a~z 的 范围 是 97 一 122 
if((ascii>=65&&ascii<=90)||(ascii>=97 8&8eascii<=122)){ 
sb.append(cArr[i]); // 将 每 个 英文 字母 添加 到 StringBuffer 对 象 中 
} 
else{ 
sb2.append(cArr[i]); 
} 


, 
if(!sb.toStringO.equals("")) // 如 果 保 存 英 文字 母 的 字符 串 不 为 "， 说 明 该 字符 串 包含 英文 字母 
hasEn=true; 


else 
hasEn=false: 
return hasEn; 
} 
public void setHasEn(boolean hasEn) { 
this.hasEn = hasEn; 
} 


} 
(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代码 如 下 : 
<form action="check,jsp” method="post"> 
<table> 
<tr> 
<td align="right"> 请 输入 字符 串 : </td> 
<td><input type="text” name="str” size="30"/></td> 


</tr> 
<td colspan="2" align="center"><input type="submit" value=" 共 辣 "/></td> 
Li 
</form> 
(3) 新 建 check.jsp 页 ， 用 于 获得 表单 信息 ， 并 通过 StringUtil 类 中 的 方法 判断 字符 串 是 否 包含 英文 字母 ， 
关键 代码 如 下 : 


<% 
String str = request.getParameter("str"); 
%> 


<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
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<jsp:useBean id="strBean” class="com.Ih.bean.SiringUiil”></isp:useBean> 
<!-- 对 StringUtil 类 的 str 属性 赋值 -> 
‘<jsp:setProperty property="str" name="strBean” value="<%=str 96>"/> 


<table> 
<tr> 
<td align="right"> 输 入 的 字符 串 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 str 的 属性 值 -> 
‘<jsp:getProperty property="str" name="strBean"/> 
td> 
</tr> 


<tr><td align="right"> 是 否 包 含 英 文字 母 : </td> 
<td> 


<!- 从 StringUtil 对 象 中 获得 hasEn 的 属性 值 -> 
<jsp:getProperty property="hasEn” name="strBean"/> 
<td> 
<t> 
<t> 
<tdalign=might> 去 掉 英 文字 母后 的 字符 串 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 cnStr 的 属性 值 -> 
<jsp:getProperty property="cnSir" name="strBean"/> 
td> 


</table> 
图 秘笈 心 法 


通过 String 类 的 hashCode0 方 法 也 可 以 实现 本 实例 ， 在 类 的 main0 方 法 中 编写 如 下 代码 : 
证 
for(int i=0;i<cArr length:iH+){ 

int code = String.valueOf(cAr[i]).hashCodeO); 

System.out.printin(code); 


} 
以 上 代码 执行 后 ， 会 分 别 输出 a、b、c、d 的 ASCII 码 值 。 
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实用 指数 ， 让 页 丰 | 


图 实例 说 明 
在 实际 开发 过 程 中 ， 有 时 需要 判断 一 个 字符 串 是 否 包含 数字 。 本 实例 将 介绍 如 何 判断 字符 串 是 否 包含 数字 ， 
其 运行 效果 如 图 5.16 所 示 。 


请 输入 字符 囊 


输入 的 宇 符 圳 : 明日 1234 科 技 | 
是 否 包含 数字 ， frue 
去 掉 数 字 后 的 宇 符 串 。 明日 科技 


5.16 判断 字符 串 是 否 包含 数字 


图 关键 技术 

本 实例 的 实现 过 程 与 实例 139 的 实现 过 程 大 同 小 异 ， 都 是 通过 循环 字符 数组 ， 根 据 字 符 的 ASCII 码 值 来 判 
断 字符 是 否 为 字母 或 数字 。 数 字 0~9 的 ASCII 码 值 范围 在 48 一 57 之 间 ， 所 以 在 循环 中 ， 根 据 判断 每 个 字符 的 
ASCII 码 是 否 在 48 一 57 之 间 ， 就 可 以 知道 字符 串 是 否 包含 数字 。 
力 设计 过 程 

新 建 StingUtil 的 JavaBean 类 ， 该 类 用 于 判断 字符 串 是 否 包 含 数 字 ， 关 键 代 码 如 下 : 


public class StringUtil { 
Private String str; /要 检查 的 字符 串 
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Private boolean hasNum:; // 是 否 包含 数字 
Private String othersStr; // 去 掉 数字 后 的 字符 串 
public boolean isHasNumO { 
char cArm[] = strtoCharArrayO: /将 字符 中 转换 为 字符 数组 
StringBuffer sbNum =new ); 
StringBuffer sbOthers =new StringBuffer("™"): 
for(int i=0;i<cArm length:it +){ 
int ascii = (inbjcArrfi]: // 强 制 转换 可 以 直接 得 到 字符 的 ASCI 码 


if(ascii>—=48&&ascii<=57){ /数字 的 AscI 码 范围 在 48 一 57 之 间 
sbNum.append(cArr[iD):; ”// 将 每 个 数字 添加 到 StringBuffer 对 象 中 


else{ 
sbOthers.append(cArrfi]): 
) 
} 
this.setOthersStr(sbOthers.toStringO); 
if(!'sbNum.toStringO.equals("")) 
hasNum=true; 
else 
hasNum=false: 
return hasNum:; 


…// 此 处 省 略 了 属性 的 get 和 set 方 法 


} 
} 
图 秘笈 心 法 
本 实例 还 可 以 通过 String 类 的 hashCode0 方 法 实现 。 


eo 日 期 是 否 为 当前 日 期 初级 


实用 指数 ， 友 去 要 去 ， 


图 实例 说 明 
在 实际 开发 过 程 中 ， 会 遇 到 判断 用 户 输入 的 日 期 是 否 为 当前 日 期 的 情况 。 本 实例 将 介绍 如 何 判断 用 户 输入 
的 日 期 是 否 为 系统 当前 日 期 ， 运 行 效果 如 图 5.17 所 示 。 


请 输 入 日 期 ， 2010.0605 格式 为 2012-122 


输入 的 月 期 为 ， 20100505 
天 是 否 为 当前 日 期 ， true 
| 提示 信息 ， 输入 的 日 期 为 当前 日 期 


图 5.17 判断 用 户 输入 的 日 期 是 否 为 当前 日 期 


图 关键 技术 

本 实例 主要 应 用 java.util.Calendar 类 实现 ， 首 先 使 用 该 类 的 getInstance0 方 法 来 获取 系统 当前 时 间 的 日 历 对 
然后 使 用 该 对 象 中 提供 的 一 系列 方法 可 以 获得 当前 时 间 的 年 、 月 、 日 、 小 时 、 分 、 秒 等 值 。 
口 ”创建 一 个 当前 时 间 的 Calendar 对 象 ， 代 码 如 下 : 

Calendar now = Calendar.getInstance():; 

口 ” 获 得 当前 时 间 的 年 份 ， 代 码 如 下 : 

int year = now.get(now.YEAR): 

口 ”获得 当前 时 间 的 月 份 ， 代 码 如 下 : 

int month = now.gettnowMONTHD+1:// 默 认 的 月 份 是 从 0 开始 的 ， 所 以 需要 加 1 

口 ” 获 得 当前 时 间 的 日 ， 代 码 如 下 : 

int date = now.get(now. DAY_OF_MONTH): 

口 ” 获 得 当前 时 间 的 小 时 ， 代 码 如 下 : 

int hour =now.get(now. HOUR_OF_DAY); 

口 ”获得 当前 时 间 的 分 钟 ， 代 码 如 下 : 


int minute = now.get(now-MINUTE): 


象 
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口 ” 获 得 当前 时 间 的 秒 ， 代 码 如 下 : 


int second = now.get(now.SECOND): 
图 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 该 类 用 于 判断 用 户 输入 的 日 期 是 否 为 当前 日 期 ， 关 键 代 码 如 下 : 


public class StringUtil { 
Pprivate String dateStr; // 用 户 输入 的 日 期 
Private boolean today: 1/ 判断 是 否 为 今天 
Private String cue: /提示 信息 
Ppublic StringUtilO{} 
public String getDateStrO { 

return dateStr; 


public void setDateStr(String dateSt) 
dateStr = dateStrreplaceAll(" 
this.dateStr = dateStr; 


1/ 莹 换 日 期 中 的 空格 为 


} 
public boolean isTodayO { 
String dateArr[] = dateStr. split("-"); 
int year =Integer.parseInt(dateArr[O0D):; 
int month =Integer.parseInt(dateArr[1]):; 
int date = Integer.parseInt(dateArr[2)D):; 
Calendar now = Calendar.getInstance(); // 获 得 系统 当前 时 间 的 Calendar 对 象 
int nowYear = now.get(now. YEAR):; // 获 得 当前 时 间 的 年 
int nowMonth = now.get(now.MONTH)+1:; /获得 当前 时 间 的 月 
int nowDate = now.get(nowDAY OF MONTH): // 获 得 当前 时 间 的 日 
if(year 一 nowYear&S&month 一 nowMonth&&date 一 nowDate){f /如果 年 月 日 的 值 都 相同 
cue=" 输 入 的 日 期 为 当前 日 期 !"; 
today=true; 
jelsef 
cue=" 输 入 的 日 期 不 是 当前 日 期 !"; 
today=false; 


// 将 日 期 字符 串 分 解 为 数组 


} 
return today: 


ER /省 略 了 一 些 属性 的 get 和 set 方法 


(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 
<form action="checkjsp” method="post”> 
<table> 
<tr> 
<td align="ight"> 请 输入 日 期 :</td> 
<td><input type="text” name="datestr" /><font> 格 式 为 : 2012-12-21</font></td> 


</tr> 
<t> 
<td colspan="2" align="center"><input type="submit" value=" 盘 ” 查 '/></td> 
</tr> 
</table> 
</form> 
(3) 新 建 checkjsp 页 ， 判 断 用 户 输入 的 日 期 是 否 为 当前 日 期 ， 关 键 代码 如 下 : 
<% 
String dateStr = request. getParameter("datestr"); 

%> 


<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil"></isp:useBean> 
<!-- 对 StringUtil 类 的 datestr 属性 赋值 --> 
<jsp:setProperty property="dateSir” name="str Bean” value="<%=dateStr 9%0>"/> 
<table> 
<t> 
<tdalign= isgjt> 输 入 的 日 期 为 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 dateStr 的 属性 值 -> 
<jsp:getProperty property="dateStr” name="str Bean”/> 
<td> 
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<td align="right"> 是 否 为 当前 日 期 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 today 的 属性 值 -> 
<jsp:getProperty property= "today" name="strBean"/> 
</tr> 
<tr><td align="ight 吃 提示 信息 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 cue 的 属性 值 -> 
<ijsp:getProperty property="cue" name="strBean"/> 


</tr> 
</table> 


图 秘笈 心 法 


本 实例 也 可 以 通过 java.util.Date 类 实现 ，Date 类 表示 特定 的 瞬间 ， 精 确 到 毫秒 。 通 过 Date 类 的 getXXX0O 
方法 可 以 获得 Date 对 象 中 的 年 、 月 、 日 、 小 时 、 分 、 秒 ， 通 过 setXXX0 方 法 可 以 设置 Date 对 象 中 的 年 、 月 、 
日 、 小 时 、 分 、 秒 。 但 是 Date 类 的 这 些 方法 从 JDK 1.1 开始 ， 已 经 被 Calendar 类 中 相应 的 方法 取代 。 所 以 在 实 
际 的 开发 中 ， 应 该 尽量 使 用 Calendar 类 。 


图 实例 说 明 


在 网 站 中 填写 表单 信息 时 ， 有 些 字段 信息 必须 是 数字 格式 的 ， 如 用 户 的 年 龄 、 工 资 收入 、 手 机 号 码 等 。 本 
实例 将 介绍 如 何 判断 用 户 输入 的 数据 是 否 为 数字 ， 其 运行 效果 如 图 5.18 所 示 。 


到 5 一 | 。 [输入 的 字符 趾 为 ，3500 


是 否 为 数字 ;true 
| 及 证 提示 信息 ; 您 输入 的 是 数字 ! | 


图 5.18 判断 是 否 为 数字 
图 关键 技术 


本 实例 主要 通过 字符 的 ASCII 码 值 来 判断 数据 是 否 为 数字 ， 数 字 的 ASCII 码 值 的 范围 在 48 一 57 之 间 。 首 
先 将 整个 字符 串通 过 String 类 的 toCharArray0 方 法 转换 为 字符 数组 , 然后 在 循环 中 把 每 个 字符 转换 为 ASCII 码 ， 
判断 是 否 在 4 一 57 之 间 ， 如 果 条 件 满足 则 使 用 StringBuffer 对 象 累加 每 个 字符 ， 最 后 判断 StringBuffer 对 象 的 字 
符 串 长 度 是 否 等 于 字符 数组 的 长 度 ， 如 果 相 等 则 说 明 整 个 字符 串 为 数字 。 


图 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 该 类 主要 用 于 验证 字符 串 是 否 为 数字 ， 关 键 代 码 如 下 : 
public class StringUtil { 
private String numstr // 要 判断 的 字符 串 
Private boolean number: 1/ 判断 结果 
Private String cue ; /提示 信息 
public void setNumStr(String numStr) { 
numStr= numStrreplaceAll(" ", "™"); /去 掉 字符 串 中 的 空格 


this.numStr = numStr; 
} 
public boolean isNumberO { 


char cAr{]= numStr.toCharArrayO: 1/ 将 字符 串 转换 为 字符 数组 
StringBuffer sb = new StringBuffer(""): /创建 动态 字符 串 对 象 
for(int i=0:i<cArr length-it+){ 
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int ascii = (imt)cArrfi]: /将 字符 强制 转换 为 int 值 ， 该 值 为 字符 的 ASCI 码 
iflascii>=48&S&ascii<=57){ /数字 0~9 的 AscI 码 范围 在 48 一 57 之 间 
sb.append(cArr[i]): // 条 件 满足 ， 将 字符 添加 到 StringBuffer 字符 串 末尾 
中 
这 sblength0 一 cArrlengtb){ /如 果 StringBuffer 字符 串 的 长 度 等 于 字符 数组 的 长 度 
number=true; /该 字符 串 为 数字 
this setCue(" 您 输入 的 是 数字 ! "); 
} 
else{ 
mumber=false: 
this.setCue(" 您 输入 的 不 是 数字 ! "); 
} 
return number; 
} 
oe /此 处 省 略 了 部 分 get 和 set 方法 


(2) 新 建 ndexjsp 页 ， 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 
<form action="checkjsp" method="post"> 
<table> 
<t> 
<td align="right"> 月 工资 收入 : </td> 
<td><input type="text" name="numstr" /> 元 </td> 


</tr> 
<tr> 
<td colspan="2" align="center"><input type="Submit" value=" 有 证 "/></td> 
</tr> 
</table> 
</form> 
(3) 新 建 check.jsp 页 ， 验 证 用 户 输入 的 字符 串 是 否 为 数字 ， 关 键 代码 如 下 : 

<% 

String numStr = request.getParameter(“numstr"); 
%> 


<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 
<jsp:useBean id="strBean" class="com. lh.bean. String Util"”></isp:useBean> 
<!-- 对 StringUtil 类 的 numstr 属性 赋值 --> 
<jsp:setProperty property="numStr”" name="strBean” value="<%=numStr 96>"/> 
<table> 
<t> 


<tdalign=ight> 输 入 的 字符 串 为 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 numstr 的 属性 值 -> 
<jsp:getProperty property="numStr" name="strBean"/> 
<td> 
</a> 
<tr> 
<td align="right"> 是 否 为 数字 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 numStr 的 属性 值 -> 
<jsp:getProperty property="number” name="strBean"/> 
<ltd> 
< 
<tr> 
<td align="ight> 提 示 信息 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 cue 的 属性 值 -> 
<jsp:getProperty property="cue”" name="strBean"/> 
<ltd> 
< 
</table> 


国 秘笈 心 法 
本 实例 主要 是 将 一 个 字符 串 分 解 为 字符 数组 , 然后 判断 每 个 字符 是 否 为 数字 , 如 果 是 数字 就 添加 到 StringBuffer 
对 象 中 ， 最 后 把 这 个 StringBuffer 对 象 的 长 度 与 输入 字符 串 的 长 度 对 比 ， 判 断 输 入 的 整个 字符 串 是 否 为 数字 。 
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实用 指数 : 但 广 广 食 


图 实例 说 明 
有 些 网 站 用 户 注册 时 ， 用 户 名 信息 只 能 由 字母 、 数 字 和 下 划 线 组 成 ， 并 且 首 字符 必须 为 字母 ， 用 户 名 中 不 
允许 包含 特殊 字符 等 。 本 实例 将 介绍 如 何 判断 一 个 用 户 名 是 否 有 效 ， 其 运行 效果 如 图 5.19 所 示 。 


输入 的 用 户 名 为 :mr%*@&soft 


请 输入 用 户 各 只 古 由 字母 、 各 字 区 下 划 要 栓 所 
是 否 有 效 ，foalse 
提示 信息 用 户 名 格式 错误 ， 只 能 由 宇 母 、 数字 或 下 划 线 组 成 1 
图 5.19 判断 用 户 名 是 否 有 效 


本 实例 主要 应 用 字符 的 ASCII 码 来 判断 用 户 名 是 否 有 效 , 其 中 英文 字母 的 ASCII 范围 是 65 一 90( 大 写字 母 ) 
和 97 一 122 (小 写字 母 )， 下 划 线 的 ASCII 码 为 95， 数 字 的 ASCII 码 范 围 在 47 一 58 之 间 。 
图 设计 过 程 

(1) 新 建 名 为 StringBuffer 的 JavaBean 类 ， 该 类 用 于 判断 用 户 名 是 否 有 效 ， 关 键 代码 如 下 : 


public class StringUtil { 


Private String str; // 要 判断 的 字符 串 

Private boolean valid; /是 否 有 效 

Private String cue; // 提 示 信息 

public boolean isValidO { //boolean 属性 的 get 方法 写法 为 isXXXO 
char cArr[] =str.toCharArrayO; /字符 串 转 换 为 字符 数组 
int firstChar =(int) cArr[0]; // 第 一 个 字符 的 ASCI 码 


StringBuffer sb = new StringBuffer(™"); 
if((firstChar>=65&c&firstChar<=90)|(firstChar>=97&&firstChar<=122)){ // 判 断 首 字符 是 否 为 字母 
for(int 二 1;i<cArrlength:i++H){ 
int ascii =cArr[i]; /获得 字符 的 ASCI 码 
// 判 断 字符 是 否 为 字母 、 数 字 或 下 划 线 ， 下 划 线 的 ASCI[ 码 为 95 
if((ascii>=48&&ascii<=57)|l(ascii>=65&&ascii<=90)|| (ascii—95)l(ascii>=97&&ascii<=122)){ 
sb.append(cArr[i]): /如 果 条 件 满足 ， 将 字符 添加 到 StringBuffer 字符 串 的 末尾 


intlength = cArrlength-sbtostringOJengthO: 
ilength 一 1D){ /如 果 被 判断 字符 串 的 长 度 与 StringBuffer 字符 串 记 录 的 长 度 差 1 ( 即 去 掉 首 字符 的 长 度 ) 
this.setCue(" 用 户 名 格式 正确 ! "); 
valid=true: 
return Valid: 
Jelse{ 
this.setCue(" 用 户 名 格式 错误 ， 只 能 由 字母 、 数 字 或 下 划 线 组 成 !"); 
Valid=false: 


} 
Jelse{ // 如 果 首 字符 不 是 字母 ， 直 接 返 回 false 
this.setCue(" 用 户 名 格式 不 对 ， 首 字符 必须 为 字母 !"); 
valid=false: 
return Valid: 


} 
… /此 处 省 略 了 其 他 属性 的 get 和 set 方法 
} 
(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代码 如 下 : 
<form action="checkjsp” method="post"> 
<table> 
<t> 
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<td align="right”> 请 输入 用 户 名 : <htd> 
type="text” name="name” /> 
ne 区 能 由 字 寻 数字 或 下 划 线 组 成 <font></td> 


<td colspan="2" align="center"><input type="submit” value=" 狗 证 " /></td> 


Be 新 建 checkjsp 页 ， 用 于 判断 用 户 名 是 否 有 效 ， 关 键 代 码 如 下 : 


String name = request.getParameter("name"); 
%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 
‘<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil”></isp:useBean> 
<!-- 对 StringUtil 类 的 str 属性 赋值 --> 
<jsp:setProperty property="str”" name="strBean” value="<%=name %>"/> 
<table> 
<t> 
<td align=ight"> 输 入 的 用 户 名 为 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 Str 的 属性 值 -> 
本 sp:getProperty property="str" name="strBean"/> 
td> 


<td align="right"> 是 否 有 效 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 valid 的 属性 值 -> 
<jsp:getProperty property="valid" name="strBean"/> 
td> 


<td align="right"> 提 示 信息 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 cue 的 属性 值 --> 
<jsp:getProperty property="cue” name="strBean"/> 
td> 


</t> 
</table> 


图 秘笈 心 法 


在 本 实例 中 ， 将 字符 转换 为 ASCII 码 时 ， 还 可 以 通过 String 类 的 hashCode0 方 法 实现 。 
5.3 日 期 时 间 处 理 


在 程序 的 开发 过 程 中 ， 经 常 需要 处 理 日 期 时 间 类 型 的 数据 ， 如 用 户 在 表单 中 输入 的 为 字符 串 类 型 的 日 期 ， 
而 数据 库 中 保存 的 是 日 期 时 间 类 型 的 数据 ， 所 以 在 保存 数据 库 之 前 需要 将 字符 串 转换 为 日 期 时 间 类 型 。 有 时 页 
面 中 显示 的 数据 为 简写 的 日 期 字符 串 ， 所 以 需要 将 一 个 日 期 时 间 类 型 的 对 象 转换 为 简写 的 字符 串 。 本 节 将 介绍 
几 个 常用 的 对 日 期 时 间 操作 的 JavaBean 实例 。 


转换 为 Calendar 对 象 


实例 144 


图 实例 说 明 


在 实际 开发 过 程 中 ， 有 时 需要 将 用 户 输入 的 日 期 字符 串 转换 为 Calendar 类 型 。 本 实例 介绍 的 是 如 何 将 一 个 
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日 期 字符 串 转换 为 Calendar 对 象 类 型 ， 其 运行 效果 如 图 5.20 所 示 。 


输入 的 日 期 为 

和 出 续 扫 后 的 年， IDD 
Calendaor 对 象 中 上 月 : 6 
的 引 期 值 : | 日 7 


谋 轴 人 日 期 字符 下 


图 5.20 将 日 期 字符 串 转换 为 Calendar 对 象 


图 关键 技术 


本 实例 主要 应 用 格式 化 日 期 时 间 的 java.text.SimpleDateFormat 类 ,已 知 日 期 字符 串 的 格式 为 “yyyy-mm-dd”， 
如 “2010-06-07”， 实 现 步骤 如 下 : 


(1) 创建 一 个 “yyyy-mm-dd” 格 式 的 格式 化 对 象 ， 具 体 代 码 如 下 : 
SimpleDateFormat format = new SimpleDateFormat("yyyy-mm-dd"): 

(2) 通过 SimpleDateFormat 对 象 的 parse0 方 法 将 指定 字符 串 转换 为 Date 对 象 ， 具 体 代 码 如 下 : 
Date date = format.parse("2010-06-07"); 

(3) 通过 Calendar 对 象 的 setTime() 方 法 将 Date 对 象 转换 为 Calendar 对 象 ， 具 体 代 码 如 下 : 
Calendar calendar = Calendar.getInstance(); 
calendar.setTime(date); 


图 设计 过 程 


(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 用 于 将 日 期 字符 串 转换 为 Calendar 对 象 ， 关 键 代码 如 下 : 


Ppublic class StringUtil { 


Pprivate String dateStr; /日 期 字符 串 
Private Calendar calendar=null; /将 字符 串 转 换 后 的 Calendar 对 象 
public Calendar getCalendar0 { 
Date date =null; // 声 明 一 个 Date 类 型 的 对 象 
SimpleDateFormat format = null; /声明 格式 化 日 期 的 对 象 
if(dateStr!'=nulD){ 
format = new SimpleDateFormat("yyyy-MM-dd"); /创建 日 期 的 格式 化 类 型 
calendar = Calendar.getInstance(); /创建 一 个 Calendar 类 型 的 对 象 
try{ //forma.parse0 方 法 会 抛 出 异常 
date = format.parse(dateStr); // 解 析 日 期 字符 串 ， 生 成 Date 对 象 
calendar.setTime(date); /使 用 Date 对 象 设置 此 Calendar 对 象 的 时 间 
} catch (ParseException e) { 
e.printStackTrace(); 
} 
return calendar: 
} 
ee /省 略 了 其 他 属性 的 get 和 set 方法 


(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代码 如 下 : 
<form action="tocalendarjsp”" method="post”> 
<table> 
<tr> 
<td align="right"> 请 输入 日 期 字符 串 : </td> 
<td><input type="text” name="datestr" /> 
<font> 格 式 为 : 2008-08-80</font> 


(3) 新 建 tocalendarjsp 页 ， 用 于 将 日 期 字符 串 转 换 为 Calendar 对 象 ， 并 输入 Calendar 对 象 中 的 年 、 月 、 


关键 代码 如 下 : 
<% 


String dateStr = request.getParameter("datestr”"); 
%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
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<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil”"></jsp:useBean> 
<!-- 对 StringUtil 类 的 datestr 属性 赋值 -> 
<jsp:setProperty property="dateStr” name="strBean” value="<%=dateStr %>"/> 
<table border="1 > 
<t> 


<td align="right 人 > 输入 的 日 期 为 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 datestr 的 属性 值 -> 
<jsp:getProperty property= "aateStr" name="strBean”/> 


<td align="right" width="100"> 输 出 转换 后 的 Calendar 对 象 中 的 日 期 值 :</td> 
<td> 
<% 
Calendar calendar = strBean. getCalendar(); 
%> 
年 : <%=calendar.get(calendar.YEAR)%><br> 
月 : <%=calendarget(calendarMONTH)+196><br> 
日 : <%=calendar.get(calendar DAY_OF_MONTH)%> 
<ltd> 
</tr> 
‘</table> 


图 秘笈 心 法 
在 实际 的 应 用 开发 过 程 中 ， 经 常 需要 将 日 期 字符 串 转换 为 Calendar 对 象 类 型 。 因 此 读者 有 必要 掌握 如 何 将 
-个 日 期 字符 串 转换 为 Calendar 对 象 。 


初级 


实 伯 : 
实例 145 实用 指数 ， 傅 友良 去 : 


图 实例 说 明 
在 网 页 中 显示 数据 时 ， 需 要 将 Calendar 对 象 转换 为 日 期 时 间 字 符 串 再 进行 显示 。 本 实例 将 讲解 如 何 将 一 个 
Calendar 类 型 的 对 象 转换 为 指定 格式 的 日 期 时 间 字 符 串 ， 其 运行 结果 如 图 5.21 所 示 。 


请 输入 日 期 字符 内 : 20100607 


[EE 转换 为 日 期 字符 巾 ; 2010-6-7 


图 5.21 将 Calendar 对象 转换 为 日 期 时 间 字 符 串 


图 关键 技术 


本 实例 主要 应 用 Calendar 类 的 getO 方 法 ， 使 用 该 方法 可 以 获得 Calendar 对 象 中 的 年 、 月 、 日 、 小 时 、 分 钟 、 
秒 等 。 


图 设计 过 程 
(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 用 于 将 Calendar 对 象 转换 为 指定 格式 的 日 期 字符 串 ， 关 键 代码 
如 下 : 
public class StringUtil { 
Private String datestr /日 期 字符 串 
Private Calendar calendar=null: // 将 字符 串 转换 后 的 Calendar 对 象 
Ppublic String getDateStrO { 
int year = calendar.get(calendar. YEAR): /获得 年 
int month = calendar get(calendarMONTHD+1: /获得 月 
int date = calendar get(calendarD47_ OF_MONTID: /获得 日 
dateStr = year+"-"+month+"-"+date; /生成 日 期 字符 串 ， 格 式 为 2008-8-8 
return dateStr: 
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} 
ee /省 略 了 其 他 属性 的 get 和 set 方法 


(2) 新 建 ndex:jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 
<form action="tfocalendarjsp” method="post”> 
<table> 
<t> 
<td align= 7ight> 请 输入 日 期 字符 串 : </td> 
<td><input type="text” name="datestr" /> 
<font> 格 式 为 : 2008-08-08</font> 


<td colspan="2" align="center"><input type="submit” value=" 送 藤 "/></td> 


(3) 新 建 todatestrjsp 页 ， 该 页 首先 获得 表单 的 日 期 字符 串 ， 将 字符 串 中 的 日 期 转换 为 一 个 Calendar 对 象 ， 
然后 再 调用 StringUtil 类 将 这 个 Calendar 对 象 转换 为 日 期 字符 串 ， 关 键 代 码 如 下 : 
< 


String dateStr = request.getParameter("datestr"); // 获 得 表单 中 的 字符 串 

String date[] =dateStr.split("-"); // 根 据 "-" 分 隔 字符 串 为 数组 
int y =Integer.parseInt(date[0]); // 获 得 字符 串 中 的 年 

int m =Integer.parseInt(date[1]); // 获 得 字符 串 中 的 月 

int d = IntegerparseInt(date[2]): // 获 得 字符 串 中 的 日 
Calendar ¢ = Calendar getInstance(); // 创 建 一 个 Calendar 对 象 
csettym-1.d; // 设 置 Calendar 对 象 的 年 月 日 


%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 
<ijsp:useBean id="strBean" class="com.Ih.bean.StringUtil"></jsp:useBean> 
<!-- 对 StringUtil 类 的 calendar 属性 赋值 --> 
<jsp:setProperty property="calendar” name="strBean” value="<%=c 96>"/> 
<table> 
<tr> 
<td align="right"> 转 换 为 日 期 字符 串 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 dateStr 的 属性 值 -> 
<jsp:getProperty property="dateStr" name="strBean"/> 


</tr> 
‘</table> 


图 秘 稚 心 法 
在 实际 开发 应 用 中 ， 有 时 需要 将 Calendar 对 象 转换 为 不 同 格式 的 日 期 时 间 字 符 串 。 例 如 ， 格 式 可 能 为 


“yyyy-mm-dd”“yyyy-mm-dd hh:mm:ss”“yyyy/mm/dd”“yyyy 年 mm 月 dd 日 ”。 所 以 ,读者 应 该 掌握 本 实例 的 
实现 方法 。 


5 实用 指数 : 食 食 食 食 | 


图 实例 说 明 
在 实际 开发 过 程 中 ， 有 时 需要 获取 系统 当前 的 时 间 ， 如 用 户 注册 时 的 注册 时 间 ， 虽 然 用 户 不 需要 填写 注册 
时 间 ， 但 是 在 后 台 需 要 获取 当前 的 系统 时 间作 为 注册 时 间 。 本 实例 介绍 的 是 如 何 获得 系统 当前 时 间 的 字符 串 格 


式 ， 其 运行 结果 如 图 5.22 所 示 。 


使 用 Colendor 对 急 获 得 的 当前 时 间 17 
使 用 Doie 对 象 获 得 的 当前 时 间 020517 


图 5.22 获得 系统 当前 时 间 的 字符 串 格式 


Wy 
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图 关键 技术 


本 实例 主要 通过 java.util.Calendar 类 以 及 java.util.Date 类 来 获得 系统 的 当前 时 间 。 

使 用 Calendar 类 时 ， 要 通过 该 类 对 象 的 get0 方 法 获得 时 间 中 的 年 、 月 、 日 、 小 时 、 分 钟 和 秒 ， 然 后 将 这 些 
值 组 成 一 个 字符 串 。 

使 用 Date 类 时 , 可 以 通过 java.text.SimpleDateFormat 类 将 一 个 Date 对 象 格式 化 为 指定 格式 的 日 期 时 间 字 符 
串 ， 代 码 如 下 : 


Date date = new Date(); 
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh-mm-ss"): 
String dateStr = format.format(date): 


图 设计 过 程 
(1) 新 建 名 为 StingUtil 的 JavaBean 类 ， 该 类 实现 和 获得 系统 当前 时 间 的 两 种 方法 ， 关 键 代码 如 下 : 


public class StringUtil { 


Private String timeStr1; /日 期 字符 串 
Private String timeStr2; 
public String getTimeStrl0 { /使 用 Calendar 对 象 获得 系统 当前 时 间 的 方法 
Calendar c = Calendar.getInstance(): 1/ 创建 表示 当前 时 间 的 Calendar 对 象 
int year = c.get(c.YEAR); // 获 得 当前 时 间 的 年 
int month =c.get(c.MONTH)+1:; // 获 得 当前 时 间 的 月 
int date = c.get(c.DAY_OF_MONTH): // 获 得 当前 时 间 的 日 
int hour = c.get(c.HOUR_OF_DAY): // 获 得 当前 时 间 的 小 时 
int minute = ¢.get(c.MINUTE):; /获得 当前 时 间 的 分 钟 
int second = c.get(c.SECOMND): /获得 当前 时 间 的 秒 
timeStrl = year+"-"+montht"-"+datet”" "+hourt":"Hminutet":"+second; 
return timeStrl; 
8 
public String getTimeStr20 { /使 用 Date 对 象 获 得 系统 当前 时 间 的 方法 
Date date = new Date(); // 创 建 表 示 当 前 时 间 的 Date 对 象 
1/ 创建 格式 化 日 期 时 间 对 象 
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss"); 
timeStr2 = format.format(date); /格式 化 当前 时 间 的 Date 对 象 
return timeStr2; 


} 
} 
(2) 新 建 index.jsp 页 ， 在 该 页 中 通过 StringUtil 类 来 获得 系统 的 当前 时 间 字 符 串 ， 关 键 代码 如 下 : 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
<jsp:useBean id="strBean" class="com.Ih.bean. StringUtil”></isp:useBean> 
<table> 
<tr> 


<td align="7ight"> 使 用 Calendar 对 象 获得 的 当前 时 间 : </td> 


<td> 
<!-- 从 StringUtil 对 象 中 获得 timestrl 的 属性 值 --> 
<jsp:getProperty property="fimeSt]” name="strBean”/> 
</> 
<t> 


<td align="right" > 使 用 Date 对 象 获得 的 当前 时 间 : </td> 
<td> 


<!-- 从 StringUtil 对 象 中 获得 timeStr2 的 属性 值 -> 
<jsp:getProperty property= "meSy2" name="strBean"”/> 


</tr> 
</table> 


国 秘笈 心 法 
在 实际 的 开发 应 用 中 ， 经 常 需要 根据 当前 系统 时 间 来 实现 一 些 业务 逻辑 ， 因 此 读者 应 该 掌握 如 何 获取 当前 
的 系统 时 间 。 
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实 合 | : 
实例 147 实用 指数 : 妇女 女 女 | 


图 实例 说 明 
在 实际 开发 过 程 中 ， 有 时 会 遇 到 计算 两 个 日 期 相差 天 数 的 情况 。 本 实例 将 讲解 如 何 计 算出 两 个 日 期 相差 的 
天 数 ， 其 运行 效果 如 图 5.23 所 示 。 


请 输入 第 一 个 日 期 ' 2010-5-5 
请 输入 第 二 个 日 期 2010-65 
EE 


5.23 ”计算 出 两 个 日 期 相差 的 天 数 


图 关键 技术 

本 实例 主要 应 用 Calendar 对 象 中 的 getTimeInMillis0 方 法 ， 此 方法 返回 一 个 long 型 的 时 间 值 ， 以 毫秒 为 单 
位 。 首 先 获 得 两 个 日 期 对 象 的 long 类 型 的 时 间 值 ,然后 这 两 个 值 相 减 之 后 再 除 以 一 天 的 毫秒 值 (1000*60*60*24)， 
得 到 的 值 取 整 即 两 个 日 期 相差 的 天 数 。 
图 设计 过 程 


(1) 新 建 名 为 StringUtil 的 JavaBean 类 ， 该 类 用 于 计算 两 个 日 期 相差 的 天 数 ， 关 键 代 码 如 下 : 


Ppublic class StringUtil { 


Pprivate String dateStr1; // 第 一 个 日 期 字符 串 

private String dateStr2; // 第 二 个 日 期 字符 串 

Pprivate int minus; // 两 个 日 期 的 差 

public int getMinusO { 
Calendar cl = this.getCalendar(dateStr1); /根据 第 一 个 日 期 字符 串 获 得 Calendar 对 象 
Calendar c2 = this.getCalendar(dateStr2); // 根 据 第 二 个 日 期 字符 串 获 得 Calendar 对 象 
long tl = cl.getTimeInMillisO:; // 获 得 此 对 象 的 时 间 值 ， 以 毫秒 为 单位 
long {2 = c2.getTimeInMillisO: // 获 得 此 对 象 的 时 间 值 ， 以 毫秒 为 单位 
long t= 1000*+60*+60*+24: /一 天 的 毫秒 ，1000 毫秒 *60 秒 *60 分 钟 *24 小 时 
minus = (int)((t2-t1)/0):; // 获 得 两 个 日 期 相差 的 天 数 


return minus: 


} 
public Calendar getCalendar(String dateStr) { 


Date date =null: /声明 一 个 Date 类 型 的 对 象 
SimpleDateFormat format = null; /声明 格式 化 日 期 的 对 象 
Calendar calendar = null: 

if(dateStr!=nul){ 


format = new SimpleDateFormat("yyyy-MM-dd"):// 创 建 日 期 的 格式 化 类 型 
calendar = Calendar.getInstanceO): // 创 建 一 个 Calendar 类 型 的 对 象 


try{ //forma.parse0 方 法 会 抛 出 异常 
date = format parse(dateStDj: // 解 析 日 期 字符 串 ， 生 成 Date 对 象 
calendar setTime(date): /使 用 Date 对 象 设置 此 Calendar 对 象 的 时 间 
} catch (ParseException e) { 
e.printStackTraceO: 
} 
return calendar: 
} 
ee /此 处 省 略 了 其 他 属性 的 get 和 set 方法 


(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 
De 
able> 


<td align='i8jt> 请 输入 第 一 个 日 期 : </td> 
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<td><input type="text” name"datestr1" /><font> 格 式 为 : 2008-08-80</font></td> 
</t> 
<t> 

<td align="ight"> 请 输入 第 二 个 日 期 : </td> 

<td><input type="text” name"datestr2" /><font> 格 式 为 : 2008-08-80</font></td> 


</tr> 

Bs <td colspan="2" align="center"><input type="submit" value=" 存 交 "/></td> 

Le 
</form> 
(3) 新 建 getminusjsp 页 , 在 该 页 中 通过 StringUtil 提供 的 方法 计算 出 两 个 日 期 相差 的 天 数 , 关键 代码 如 下 : 

总 String dateStrl = request.getParameter("datestr1"): 

String dateStr2 = request.getParameter("datestr2"): 
%> 


<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 --> 
<ijsp:useBean id="strBean”" class="com.Ih.bean.StringUtil"></isp:useBean> 
<!-- 对 StringUtil 类 的 属性 赋值 -> 
<jsp:setProperty property="dateStr1" name="strBean” value="<%=dateStrl 96>"/> 
‘<jsp:setProperty property="dateStr2" name="strBean”" value="<%=dateStr2 %>"/> 
<table> 
<t> 
<td align="7ight"> 第 一 个 日 期 为 :</td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 属性 值 -> 
<jsp:getProperty property="dateStr1" name="strBean"/> 
<t> 
<tr> 
<td align="right"> 第 二 个 日 期 为 ，</td> 
<td> 
<jsp:getProperty property="dateStr2" name="strBean"/></td> 
<tr> 
<td align="right"> 两 个 日 期 相差 的 天 数 为 ，</td> 
<td> 
<jsp:getProperty property="minus" name="strBean"/> 


</t> 
</table> 


图 秘笈 心 法 
在 实际 开发 过 程 中 ， 经 常 需要 计算 两 个 日 期 相差 的 天 数 ， 所 以 读者 应 该 掌握 本 实例 的 实现 方法 。 


5.4 输出 实用 的 HTML 代码 


在 网 站 开发 的 过 程 中 ， 经 常会 在 多 个 页 面 使 用 相同 的 HTML 代码 。 例 如 ， 在 浏览 信息 的 模块 中 编写 的 分 页 
导航 链接 的 代码 ， 在 页 尾 输 出 的 网 站 版 权 信 息 的 代码 等 。 本 节 将 介绍 几 个 常用 的 输出 实用 的 HTML 代码 的 
JavaBean 实例 。 


实例 148 的 


实用 指数 去 丰 让 页 | 


图 实例 说 明 


运行 本 实例 , 在 mdexjsp 页 中 输入 用 户 名 和 密码 并 将 其 提交 到 checkjsp 页 , 在 checkjsp 页 中 会 对 用 户 名 和 密 
码 进行 判断 ， 如 果 用 户 名 和 密码 正确 ， 则 输出 登录 成 功 信息 ， 否 则 输出 登录 失败 信息 ， 运 行 结果 如 图 5.24 所 示 。 
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提示 信息 ; 和 登录 失败 ! 用 户 名 或 密码 不 正确 ! 


5.24 ”验证 用 户 登录 并 输出 提示 信息 


图 关键 技术 


本 实例 主要 在 JavaBean 中 获得 用 户 输入 的 用 户 名 和 密码 , 然后 根据 用 户 名 和 密码 信息 来 生成 不 同 的 HTML 
标签 内 容 。 


图 设计 过 程 
(1) 新 建 名 为 StingUtil 的 JavaBean 类 , 用 于 判断 用 户 名 和 密码 是 否 正确 并 生成 提示 信息 , 关键 代码 如 下 : 


public class StringUtil { 
Private String name; /用 户 名 
Private String pwd ; /密码 
Private String cue; WHTML 提示 信息 
public String getCueO { 
// 如 果 用 户 名 或 密码 为 null 或" 
if((name—null|lname.equals(""))l(pwd—nulllipwd.equals("™")){ 
cue= "请 输入 用 户 名 或 密码 ! "; 
}else{// 如 果 用 户 名 和 密码 不 为 空 
if(name.equals(“mr")&-&pwd.equals("123"){ 
cue= "登录 成 功 !"; 
jelse{ 
cue= "登录 失败 ! <b> 用 户 名 </b> 或 <b> 密 码 <b> 不 正确 ! "; 


} 
} 
return cue; 


a /省 略 了 其 他 属性 的 get 和 set 方法 
(2) 新 建 index.jsp 页 ， 用 于 输入 表单 信息 ， 关 键 代 码 如 下 : 


<form action="login.jsp” method="post”> 
<table> 


<tr> 
<td align="right"> 请 输入 用 户 名 :</td> 
<td><input type="text” name="name” /></td> 
</tr> 
<tr> 
<td align="right"> 请 输入 密码 :</td> 
<td><input type="password” name="pwd" /></td> 


</tr> 
<tr> 
<td colspan="2"align="center 必 <input type="submit” value=" 登 灵 "/></td> 
</tr> 
</table> 
</form> 
(3) 新 建 login.jsp 页 ， 验 证 用 户 登 录 信息 ， 关 键 代码 如 下 : 


<% 
String name = request.getParameter("name"); 
String pwd = request.getParameter("pwd"); 
%> 
<!-- 使 用 useBean 动作 标签 导入 JavaBean 对 象 -> 
<jsp:useBean id="strBean” class="com.Ih.bean.StringUtil"></jsp-useBean> 
<!-- 对 StringUtil 类 的 属性 赋值 -> 
<jsp:setProperty property="name” name="strBean” value="<%=name %>"/> 
‘<jsp:setProperty property="pwd" name="strBean” value="<%=pwd %>"/> 
<table> 
<t> 
<td align=”ight"> 提 示 信息 : </td> 
<td> 
<!-- 从 StringUtil 对 象 中 获得 属性 值 -> 
<jsp:getProperty property="cue” name="strBean”/> 
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<ftd> 


<td align="center” colspan="2"><a href="indexjsp">[ 返 回 ]</a></td> 


图 秘笈 心 法 
读者 可 以 根据 本 实例 的 实现 方法 ， 实 现 网 上 办 公 自 动 化 系统 以 及 网 上 购物 系统 中 的 用 户 登 录 信息 提示 。 


实例 149 


实用 指数 : 让 让 去 丰 


图 实例 说 明 

在 实际 开发 过 程 中 ， 很 多 的 功能 模块 显示 数据 的 部 分 都 需要 分 页 显示 ， 而 且 分 页 部 分 的 HTML 代码 都 是 相 
同 的 ， 为 了 提高 开发 效率 以 及 便于 维护 ， 可 以 将 这 部 分 分 页 导航 的 代码 封装 在 JavaBean 中 。 本 实例 将 介绍 如 何 
将 分 页 导航 的 HTML 代码 封装 到 JavaBean 中 。 


图 关键 技术 

本 实例 主要 根据 用 户 单 击 超 链接 时 传递 的 当前 页 的 参数 来 判断 是 否 显示 “上 一 页 ”或 “下 一 页 ”的 超 链 接 。 
当 单 击 “首页 ”时 该 参数 值 为 1， 此 时 应 该 不 存在 “上 一 页 ”的 超 链接 ， 只 有 “下 一 页 ”和 “ 尾 页 ”的 超 链接 ， 
当 单 击 尾 页 时 该 参数 值 为 总 页 数 ， 应 该 没有 “下 一 页 ”的 超 链接 ， 只 有 “首页 “和 “上 一 页 ”的 超 链接 ， 当 单 
击 “ 上 一 页 ”时 ， 当 前 参数 值 应 该 减 1， 单 击 “ 下 一 页 ” 超 链 接 时 ， 当 前 值 应 该 加 1。 所 以 控制 好 当前 页 的 参数 
值 对 实现 分 页 导航 是 很 关键 的 。 


图 设计 过 程 
新 建 名 为 Page 的 JavaBean 类 ， 该 类 用 于 封装 分 页 导航 的 代码 ， 关 键 代码 如 下 : 


public class Page { 


Private int pageSize = 10; /| 每 页 显示 的 记录 数 
Private int currentPage = 1; /1/ 当 前 页 
private int totalPage = 0; /总 页 数 
Private int totalRows = 0; /总 记录 数 
Private boolean hasBefore = false; /是 否 有 上 一 页 
Private boolean hasNext = false : /是 否 有 下 一 页 
Private String linkHTML=""; // 用 于 保存 分 页 导航 的 HTML 代码 
Private String pageURL: /具体 的 链接 地 址 
public int getTotalPage0O { 
totalPage = ((totalRows + pageSize) - 1) /pageSize: ” // 根 据 数据 总 数 和 每 页 显示 的 记录 数 算出 总 页 数 
return totalPage: 
// 单 击 的 是 首页 
public void firstPageO{ 
currentPage = 1: /当前 页 的 值 为 1 
this.setHasBefore(false): /没有 上 一 页 
this refreshO: /人 单 击 “ 首 页 ”时 应 该 设置 是 否 有 上 一 页 和 下 一 页 
了 
// 单 击 的 是 上 一 页 
public void beforePageO{ 
currentPage -- : /当前 页 的 值 减 1 
this refreshO: /人 单 击 “ 上 一 页 ”时 应 该 设置 是 否 有 上 一 页 和 下 一 页 
} 
// 单 击 的 是 下 一 页 
public void nextPageO{ 
if(curentPage < totalPagej{ 
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currentPage ++ ; // 当 前 页 的 值 加 1 
} 
thisrefreshO: /| 单 击 “ 下 一 页 ”时 应 该 设置 是 否 有 上 一 页 和 下 一 页 
} 
// 单 击 的 是 尾 页 
public void lastPage(){ 
currentPage = totalPage ; // 当 前 页 的 值 等 于 总 页 数 
this.setHasNext(false); /没有 下 一 页 
this refreshO; // 单 击 “ 尾 页 ”时 应 该 设置 是 否 有 上 一 页 和 下 一 页 
. 
/根据 用 户 的 操作 ， 判 断 是 否 有 上 一 页 和 下 一 页 
public void refreshO{ 
if(totalPage<=1){ /总 页 数 小 于 等 于 1 的 情况 ， 没 有 上 一 页 和 下 一 页 
this setHasBefore(false): 
this.setHasNext(false); 
} 
else if(currentPage—1){ // 当 前 页 为 首页 没有 上 一 页 ， 有 下 一 页 
this.setHasBefore(false); 
this.setHasNext(true); 
else if(currentPage 一 totalPage){ /当前 页 为 尾 页 ， 没 有 下 一 页 ， 有 上 一 页 
this.setHasBefore(true): 
this.setHasNext(false); 
jelsef /除了 以 上 的 所 有 条 件 ， 有 上 一 页 和 下 一 页 
this.setHasBefore(true); 
this.setHasNext(true); 


} 
} 
// 获 得 分 页 导航 代码 的 方法 ， 主 要 根据 是 否 有 上 一 页 和 下 一 页 来 判断 


Ppublic String getLinkHTMLO { 
linkHTML +=" 共 "+this.totalRows+" 条 记录 &nbsp;&nbsp;&nbsp;&nbsp:"; 
if( this.hasBefore ){ // 如 果 有 上 一 页 ， 添 加 上 一 页 的 超 链接 代码 


linkHTML += "<a href="+this.pageURL+"?currPage=1> 首 页 </a>"; 

linkHTML += "&nbsp:&nbsp:&nbsp:&nbsp:": 

linkHTML + 一 "<a href="+Hthis.pageURL+"?curpage—"+this.currentPaget "raction=before> 上 一 页 </a>"; 
linkHTML += "&nbsp:&nbsp:&nbsp:&nbsp:": 


} else{ // 如 果 没 有 上 一 页 

linkHTML +=" 首 页 &nbsp:&nbsp:&nbsp:&nbsp: 上 一 页 &nbsp:&nbsp:&nbsp:&nbsp:": 
} 
if( this.hasNext ){ // 如 果 有 下 一 页 ， 添 加 下 一 页 的 超 链接 代码 


linkHTML += "<a href="+this.pageURL+"?currPage="+this.currentPaget+"&action=next> 下 一 页 </a>"; 
linkHTML += "&nbsp:&nbsp:&nbsp:&nbsp:": 
linkHTML += "<a hre 全 "+this.pageURL+"?currPage="+this.totalPage+"> 尾 页 </a>"; 
linkHTML += "&nbsp:&nbsp:&nbsp:&nbsp:": 
} else{ /没有 下 一 页 
linkHTML += "下 一 页 &nbsp:&nbsp:&nbsp:&nbsp: 尾 页 &nbsp:&nbsp:&nbsp:&nbsp:" 


人 
return linkHTMIL: 
} 
} 
国 秘笈 心 法 
在 本 实例 中 实现 将 数据 分 页 的 代码 封装 到 JavaBean 中 , 避免 了 在 JSP 页 中 插入 大 量 的 Java 脚本 代码 而 导致 
JSP 页 中 的 代码 混乱 ， 而 且 有 利于 程序 的 维护 管理 。 


实例 
2 实用 指数 : 信人 娘 食 食 


图 实例 说 明 
在 网 站 开发 过 程 中 ， 在 每 个 页 面 的 底部 都 需要 添加 网 站 的 版 权 信息 以 便于 网 站 的 维护 管理 ， 可 以 将 这 些 版 
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权 信 息 封装 到 JavaBean 中 ， 从 而 达到 可 重复 利用 的 效果 ， 实 例 运行 效果 如 图 5.25 所 示 。 


生成 的 碑 权 入 息 : 


图 5.25 | 生成 版 权 信息 
图 关键 技术 


本 实例 的 实现 很 简单 ， 首 先 在 JavaBean 中 定义 好 版 权 信息 的 字符 囊 ， 然 后 在 JSP 页 中 使 用 <jsp:userBean> 
动作 导入 JavaBean 对 象 ， 最 后 通过 <jsp:getProperty> 动 作 获 得 JavaBean 中 定义 好 的 版 权 信息 的 字符 串 属性 值 。 
图 设计 过 程 

(1) 新 建 名 为 Copyright 的 JavaBean 类 ， 关 键 代码 如 下 : 
public class Copyright { 
private String copyrightStr="CopyRight 2006 www.mingrisoft.com " +" 吉 林 省 明日 科技 有 限 公司 <br>" + 
"服务 热线 ，0431-84978981 84978982 传真 0431-84972266"; 

Public String getCopyrightStrO { 

return copyrightStr 

} 

(2) 新 建 index.jsp 页 ， 用 于 显示 版 权 人 和 信息， 关键 代 码 如 下 : 


<table> 
<tr bgcolor="skyblue’> 
<td align="center 必 生成 的 版 权 信息 : </td> 
</t> 
<u> 
<td> 
<jsp:useBean id="copyright" class="com. lh.bean.Copyright"></isp:useBean> 
ee jsp:getProperty property="copyrightSh" name="copyright"/> 
</table> 
国 秘笈 心 法 


在 开发 网 站 的 过 程 中 ， 经 常会 在 多 个 页 面 的 结尾 重复 地 写 入 网 站 版 权 信息 的 HTML 代码 ， 在 本 实例 中 将 版 
权 信息 的 代码 封装 到 JavaBean 中 ， 有 利于 代码 的 重用 与 维护 ， 并 提高 开发 效率 。 


5.5 窗口 与 对 话 框 


在 网 站 开发 过 程 中 , 经 常 需要 对 网 站 的 某 个 功能 的 操作 给 出 提示 信息 的 对 话 框 或 者 弹出 一 个 固定 大 小 窗口 ， 
以 便于 用 户 正确 地 使 用 网 站 。 


实例 151 


图 实例 说 明 
弹出 提示 对 话 框 是 网 站 中 经 常用 到 的 , 为 了 便于 维护 , 可 以 将 弹出 对 话 框 的 JavaScript 代码 封装 到 JavaBean 
中 。 在 本 实例 中 ， 当 用 户 提交 注册 信息 表单 时 ， 会 弹出 相应 的 提示 对 话 框 ， 运 行 效 果 如 图 5.26 所 示 。 


力 关键 技术 
本 实例 主要 通过 JavaBean 将 整个 弹出 对 话 框 以 及 页 面 重 定向 的 JavaScript 代码 封装 在 一 个 字符 串 中 ， 然 后 


186 


第 5 章 JavaBean 技术 


在 页 面 中 通过 <jsp:useBean> 动 作 导 入 JavaBean, 使 用 <jsp:setProperty> 动 作 设置 弹出 消息 以 及 重 定向 的 页 面 链接 ， 
最 后 通过 <jsp:getProperty> 动 作 获 得 定义 弹出 对 话 框 代码 的 属性 值 。 


5.26 弹出 提示 对 话 框 并 重 定向 网 页 


图 设计 过 程 
(1) 新 建 名 为 PopDialog 的 JavaBean 类 ， 该 类 用 于 封装 弹出 对 话 框 的 信息 并 重 定向 页 面 ， 关 键 代码 如 下 : 


public class PopDialog { 
Private String dialogStr; /弹出 对 话 框 的 代码 
Private String message; /1/ 弹 出 的 提示 消息 
Private String url; // 重 定向 的 链接 地 址 
Public String getDialogStr0 { 
dialogStr = "<script language =javascript >\n\t"; 
dialogStr +—"alert("+message+"):\n\t"; // 弹 出 对 话 框 
dialogStr +="window.location.href= "turli";\rin"; 。 // 页 面 重 定向 
dialogStr += "</script>"; 
return dialogStr; 


/此 处 省 略 了 其 他 属性 的 get 和 set 方法 
} 

(2) 在 弹出 对 话 框 的 页 面 引 用 以 上 定义 的 JavaBean， 关 键 代码 如 下 : 
<jspruseBean id="popdialog" class="com.Ih.bean. PopDialog "><ljsp:useBean> 


<jsp:setProperty property="message” name="popdialog” value=" 广 娘 成 功 ! "/> 
<ijsp:setProperty property="ur1” name="popdialog” value="index.jsp"/> 


图 秘笈 心 法 


由 于 在 JSP 中 并 没有 提供 弹出 提示 对 话 框 的 函数 ， 但 在 程序 开发 时 经 常 需要 弹出 提示 对 话 框 ， 并 在 确定 后 
重 定向 页 面 ， 因 此 实现 本 实例 的 功能 是 有 必要 的 。 


图 实例 说 明 


在 实际 开发 过 程 中 经 常会 用 到 弹出 的 窗口 ,为 了 便于 维护 管理 以 及 提 
高 代码 的 重用 性 ， 可 以 将 弹出 窗口 的 JavaScript 代码 封装 在 JavaBean 中 。 忽 打开 宣 口 - WindowsLEEEENEES 
本 实例 将 讲解 如 何 将 弹出 窗口 的 JavaScript 代码 封装 到 JavaBean 中 ,其 运 ee 
行 效果 如 图 5.27 所 示 。 度 200px， 靖 度 100px， 届 中 显 


重 关键 技术 


使 用 JavaScript 打开 一 个 弹出 窗口 ， 可 以 使 用 window 对 象 的 open0 5.27 弹出 指定 大 小 的 窗口 
方法 或 showModalDialog() 方 法 完成 。showModalDialog() 方 法 的 示例 代码 
如 下 : 


var url="window1 jsp"; 
window.showModalDialog(url.window'.'status=no:dialogWidth=560px:dialogHeight=190px:center=yes:help=no:location=no:): 


示 。 
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open() 方 法 的 示例 代码 如 下 : 


var url="window1jsp"; 
window.open(url,window','status=no,width=500px. height=100px.center=yes.help=no.location=no.menubar=no.toolbar=no’); 


图 设计 过 程 
(1) 新 建 名 为 ShowWindow 的 JavaBean 类 , 用 于 封装 JavaScript 代码 的 打开 指定 大 小 的 窗口 的 方法 ,关键 


代码 如 下 : 
public class ShowWindow { 
Pprivate String url: // 打 开 窗 口 的 链接 地 址 
Pprivate String openWindowStr=""; /用 于 保存 打开 窗口 的 JavaScript 代码 
Private int width: /打开 窗口 的 宽度 
Private int height:; /打开 窗口 的 高 度 
Private String finctionName; /打开 窗口 的 JavaScript 函数 名 
public String getOpenWindowStr0 { 
StringBuffer sb = new StringBuffer(openWindowStr); 
sb.append("<script language='javascript>"); 
sb.append("\\n\t"); // 添 加 换行 缩 进 
sb.append("function "+this.functionName+"O{"); /添加 函数 名 
sbappend("rmNtt 7 


/打开 一 个 窗口 时 ， 返 回 一 个 window 类 型 的 对 象 returmmObj， 可 以 根据 此 对 象 来 调整 窗口 的 位 置 
sb.append("var returnObj = window.open(""+this.url+",window’,"width="+this.width+"px,height="+this.height+"px");"); 
sb.append("Nvtwt 

llscreen 对 象 表示 屏幕 ， 此 处 设置 相对 于 屏幕 的 x 坐标 

sb.append("var x=(screen.width-"+width+")/2;"); /此 处 设置 相对 于 屏幕 的 x 坐标 
sb.append("\r\n\t\t"); 

sb.append("var y=(screen.height-"+height+")/2:"); 。 ”// 此 处 设置 相对 于 屏幕 的 y 坐标 
sb.append("wNtt 

sb.append("retumObj.moveTo(x,y):"); /调用 moveTo0 方 法 改变 窗口 位 置 
sb.append("\n\t}"); 

sb.append("\\n"); 

sb.append("</script>"); 

return sb.toString0; 


ee /此 处 省 略 了 其 他 属性 的 get 和 set 方法 


(2) 新 建 index.jsp 页 ， 在 该 页 中 使 用 <jsp:useBean> 导 入 打开 窗口 的 JavaBean 对 象 ， 然 后 使 用 <jsp:set 
Property> 动 作为 该 JavaBean 对 象 中 的 属性 赋值 ， 最 后 通过 <jsp:getProperty> 动 作 获得 打开 窗口 的 属性 值 ， 关 键 代 
码 如 下 : 

<!-- 导入 打开 窗口 的 JavaBean 类 --> 
<jsp:useBean id="myWindow" class="com. lh.bean.ShowWindow"></jsp:useBean> 
<!-- 设置 打开 窗口 的 JavaScript 函数 名 --> 
<jsp:setproperty property="finctionName” name="myWindow" value="openWindow1"/> 
<!-- 设置 打开 窗口 的 url 地 址 --> 
<jsp:setproperty property="1r1" name="my Window" value="windowjsp"/> 
<!-- 设置 打开 窗口 的 宽度 --> 
<jsp:setproperty property="width" name="myWindow" value="200"/> 
<!-- 设置 打开 窗口 的 高 度 --> 
jsp:setProperty property="height” name="myWindow" value="100"/> 
<!-- 获得 打开 窗口 的 JavaScript 函数 字符 串 --> 
jsp:getProperty property="open WindowStr” name="myWindow” /> 
<form action="window,jsp” method="post”> 
<input type="button”"value=" 力 开 府 "onclick="openWindow10"/> 
</form> 


国 秘笈 心 法 

使 用 showModalDialog0 方 法 弹出 的 窗口 是 模 态 窗口 ， 不 能 最 小 化 ， 只 有 关闭 当前 弹出 的 模 态 窗口 才能 操作 
其 他 页 面 。 而 使 用 open0 方 法 弹出 的 更 像 是 一 个 页 面 ， 此 时 对 操作 其 他 页 面 没 有 影响 ， 但 是 在 弹出 该 页 面 之 前 
会 首先 弹出 一 个 警告 对 话 框 ， 从 而 会 给 网 页 浏览 者 带 来 不 必要 的 操作 。 所 以 读者 可 以 根据 实际 需求 来 选择 使 用 
这 两 个 方法 。 
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5.6 ”对 数据 库 操作 的 JavaBean 


在 开发 程序 的 过 程 中 经 常会 对 数据 库 进 行 操作 ， 为 了 提高 代码 的 重用 性 ， 可 以 将 对 数据 库 的 操作 封装 到 一 
个 单独 的 类 中 。 这 样 既 提 高 了 代码 的 重用 性 ， 又 有 利于 程序 的 维护 。 


| 


图 实例 说 明 

本 实例 主要 是 获得 一 个 数据 库 连接 。 运 行 本 实例 , 如 图 5.28 所 示 , 单 击 
“获得 连接 ”按钮 ， 若 数据 库 连 接 成 功 ， 则 提示 “获取 连接 成 功 ” 否则 提 连接 状态 。 诡 取 连接 成 功 9 
示 “ 获 取 连 接 失 败 ”。 


图 关键 技术 


若 要 获得 一 个 数据 库 连接 ， 首 先 要 加 载 数据 库 的 驱动 程序 ， 然 后 再 使 用 图 5.28 获得 数据 库 的 连接 
DriverManager.getConnection() 方 法 来 获得 数据 库 连 接 ， 有 具体 语法 格式 如 下 : 

DriverManager.getConnection(url."sa",™") 

功能 ， 获 取 数 据 库 连 接 实 例 对 象 。 

参数 说 明 

url: 是 数据 库 的 访问 路 径 信息 。 例 如 ， 连 接 SQL Server 2005 的 URL 格式 如 下 : 

jdbe:sqlserver://localhost:1433:DatabaseName=db_javabean 

A Be a Ed i 有 具体 语法 格式 如 下 : 

lass.forN: classname) 

功能 ， 装 载 数据 库 的 驱动 类 。 

参数 说 明 

classname: 数据 库 驱 动 类 的 路 径 ， 如 com.microsoft.sqlserverjdbc.SQLServerDriver。 


< 负 注意 : 在 DriverManagergetConnection() 方 法 中 有 3 个 参数 : url 为 数据 库 的 URL 地址 ，"sa" 为 登录 数据 库 服 
务 器 的 用 户 名 ; 若 登 录 服 务 器 的 密码 为 空 ， 用 "" 表 示 。 


设计 过 程 
(1) 为 实现 本 实例 ， 首 先 需 要 创建 一 个 DB.java 文件 来 处 理 数据 库 的 连接 ， 关 键 代 码 如 下 : 
import java.sql.*; 
public class DB { 
Private Connection con: 
private Statement stm: /用 于 执行 SQL 语句 的 Statement 类 的 实例 对 象 
private ResultSet rs: /结果 集 对 象 
Private String classname="com.microsoft.sqlserver.jdbe.: ServerDriver": 
private String url ="jdbe:sqlserver://localhost:1433:DatabaseName=db_database05"; 
public DBO{ 


获得 连接 


Class forName(classname): /加 载 驱动 程序 
}catch(ClassNotFoundException e) {eprintStackTraceO:} 

} 

public Connection getConO{ 


try{ 
con=DriverManager getConnection(url."sa".”™”): /获得 连接 
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con=null:} 
Tetum con; 


} 
public void closedO{ 
try{ 
if(con!=null)con.close|:; /关闭 连接 
}catch(Exception e)fe printstackTraceO:} 


} 

(2) 创建 连接 数据 库 的 首页 面 index.jsp， 关 键 代码 如 下 : 
<form action="dogetcon.jsp"> 

<table> 


<u> 
<td align="center" height="60" valign="middle"> 
<input type="submit" value=" 获 得 连接 "> 
<htd> 
</> 
</table> 
/form> 


(3) 新 建 一 个 dogetconjsp 页 面 ， 该 页 面 调 用 DB 类 来 获得 一 个 数据 库 连 接 。dogetconjsp 页 面 的 关键 代码 
如 下 : 
<%@ page contentType="text/html;charset=-GBK"%> 


<%(@ page import="java.sql.*"%> 
<jsp:useBean id="db" class="com.jb.db.DB" scope="page"/> 
<% 


Ce con=db.getCon0: // 调 用 DB 类 中 的 getCon0 方 法 来 获得 一 个 连接 
凡 哺 
图 秘笈 心 法 
对 数据 库 的 连接 配置 的 连接 URL、 数 据 库 驱 动 类 、 数 据 库 名 和 数据 库 密码 也 可 以 写 在 *.properties 属性 文件 


中 ， 然 后 应 用 java.util.Properties 类 来 读 取 这 些 属性 值 ， 再 进行 创建 数据 库 的 连接 。 当 需要 更 换 数据 库 时 ， 只 修 
改 属 性 文件 的 配置 即 可 ， 而 不 必 每 次 都 修改 数据 库 连 接 类 的 代码 ， 这 样 更 利于 系统 的 维护 管理 。 


实例 154 


国 实例 说 明 
在 开发 程序 时 ,经 常 需要 将 数据 库 中 的 信息 显示 在 网 页 中 以 供用 户 浏览 和 用 户 各 | 性别 | 年 办 | 职 和 
选择 ， 如 图 5.29 所 示 。 那 么 如 何 将 数据 库 中 的 信息 显示 在 页 面 上 呢 ? 本 实例 me | | 让 
将 解决 这 个 问题 匡 1| 名 后 
用 关键 技术 下 [| 
通过 调用 Statement 对 象 的 executeQuery0 方 法 来 查询 数据 表 并 得 到 一 个 图 5.29 数据 的 查询 


查询 结果 集 ， 语 法 结构 如 下 : 
ResultSet rs=executeQuery(String sql) 
功能 : 执行 查询 语句 并 返回 查询 结果 。 
参数 说 明 
@ sql: 此 参数 是 要 执行 的 SQL 语句 。 例 如 ， 本 实例 中 查询 所 有 信息 的 SQL 语句 如 下 : 
select +| 字 段 名表 from 数据 表 名 
@ rs: 此 参数 是 ResultSet 类 的 实例 对 象 ， 它 用 于 存储 从 数据 库 中 查询 的 结果 集 。 
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图 设计 过 程 


(1) 首先 要 获得 一 个 数据 库 连 接 ， 然 后 才能 对 数据 表 进 行 查询 操作 。 在 实例 153 


入 如 下 方法 来 实现 数据 的 查询 ， 关 键 代 码 如 下 : 
public Statement getStmO{ 
ty{ 
con=getCon0: 
stm=con.createStatement(); 
}catch(Exception e) {e.printStack Trace(System.er7):} 
Teturn stm 


} 
public Statement getStmedO{ 
ty{ 
con=getCon(); 
stm=con.createStatement(ResultSet.TYPE_SCROLL INSENSITIVE. 
ResultSet.CONCUR_READ ONLY); 
}catch(Exception e) {e.printStack Trace(System.er7):} 
Teturn stm 


} 
public ResultSet getAlIRsO{ 
String sql="select * from tb_user"; 
ty{ 
stm=getStmedO; 
TS=stm.executeQuery(sqD): 
}catch(SQLException e){e.printStackTrace();} 
Tetum rs; 
} 
(2) 建立 一 个 数据 查询 的 首页 面 index.jsp， 关 键 代 码 如 下 : 


<form name="searchform" method="post" action="dosearchall.jsp"> 


<table> 
<tr align="center" valign="middle" bgcolor="#CCCCCC" height="22"> 
<td> 用 户 名 </td> 
<td> 性 别 </td> 
<td> 年 龄 <td> 
<td> 职 务 </td> 
</t> 
= ht > 
<% 
ResultSet rs=(ResultSet)session.getAttribute("resultset"); 
while(rs.nextO){ 
%> 
<tr align="center" valign="middle" height="22"> 
<td><%=rs.getString("user_name”") %></td> 
<td><%=rs.getString("user_sex") 90></td> 
<td><%=rs.getInt("user_age”) %></td> 
<td><%=rs.getString("user_job") %></td> 
<t> 
<%}%> 
i ed 
<tr> 
<td align="center" colspan="4"> 
<input type="submit" name="searchall" value=" 查 询 全 部 数据 "> 
<td> 
<t> 
</table> 
</form> 


Ph 的 DB 类 文件 基础 上 加 


(3) 建立 接收 Form 表单 的 页 面 dosearchalljsp， 在 该 页 面 中 进行 数据 查询 操作 ， 关 键 代 码 如 下 : 


<%@ page contentType="text/html;charset-GBK"%> 


<%@ page import="java.sql.*" %> 
<jsp:useBean id="db" class="com jb.db DB" scope="page"/> 
<% 
ResultSet rs=db.getAlIRs0: // 获 得 查询 的 结果 集 
session.setAttribute("resultset",rs); // 将 得 到 的 结果 集 存储 在 session 会 话 中 
Tesponse.sendRedirect("index.jsp"): // 返 回 到 indexjsp 页 面 显示 数据 信息 
%> 
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图 秘笈 心 法 
对 于 数据 库 查 询 方法 的 代码 ， 可 以 将 它 写 在 一 个 类 中 ， 如 果 要 查询 数据 库 中 一 个 表 的 多 条 数据 ， 可 以 定义 
-个 与 表 对 应 的 JavaBean 类 ，JavaBean 类 的 属性 与 表 的 字段 相对 应 ， 然 后 在 查询 方法 中 将 查询 结果 集 的 每 一 行 
数据 封装 在 JavaBean 中 ， 最 后 将 这 些 封装 数据 添加 到 java.util.List 集合 中 。 数 据 库 的 查询 方法 只 返回 一 个 封装 
数据 的 List 集合 即 可 , 然后 在 页 面 中 只 需要 调用 这 个 方法 , 从 而 避免 在 JSP 页 面 中 编写 大 量 对 数据 库 操作 的 Java 
代码 。 


实例 155 


国 实例 说 明 
在 浏览 网 页 时 ， 经 常 需要 得 到 符合 某 个 条 件 的 所 有 信息 。 本 实例 使 用 带 参数 的 查询 方法 来 实现 查询 符合 某 
-条 件 的 所 有 信息 。 运 行程 序 ， 在 图 5.30 所 示 的 页 面 中 选择 “查询 类 型 ”为 “性 别 ” 查询 关键 字 为 “ 男 ”后 ， 


单 击 “查询 ”按钮 即 可 查询 所 有 性 别 为 “ 男 ” 的 记录 ， 如 图 5.31 所 示 。 
用 户 名 性 别 资金 友情 提示 9 
页 明 勇 100.0 查询 结果 如 下 
adnin 去 100.0 用 户 名 | 性别 I 职务 资金 
mi 本 3 页 明 男 | 22 每 理 100.0 
月 去 100-0 ya 勇 | 2 | 职 件 设 寺 | 1000 
主义 勇 100.0 swallow 男 28 老师 100.0 
标 少 天 田 100.0 许久 勇 | 55 员工 1000 
齐心 高 洁 | 田 100.0 荣 少 天 男 | 23 得 理 100.0 
Mr E3 100.0 已 心 高 洁 男 23 作家 100.0 
宙 下 流星 | 男 100.0_ er 勇 | 3 总 经 再 “| 100.0 
查询 类 型 : | 性 9 理光 | | 务 | 22 | 程序 员 | 1000 
图 5.30 带 参数 的 数据 查询 图 5.31 查询 结果 


图 关键 技术 


本 实例 主要 应 用 了 SQL 的 SELECT 语句 从 数据 库 中 查询 符合 条 件 的 记录 , 该 SQL 语句 的 具体 语法 格式 如 下 : 
select +| 字 段 名 表 from 数据 表 名 where 字段 名 = 值 
功能 : 查询 符合 条 件 的 数据 记录 ， 代 码 如 下 : 


Select * from tb_user where username='’yxq' 
图 设计 过 程 
(1) 在 DB 类 中 定义 getPartRs(String subsql,Strig subsqlvalue) 方 法 来 查询 符合 条 件 的 记录 , 并 返回 ResultSet 


类 的 结果 集 。getPartRs0 方 法 的 完整 代码 如 下 : 
…"// 省 略 了 建立 数据 库 连 接 和 获得 Statement 对 象 的 代码 
public ResultSet getPartRs(String subsql.String subsqlvalue) { 


subsqlvalue=""; 
String sql="select * from tb_user where "+subsql+" ="+subsqlvaluet”™™": /生成 SQL 语句 
ty{ 
/ 苞 取 Statement 对 象 
Ts=stm.executeQuery(sqD: /执行 SQL 语句 ， 获 取 结 果 集 
jcatch(SQLException ejfe printstackTraceO:} 
Tetum rs; 1/ 返回 结果 集 对 象 
} 
(2) 创建 带 参数 查询 的 首页 面 index.jsp， 在 该 页 面 中 包含 一 个 下 拉 列 表 框 用 来 显示 查询 的 条 件 ， 一 个 文本 


框 供用 户 输入 所 要 查询 的 值 ， 单 击 “ 查 询 ” 按 钮 进行 表单 提交 。 此 页 面 的 关键 代码 如 下 : 
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Www 起 


厚 了 3 证 


<form name="searchform" method="post" action="dosearchpartjsp"> 
<table> 
<tr bgcolor="lightgrey" height="25"> 
<td align="center"> 用 户 名 </td> 
<td align="center"> 性 别 </td> 
<td align="center"> 年 龄 </td> 
<td align="center"> 职 务 </td> 
<td align="center"> 资 金 </td> 
</tr> 
<% 
ResultSet rsall=db.getAlIRsO; 
while(rsall.nextO){ 
%> 


<td align="center"><9%=rsall.getString("user_name")%6></td> 
<td align="center"><%=rsall.getString("user_sex")%0></td> 
<td align="center"><%=rsall.getInt("user_age")96></td> 
<td align="center"><%=rsall .getString("user_ job")96></td> 
<td align="center"><%=rsall .getFloat("user_money")%6></td> 


<tr bgcolor="lightgrey"> 

<td align="center" colspan="5"> 

查询 类 型 : 

<Sselect name="subsql"> 
<option value="user_name"> 用 户 名 </option> 
<option value="user_sex"> 性 别 </option> 
<option value="user_age"> 年 龄 </option> 
<option value="user_job"> 职 务 </option> 

</select> 

<input type="text" name="subsqlvalue" size="17"> 
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// 获 得 数据 表 中 的 所 有 记录 
/循环 显示 出 所 有 记录 


<input type="submit" name="searchpart" value=" 查 询 " onclick="return check0"> 


</td> 
</tr> 
</table> 
</form> 


(3) 创建 接收 Form 表单 的 dosearchpart.jsp 页 面 ， 在 该 页 面 中 调用 DB 类 中 的 getPartRs0 方 法 进行 查询 ， 


关键 代码 如 下 : 
<%(0 page import="java.sql.*" %> 
<jsp:useBean id="db" class="com.jb.db.DB" scope="page"/> 
<% 
ResultSet rs=null; 
boolean mark=true: 
String mess=""; 
String subsql=request.getParameter("subsql"); 
String subsqlvalue=request.getParameter("subsqlvalue"): 
ee /省 略 部 分 代码 


<table> 

<tr> 
<td align="center" colspan="5"><%=mess%></td> 

</tr> 

<tr bgcolor-"lightgrey" height="20"> 
<td align="center"> 用 户 名 </td> 
<td align="center"> 性 别 </td> 
<td align="center"> 年 龄 </td> 
<td align="center"> 职 务 </td> 
<td align="center"> 资 金 </td> 

</tr> 

<% 


subsqlvalue=new String(subsqlvalue.getBytes("ISO-8859-1")): 


1s=db.getPartRs(subsql.subsqlvalue): 
if(Irs.nextO){ 
%> 


/获取 用 户 选择 的 查询 类 型 
/获取 用 户 输入 的 查询 条 件 


// 调 用 getPartRs0 方 法 进行 带 参数 的 查询 操作 
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<t> 
<td align="center" colspan="5"> 没 有 记录 显示 ! </td> 
</tr> 
<% 
i 
elsef 
TSDrevious0: 
while(rs.nextO){ 
%> 
<t> 
<td align="center"><9%=rs.getString("user_ name")%></td> 


<td align="center"><9%-rs.getString("user_ job")%0></td> 
<td align="center"><9=rs.getFloat("user_money")%></td> 
</tr> 
/while 
i 


%> 
</table> 


图 秘笈 心 法 
如 果 知 道 结果 集 ResultSet 中 每 个 字段 数据 的 索引 ， 在 应 用 ResultSet 对 象 的 getXXX0 方 法 获取 数据 时 ， 也 
可 以 用 索引 指定 ， 索 引 值 是 从 1 开始 的 。 例 如 ， 获 取 结 果 集中 第 二 个 字段 的 值 ， 可 以 用 getXXX(2) 这 种 
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图 实例 说 明 


大 多 数 网 站 都 有 用 户 注册 功能 ， 当 用 户 填写 注册 信息 (如 图 5.32 所 示 )， 单 击 “ 添 加 ”按钮 后 ， 服 务 器 将 
用 户 输入 的 信息 添加 到 数据 库 中 ， 如 图 5.33 所 示 。 


用 户 名 | 性 别 | 年 龄 职务 资金 
夏 明 男 22 经 理 100.0 
adnin | 女 | 21 会 计 100.0 
- yxq | 男 20 软件 设计 | 100.0 
用 记名 :ja swallmw | 男 | 28 老师 1000 
性 别 : | 可 坝 % | 雪 | 24 歌手 100.0 
年 龄 : |20 许久 | 男 23 员工 100.0 
5 荣 少 天 | 男 23 和 经理 100.0 
MS: EE 碟 O 商 洁 | 男 | 23 作家 | io 
次: ho mm | 和 另 | 553 总 和 经理“ | 100.0 
| 添加 重要 将 | 男 | 22 程序 员 “| 100.0 
图 5.32 数据 的 增加 图 5.33 ”增加 数据 后 的 数据 表 
图 关键 技术 
实现 数据 的 增加 使 用 了 insert into 语句 。 该 语句 用 于 向 数据 库 中 插入 数据 记录 ， 其 语法 格式 有 两 种 ， 下 面 分 
别 进 行 介绍 。 
语法 1: 
insert into 数据 表 名 (字段 1. 字 段 2.… 字 段 n) values( 值 1. 值 2.… 值 ) 
语法 2: 


若 该 语句 中 的 字段 与 数据 表 中 的 字段 的 数目 和 结构 都 相同 ， 则 可 以 写成 下 面 的 语句 : 
insert into 数据 表 名 values( 值 1, 值 2.… 值 n) 
设置 了 增加 数据 的 SQL 语句 后 ， 还 要 使 用 Statement 对 象 的 executeUpdate() 方 法 通过 执行 该 SQL 语句 来 实 
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ar 
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数据 表 中 增加 记录 。 该 方法 的 语法 格式 如 下 : 


executeUpdate(String sql) 
功能 : 执行 SQL 更 新 语句 。 

参数 说 明 

sql: 为 向 数据 库 中 增加 数据 的 SQL 语句 。 


图 设计 过 程 


(1) 在 DB 类 中 定义 insert0 方 法 用 于 执行 向 数据 库 中 插入 记录 的 SQL 语句 。 在 该 方法 
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方法 ， 可 参见 光盘 中 的 相关 代码 。insert0 方 法 的 完整 代码 如 下 : 


…/ 省 略 了 建立 数据 库 连 接 和 获得 Statement 对 象 的 代码 
public int insert(String sqD{ 
int pum=—-1; 
id 一 olDeqF 
ty{ 
stm=getStmed(); 
num=stm.executeUpdate(sql); 
}catch(Exception ejfe.printstackTraceO:num=-13} 
return num; 


} 


bh 用 到 了 getStmedO 


(2) 创建 接收 Form 表单 数据 的 页 面 doinsertjsp， 在 该 页 面 中 设置 了 SQL 语句 并 进行 增加 操作 ， 关 键 代码 


如 下 : 


<jsp:useBean id="db" class="com.jb.db.DB"/> 
<html> 
<head> 
<title> 增 加 数据 </title> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 


Si Username=request.getParameter("username"); 
…// 省 略 了 获取 其 他 属性 的 代码 
float money=0; 
boolean mark=true; 
if(username=——=nullllusername.equals("")){ 

mark=false: 

Imess="<li> 请 输入 <b> 用 户 名 ! </b></li>"; 


} 
“…// 省 略 了 判断 其 他 属性 的 代码 
if(mark){ 
ty{ 
age=Integer.parseInt(userage); 


}catch(Exception e){mark=false;mess+="<li> 输 入 的 <b> 年 龄 </b> 不 是 数字 ! </li>";} 


ty{ 
money=Float.parseFloat(usermoney): 


}catch(Exception e) {mark=false:mess+="<li> 输 入 的 <b> 资 金 </b> 不 是 数字 ! </li>":} 


} 
ifmark){ 


username=new String(username. getBytes("ISO-8859-1"),"gbk"); 


Usersex=new String(usersex.getBytes("ISO-8859-1"),"gbk"); 
)"gbk 
String sql="insert into tb_user values("+username+","+usersex+","+age+","+userjob+","+money+")"; 


Userjob=new String(userjob.getBytes("ISO-8859-1" 


int i=db.insert(sq)): 


mess=" 插 入 失败 1 “: 
i 
%> 
<table> 
<tr bgcolor="lightgrey"> 
<td> 友 情 提示 ! </td> 
<> 
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<t> 
<td align="center"><%=mess%></td> 
</r> 
/table> 


国 秘笈 心 法 
在 获取 表单 请 求 数据 时 ， 经 党 发 生 的 问题 就 是 中 文 天 码 ， 如 果 页 面 的 编码 格式 不 统一 ， 就 会 发 生 这 样 的 问 


题 。 因 此 ， 在 获取 表单 请 求 数据 之 前 ， 首 先 确定 页 面 的 编码 格式 是 否 一 致 ， 如 表单 页 的 编码 格式 为 UTF-8， 那 
么 在 获取 表单 请 求 的 处 理 页 或 Servlet 中 ， 也 应 该 设置 编码 格式 为 a 8。 
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图 实例 说 明 

任何 网 站 都 需要 维护 和 更 新 数据 库 中 的 数据 ， 其 中 使 用 最 频繁 的 是 对 数据 的 修改 操作 ， 如 论坛 中 需要 提供 
用 户 昵称 和 头像 的 修改 或 更 新 回帖 的 数量 等 。 本 实例 主要 实现 的 是 修改 数据 库 中 的 某 条 记录 。 如 图 5.34 所 示 ， 
在 “用 户 名 ”文本 框 中 输入 需要 更 新 基本 信息 的 用 户 名 并 单 击 “ 更 新 该 用 户 ”按钮 ， 如 果 输 入 的 用 户 名 存在 ， 


则 跳 转 到 showupdatejsp 页 面 ， 如 图 5.35 所 示 。 进 行 更 新 操作 ， 更 新 后 的 结果 如 图 5.36 所 示 ， 否 则 显示 提示 
信息 
lI et 
i 站 各 二 演 3 2 m | 男 3 | 总 经 理 100.0 
waile| 男 | 28 | 老师 1000 证 mee| 男 | 2 | 才 师 100.0 
ra | 男 | 22 | 员工 1000 用 户 各: [ra yxa | 男 | 22 | 员工 150.0 
页 真 流星 | 男 | 22 | 程序 员 100.0 站 我 实 流星 | 男 | 22 | 程序 员 100.0 
出 有 | 男 | zz | 经 晶 | 1000 性 别 : | 罗 英明 | 男 | 22 | 经 理 100.0 
| 虚心 高 十 | 男 | 23 | 作家 100.0 年 前 : |22 虚心 高 填 | 男 | 2: 作家 100.0 
许 X | 男 | 23 | 员工 108.0 了 :| 并 许久 | 男 | 23 | 员工 108.0 
雨 % | 女 | 24 | 职 手 ED = 雨 % | 女 | 24 | 职 手 ED 
张 E* | 女 | 24 | 服务 生 500.0 资金 : 50 张 E* | 女 | 24 | 服务 生 500.0 
用 户 名 : | 更 新 该 用 户 更 新 | | 重要 用 户 名 : | EE 
图 5.34 更 新 前 的 用 户 信息 5.35 填写 更 新 信息 5.36 更 新 后 的 用 户 信息 


图 关键 技术 


本 实例 调用 了 Statement 对 象 的 executeUpdate() 方 法 执行 SQL 语句 来 实现 数据 的 更 新 。 实 例 中 使 用 的 SQL 
语句 为 更 新 (UPDATE) 语句 ， 语 法 格式 如 下 : 

UPDATE 数据 表 名 SET 字段 名 = 值 [. 字 段 名 1= 值 1…, 字 段 名 n= 值 mn]where 字段 名 = 值 

功能 : 更 新 数据 表 的 数据 。 


图 设计 过 程 
(1) 在 DB 类 中 用 定义 update0 方 法 来 执行 更 新 数据 表 的 SQL 语句 。 在 该 方法 中 用 到 的 getStmed0 方 法 的 


相关 代码 可 参见 光盘 。update0 方 法 的 完整 代码 如 下 : 
“…// 省 咯 了 建立 数据 库 连接 和 获得 Statement 对 象 的 代码 


}catch(Exception Opis a } 
return nom:; 


入 
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(2) 创建 数据 更 新 的 首页 面 index.jsp， 该 页 面 要 求 用 户 输 入 要 修改 的 用 户 名 ， 关 键 代码 如 下 : 
<form action="dosearch jsp" name="searchuserform"> 
<table> 
<tr bgcolor="lightgrey" height="25"> 
<td align="center"> 用 户 名 </td> 
<td align="center"> 性 别 </td> 
<td align="center"> 年 龄 </td> 
<td align="center"> 职 务 </td> 
<td align="center"> 资 金 </td> 
</tr> 
<%0 
ResultSet rsall=db.getRs("select * from tb_user"); /执行 SQL 语句 ， 获 取 结 果 集 
while(rsall. nextO){ // 循 环 结果 集 ， 显 示 数据 表 中 的 所 有 信息 
%> 
<t> 
<td align="center"><%=rsall.getString("user_name")9%></td> 
<td align="center"><%=rsall .getString("user_sex")9></td> 
<td align="center"><%=rsall.getInt("user_age")96></td> 
<td align="center"><%=rsall.getString("user_job")9%6></td> 
<td align="center"><%=rsall.getFloat("user_money")%></td> 
<tr> 
<% 
’ 
%> 
<tr bgcolor="lightgrey"> 
<td colspan="1" align="center"> 用 户 名 : </td> 
<td colspan="3" align="cener"> 
<input type="text" name="searchusername"> 
<ltd> 
<td align="center" colspan="1"> 
<input type="submit" name="searchsubmit" value=" 更 新 该 用 户 " 
‘onclick="return searchcheckO"> 


<td> 
<t> 
‘</table> 
/form> 
(3) 创建 处 理 Form 表单 的 页 面 dosearch.jsp。 在 该 页 面 中 查询 输入 的 用 户 名 是 否 存 在 ， 如 果 存 在 ， 跳 转 到 
showupdate.jsp 页 面 ， 否则 显示 提示 信息 ， 关 键 代 码 如 下 : 
<%@® page import="java.sql.*" 9%6> 
<jspruseBean id="db" class="com.jb.db.DB"/> 
<% 
String mess=""; 
boolean mark=true; 
String username=request.getParameter("searchusername”); // 获 取 用 户 输入 的 姓名 
if(username—nullllusername.equals(""){ 
mark=false; 
mess="<li> 请 输入 <b> 用 户 名 ! </b></li>"; 


Usemame=new String(username.getBytes("ISO-8859-1")."gbk"); 
String sql="select * from tb_user where user_name="+username+"": ”// 按 用 户 名 查询 表 


ResultSet rs=db.getRs(sq]): /获取 查询 结果 集 
iftrs.nextO){ // 遍 历 查询 结果 集 
session.setAttribute("searchusermame".rs.getString("user_name")); // 将 姓名 保存 在 当前 会 话 中 
db.closed0: /关闭 数据 库 连接 
Tesponse.sendRedirect("showupdate.jsp"): // 跳 转 到 showupdate.jsp 页 面 
上 
db.closedO; 
mess=" 您 输入 的 用 户 名 不 存在 !"; 
} 
%> 
<table> 
<tr bgcolor="lighterey"> 


<td> 友 情 提示 ! </td> 
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</tr> 
<t> 
<td align="center"><%=mess%></td> 
</tr> 
</table> 


(4) 创建 供用 户 输入 更 新 信息 的 页 面 showupdatejsp， 关 键 代码 如 下 : 
<form action="doupdatejsp" name="updateform"> 
<table> 
<t> 
<td colspan="2" align="center" bgcolor="lightgrey"> 
请 填写 更 新 信息 ! 
</td> 
</tr> 
<t> 
<td align="right"> 用 户 名 : </td> 
<td><%=(String)session.getAttribute("searchusername")%></td> 
</tr> 
<t> 
<td align="right"> 性 别 :</td> 
<td><input type="text" name="usersex" maxlength="1"></td> 
</t> 
…/ 省 略 了 其 他 用 户 信息 的 代码 
<tr> 
<td colspan="2" align="center"> 
<input type="submit" name="submit" value=" 更 新 " onclick="return check0"> 
<input type="reset" name="reset" value=" 重 置 "> 
<td> 
</tr> 
</table> 
</form> 


(5) 创建 处 理 步骤 (4) 中 Form 表单 的 页 面 doupdate.jsp。 该 页 面 用 来 接收 表单 数据 ， 并 进行 更 新 操作 。 
如 果 更 新 成 功 ， 则 跳 转 到 index.jjsp 页 面 ， 否 则 显示 提示 信息 ， 关 键 代码 如 下 : 


jspiuseBean id="db" class="com.jb.db.DB"/> 


<% 
String mess=""; 
String username=(String)session.getAttribute("searchusername"); /1/ 获 取 用 户 名 
String usersex=request.getParameter("usersex"); /1/ 性 别 
String userage=request.getParameter("userage"); /年 龄 
String userjob=request.getParameter("userjob"); /职位 
String 。 usermoney=request.getParameter("usermoney"): /资金 
int age=0; 
float money=0: 
boolean mark=true: 


Iusername—nnuilliasemname.equals("")){ 
mark=false: 
mess="<li> 请 输入 <b> 用 户 名 ! </b></li>"; 


} 
…// 省 略 了 判断 其 他 属性 的 代码 


Rs 
try: 
age=IntegerparseInt(userage): /| 转换 为 整 型 
}catch(Exception e){mark=false;mess+="<li> 输 入 的 <b> 年 龄 <b> 不 是 数字 ! </li>";} 
try{ 
money=Float.parseFloat(usermoney): /资金 转换 为 浮 点 型 
}catch(Exception ej{fmark=false:mess+="<li> 输 入 的 <b> 资 金 <b> 不 是 数字 ! </li>";} 
了 
if(mark){ 


Usersex=new String(usersex.getBytes("ISO-8859-1")."gbk"); 
Userjob=new String(userjob.getBytes("ISO-8859-1")."gbk"); 
String sql="update tb_user set user_ sex—"tusersex+ 
"user age="taget",.user job="+userjob+ 
™", user_money="+money+" where user_name="+username+"; /生成 SQL 语句 


int i=db.update(sql); /执行 SQL 语句 
db.closed(: /关闭 数据 库 连接 
if(i<=0) 

mess=" 更 新 失败 ! "; 
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<tr bgcolor="lightgrey"> 
<td> 友 情 提示 ! </td> 
</t> 
<t> 
<td align="center"><%=mess%></td> 
< 
</table> 
图 秘笈 心 法 
在 本 实例 实现 的 更 新 方法 中 ， 应 用 到 的 Statement 接口 可 以 改 为 PreparedStatement 接口 。 应 用 
PreparedStatement 对 SQL 语句 进行 预 编译 ， 这 样 ， 在 编写 SQL 语句 时 ， 就 可 以 用 “?” 占 位 符 来 代替 直接 编写 
在 SQL 语句 中 的 参数 变量 , 然后 再 应 用 PreparedStatement 的 setXXX0 方 法 为 参数 进行 赋值 , 这 样 可 以 避免 SQL 
语句 的 注入 式 攻击 。 
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图 实例 说 明 


本 实例 实现 删除 数据 库 中 的 某 条 记录 的 功能 。 运 行 本 实例 ， 在 “用 户 名 ”文本 框 中 输入 yxq， 如 图 5.37 所 
示 ， 单 击 “删除 该 用 户 ” 按 钮 即 可 将 该 用 户 删除 ， 删 除 后 的 结果 如 图 5.38 所 示 。 


删除 该 用 户 

用 户 名 | 性 别 | 年 龄 

页 明 | 男 | 22 性 别 | 年 龄 | 职务 资金 
adnin | 女 21 男 22 | 经 理 100.0 

yq 男 22 玄 | 21 会 计 | 100.0 
swallov| 男 | 26 男 | 2 | 老师 | 100.0 
两 | 女 | 24 女 | 24 | 歌手 | 100.0 
许久 | 男 | 23 男 | 23 | 员工 | 1000 
荣 少 天 | 男 | 23 男 | 23 | 经 理 | 100.0 
虚心 高 洁 | 男 | 23 男 | 23 | 作家 | 100.0 

mr 男 | 23 男 | 23 | 总 经 理 | 100.0 
寂 址 流星 | 男 | 22 男 | 22 | 程序 员 100.0 
用 户 各 :| 户 

图 5.37 5.38 ”删除 后 


图 关键 技术 


本 实例 主要 调用 Statement 对 象 的 executeUpdate() 方 法 执行 SQL 语句 来 实现 数据 的 删除 ,实例 中 使 用 的 SQL 
语句 为 DELETE 语句 ， 具 体 语 法 格式 如 下 : 
delete from 数据 表 名 where 字段 名 = 值 
功能 : 删除 数据 表 中 的 某 条 记录 。 
图 设计 过 程 
(1) 在 DB 类 中 定义 delete0 方 法 执行 删除 数据 的 SQL 语句 ， 完 整 代码 如 下 : 
…/[ 省 略 了 建立 数据 库 连接 的 代码 
Public int delete(String sq){ 
int nom=0; 
(sql—nnll)sql=""; 
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ty{ 
stm=getStmedO; 
num=stm.executeUpdate(sql); 
}catch(Exception e) {e.printStackTraceO):num—1:} 
Teturn num; 
} 

(2) 创建 删除 数据 的 首页 面 index.jsp， 关 键 代码 如 下 : 
<form action="dodelete.jsp" name="deleteform"> 
<table> 
<tr bgcolor="lightgrey" height="25"> 

<td align="center"> 用 户 名 </td> 

<td align="center"> 性 别 </td> 

<td align="center"> 年 龄 </td> 

<td align="center"> 职 务 </td> 

<td align="center"> 资 金 </td> 
< 
<% 

ResultSet rsall=db.getRs("select * from tb_user"); // 查 询 数 据 库 中 的 记录 

while(rsall.nextO){ // 显 示 数据 表 中 的 所 有 记录 
%> 
<t> 

<td align="center"><%=rsall.getString("user_ name")%></td> 

<td align="center"><%=rsall.getString("user_sex")%></td> 

<td align="center"><%=rsall.getInt("user_age")%></td> 

<td align="center"><%=rsall.getString("user_job")%></td> 

<td align="center"><%=rsall.getFloat("user_money")%></td> 
<t> 


<tr bgcolor="lightgrey"> 
<td colspan="1" align="center"> 用 户 名 : </td> 


<td colspan=' ="Cener"> 
<input type="text" name="delusername"> 
<td> 


<td align="center" colspan="1"> 
<input type="submit" name="delsubmit" value=" 删 除 该 用 户 " onclick="return check0"> 
<td> 
</tr> 
</table> 
</form> 
(3) 创建 处 理 Form 表单 的 页 面 dodeletejsp。 该 页 面 进行 数据 删除 操作 , 如 果 删 除 成 功 , 则 跳 转 到 index.jsp 
页 面 ， 否则 显示 提示 信息 ， 关 键 代码 如 下 : 
<%(@0 page import="java.sql.*" 9%6> 
<jsp:useBean id="db" class="com.jb.db.DB" scope="page"/> 
<% 
boolean mark=true: 
String mess=""; 
String username=request.getParameter("delusername”): 
if(tusermame—nullllusemame.equals("")){ 
mark=false; 
mess="<li> 请 输入 <b> 用 户 名 ! </b></li>"; 
| 
这 mark){ 
username=new String(username.getBytes("ISO-8859-1")."gbk"); 
String sql="select * from tb_user where user_name="+usernamet"™"; 
ResultSet rs=db.getRs(sql); 
if(!rs.nextO){ 
mess=" 输 入 的 用 户 名 不 存在 !"; 
} 
elsef 
sql="delete from tb_user where user_name="+usernamet"™™; // 生 成 SQL 语句 
int num=db.delete(sqD: /调用 执行 SQL 语句 的 方法 
dbclosed0: 1/ 关闭 数据 库 连接 
if(num>0) 
response.sendRedirect("index.jsp"); 
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mess=" 删 除 失败 ! "; 


} 


} 
%> 


<table> 
<t> 


<td align="center"><%=mess%></td> 
<u> 


</table> 


图 秘笈 心 法 
在 实际 应 用 中 ， 


- 般 都 是 根据 ID 来 删除 表 数 据 的 ， 因为 只 有 ID 是 唯一 的 ， 其 他 字段 值 都 有 可 能 存在 重复 ， 


这 样 可 以 避免 误 删 除 其 


他 数据 。 本 实例 并 没有 根据 表 的 ID 值 来 删除 数据 , 是 由 于 此 前 设置 了 在 添加 用 户 信息 时 ， 


用 户 名 字段 的 值 不 能 如 


| 


图 实例 说 明 


数据 库 分 页 是 指 通过 查询 语句 从 数据 库 中 查询 出 某 页 所 要 显示 的 数据 。 
本 实例 将 从 数据 库 中 查询 出 每 个 页 面 需要 显示 的 记录 数 。 例 如 ， 某 一 数据 表 《 火 拉 泡 泡 龙 ) | 可 商 | 110mB| 虚心 高 洁 


中 有 10 条 记录 ， 若 以 每 页 4 条 记录 来 进行 显示 ， 在 显示 第 二 页 信息 时 ， 只 需 本 
查询 从 第 5 条 开始 到 第 8 条 的 所 有 记录 ， 实 例 运 行 结果 如 图 5.39 所 示 。 CR | ED 


图 关键 技术 


EE 复 。 读 者 可 以 对 本 实例 稍 作 改 动 ， 应 用 表 的 ID 来 实现 删除 数据 。 


游戏 和 名 [人气 | 大 小 | 上 传 者 


查询 第 一 页 


由 于 本 实例 使 用 的 是 SQL Server 数据 库 , 而 SQL Server 对 于 查询 分 页 的 图 5.39 数据库 的 分 页 显示 
SQL 语句 主要 应 用 的 是 Top 关键 字 ， 具 体 代码 如 下 : 
select top m * from tb_game where id>(select MAX(id) from(select top (n-1)*m (id) from tb_game) as maxid) 


功能 : 查询 出 只 在 当前 页 需要 显示 的 所 有 记录 。 


参数 说 明 

@n 为 当前 页 码 ， 
四 子 查 询 语句 1: 
目 子 查询 语句 2: 


m 为 每 页 显示 的 记录 数 ，id 是 一 个 被 设 为 自动 编号 的 初始 值 为 1、 增 量 为 1 的 字段 名 。 
“select top(n-1)*m (id) from tb_game” 表 示 从 tb_game 表 中 查询 出 第 n 页 前 的 所 有 记录 。 
“select MAX(id) from(select top (n-1)*m (id) from tb_game) as maxid” 表 示 从 子 查询 语句 1 


中 查询 出 字段 id 中 的 最 大 值 。 


图 设计 过 程 


(1) 在 对 数据 库 进行 操作 的 DB 类 中 定义 如 下 属性 和 方法 ， 关 键 代 码 如 下 : 


private int num_per=4; // 每 页 显示 的 记录 数 
private int num rs=0; /总 记录 数 
Private pages Ao: all=0; /总 页 数 
Ee int page /1/ 当 前 页 数 
*…// 省 | 路 了 人 和 这 数据库 连接 和 获得 Statement 对 象 的 代码 
public void setPageInfo(int page){ /在 该 方法 中 计算 出 总 记录 数 、 总 页 数 
// 并 对 通过 参数 传递 的 当前 页 数 进行 判断 
String sql="select * from tb_user"; 
ty{ 
stm=getStmedO; 
this.rs=stm.executeQuery(sqD): 
this.rs.last|; // 将 记录 指针 移动 到 最 后 一 条 记录 
this.num rs=this.rs.getRowO: /获取 当前 指针 所 指 记录 的 行 号 ， 即 总 记录 数 
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W/ 计 算出 总 页 数 

this.pages_all=(num rs%num per—0)?(num rs/num per):(num rs/num per)+1 

if(page<1) // 由 参数 传递 过 来 的 当前 页 数值 如 果 小 于 1， 则 将 当前 页 数 设 置 为 1 
this.page_current=1; 

else if(tpage>pages all) 由 参数 传递 过 来 的 当前 页 数值 如 果 大 于 总 页 数 ， 则 将 当前 页 数 设 置 为 总 页 数 
this.page_current=this.pages all; 

else 
this.page_current=page; 

}catch(SQLException e){e.printStackTrace();} 
} 


public ResultSet getPageRsO{ /数据 库 分 页 显示 的 关键 代码 
intidnum=(this page_current-l)*+this num per// 第 mn 页 之 前 的 记录 数 
String sql=""; 
if(this.page_current—1) // 判 断 是 否 为 第 一 页 


sql="select top "+this.num per+”" * from tb_game"; 
else 
sql="select top "Hthis num pert+" * from tb_game where id>(select MAX(id) from(select top "tidnum+" (id) from tb_game) as maxid)"; 
ty{ 
rs=stm.executeQuery(sql); 
}catch(Exception e){e.printStack TraceO:} 
Tetum rs; 


} 
public int getNumperO{ /返回 每 页 显示 记录 数 的 方法 
Tetum this.num_per' 


} 
public int getNumrsO{ // 返 回 总 记录 数 的 方法 
Tetum this.num rs; 


} 
public int getPagesallO{ /返回 总 页 数 的 方法 
Tetum this.pages_all; 


} 

public int getPagecurrentO{ /返回 当前 页 数 的 方法 
Tetum this.page_current: 

} 


(2) 创建 分 页 显示 的 首页 面 index.jsp， 关 键 代码 如 下 : 
<%(0 page import="java.sql.*,com.jb.db.DB" %> 
<% DB db=new DB0; %> 
<form name="searchform" method="post" action="dopagedb.jsp"> 
<table> 

<tr align="center" valign="middle" bgcolor="#CCCCCC" height="22"> 
<td> 游 戏 名 </td> 
<td> 人 气 </td> 
<td> 大 小 </td> 
<td> 上 传 者 <ltd> 

</tr> 

<% 
ResultSet rs=(ResultSet)session.getAttribute("pageresultset"); 
ifrs 一 nulD){ 

%> 

<tr align="center" valign="middle"><td colspan="4"> 没 有 记录 显示 ! </td> 

</to> 

<% 
} 
else{ 

db=(DB)session. getAttribute("db"); 
while(rs.nextO){ 

%> 

<tr align="center' valign="middle" height="22"> 
<td><%=rs.getString("game_name”) %></td> 
<td><%=rs.getString("game_hot") %></td> 
<td><9=rs.getString("game size") %></td> 
<td><%=rs.getString("game_uper") %></td> 

<ft> 

<% 

%> 

<tr bgcolor="lightgrey"> 
<td colspan="4" align="center"> 
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每 页 ，<9%=db.getNumper096>/<%6=db.sgetNumrs09%6> 条 记录 
Snbsp&nbsp: 
当前 页 : <%=db.getPagecurrent0%>/<%=db.getPagesall0%> 页 
</td> 
<t> 
<% 
%> 
<t> 
<td align="center”" colspan="4"> 
<input type="submit" name="searchall" value=" 查 询 第 一 页 "> 
</td> 
<> 
/以 下 为 显示 分 页 导航 信息 的 代码 
<%if(db.getPagesall0>1){%> 
<tr bgcolor="lightgrey"> 
<td align="center" colspan="4"> 
<%if(db.getPagecurrentO>1){%> 
<a href="dopagedb.jsp?currentpage=1"> 第 一 页 </a> 
<a href="dopagedb.jsp?currentpage=—<%=db.getPagecurrent()-1%>"> 上 一 页 </a> 
<%}%> 
<%ifldb.getPagecurrentO<db.getPagesall0){9b> 
<a hre 人 "dopagedb,jsp?currentpage=<9%o=db.getPagecurrent0+196>"> 下 一 页 </a> 
<a href="dopagedb.jsp?currentpage=<%=db.getPagesall0%>"> 最 后 一 页 </a> 


(3) 创建 处 理 Form 表单 的 页 面 dopagedbjsp， 关 键 代码 如 下 : 
<%(0 page import="java.sql.*" 9%6> 
<jsp:useBean id="db" class="com jb db DB" scope="page"/> 


<% 
String strpage=request.getParameter("currentpage”); // 获 取 当 前 要 显示 的 页 码 
ifl(strpage—nullllstrpage.equals(™")) 
strpage="1"; // 默 认为 第 一 页 
int currentpage=1; 
ty{ 
currentpage=Integer.parseInt(strpage): 
}catch(Exception e){currentpage=1;} 
db.setPageInfo(currentpage); 
ResultSet rs=db.getPageRs(): /获取 当前 页 面 要 显示 的 内 容 
session.setAttribute("db",db); // 将 呈 对 象 保存 到 当前 会 话 中 
session.setAttribute("pageresultset" rs); // 将 查询 结果 集 保存 到 当前 会 话 对 象 中 
Tesponse.sendRedirect("index.jsp"): // 跳 转 到 indexjsp 页 面 
%> 


图 秘笈 心 法 


在 本 实例 的 dopagedb.jsp 页 面 中 ， 将 db 对 象 放 入 session 会 话 中 是 为 了 在 返回 到 index.jsp 页 面 后 能 够 使 用 
同一 个 db 对 象 ， 而 不 是 重新 实例 化 一 个 DB 类 对 象 。 如 果 想 在 不 同 JSP 页 之 间 使 用 同一 个 JavaBean 实例 ， 读 
者 还 可 以 在 使 用 <jsp:useBean/> 标 签 时 将 scope 属性 设置 为 session 范围 。 
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国 实例 说 明 


本 实例 讲解 的 是 将 用 户 查询 到 的 所 有 的 信息 进行 分 页 显示 。 例如， 数据 表 中 有 10 条 记录 ， 以 每 页 4 条 记录 
进行 显示 ， 若 要 显示 第 二 页 的 信息 ， 首 先 应 查询 出 所 有 的 记录 ， 然 后 在 查询 出 的 全 部 记录 中 查找 要 显示 第 二 页 
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信息 的 开始 位 置 。 如 图 5.40 所 示 , 当 用 户 单 击 “ 查 询 全 部 数据 ”按钮 后 , 程序 将 查询 出 来 的 数据 存储 到 ResultSet 
结果 集中 ， 然 后 单 击 “ 下 一 页 ” 超 链 接 ， 从 该 结果 集中 查找 起 始 位 置 并 显示 


应 的 信 用 户 名 性 别 | 年 龄 | 职务 
出 相应 的 信息 。 Ea 
> 许久 男 3 | 员工 
关键 技术 荣 少 天 男 经 理 
本 实例 根据 当前 的 页 数 来 确定 结果 集中 记录 指针 的 位 置 。 该 位 置 可 以 通 。 [ass | 3 名人 5 
过 下 面 的 算法 得 到 : (当前 页 数 -1) * 每 页 显示 的 记录 数 +1。 得 到 该 位 置 后 就 | 查询 全 部 数据 
可 以 使 用 ResultSet 对 象 的 absolute(int pos) 方 法 来 移动 记录 指针 至 指定 位 置 。 Ee 
图 5.40 数据 库 分 页 显示 
图 设计 过 程 
(1) DB 类 的 关键 代码 如 下 : 
Private int num_per=4: /| 每 页 显示 的 记录 数 
Private int num _rs=0; // 总 记录 数 
Private int pages_all=0; /总 页 数 
private int page_current=1; // 当 前 页 数 
…// 省 略 了 建立 数据 库 连接 的 代码 
public Statement getStmedO{ 
ty{ 
con=getCon(O; 
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stm=con.createStatement(ResultSet.TYPE_SCROLL _INSENSITIVE, ResultSet.CONCUR_READ_ONLY);// 只 读 模式 
jcatch(Exception e){e.printStackTrace(System.er7’);} 
Teturn stm; // 返 回 Statement 对 象 


} 
public void setPageInfo(int page){ 


String sql="select + from tb_user"; /声明 SQL 语句 
ty{ 
stm=getStmedO; /获取 Statement 对 象 
this.rs=stm.executeQuery(sql); /| 执行 SQL 语句 
this.rs.last|; // 将 记录 指针 移动 到 最 后 一 条 记录 
this.num rs=this.rs.getRow(); /获取 当前 指针 所 指 记录 的 行 号 ， 即 总 记录 数 
/计算 出 总 页 数 
this.pages_all=(num rs%num per 一 0)?(num rs/num per):(num rs/num per) 
if(page<1) 参数 生 闻 过 寄 拘 当前 页 数 全 如 果 小 于 1， 则 将 当前 页 数 设 置 为 1 
this.page_current=1; 
else if(page>pages_all) W 由 参数 传递 过 来 的 当前 页 数值 如 果 大 于 总 页 数 ， 则 将 当前 页 数 设 置 为 总 页 数 
this.page_current=this.pages_all; 
else 


this.page_current=page; 
}catch(SQLException e) {e.printStackTrace(:} 


} 
public ResultSet getPageRsO{ // 对 结果 集 进 行 分 页 显示 的 关键 代码 


ty{ 
int pos=(this.page_current-1)*this.num per+1: // 设 置 记录 指针 要 移 到 的 位 置 
this.rs.absolute(pos); // 将 结果 集 记录 指针 移动 到 指定 位 置 
}catch(Exception efe.printStackTraceO:} 
Tetum this.rs; 


} 
(2) 创建 分 页 显示 的 首页 面 index.jsp， 关 键 代码 如 下 : 
-<form name="searchform" method="post" action="dopagersjsp"> 
<table> 
<tr align="center" valign="middle" bgcolor="#CCCCCC" height="22"> 
<td> 用 户 名 </td> 
<td> 性 别 </td> 
<td> 年 龄 </td> 
<td> 职 务 </td> 


</tr> 
/如果 session 会 话 中 不 存在 ResultSet 对 象 
<tr align="center" valign="middle"> 

<td colspan="4"> 没 有 记录 显示 ! </td> 
<t> 
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/否则 
<% 
db=(DB)session.getAttribute("db"); 
int i=1; /变量 i 用 来 控制 显示 的 记录 数 
TSJpreviousO: /将 指针 移动 到 当前 所 指 记录 的 前 面 ， 否 则 在 下 面 调用 next0 方 法 时 将 错过 一 条 记录 
while(rs.nextO&&i<=db.getNumperO){ 
%> 


<tr align="center" valign="middle" height="22"> 
<td><%=rs.getString("user_name") %></td> 


<> 
<% 
寺村 


} 
%> 
…// 此 处 省 略 了 显示 分 页 信息 的 代码 
<t> 


<td align="center" colspan="4"> 
<input type="submit" name="searchall" value=" 查 询 全 部 数据 "> 
<htd> 


</tr> 

…"/ 此 处 省 略 了 显示 分 页 导航 信息 的 代码 
</table> 
</form> 


(3) 创建 处 理 Form 表单 的 页 面 dopagers.jsp， 关 键 代码 如 下 : 
<jsp:useBean id="db" class="com.jb.db.DB" scope="page"/> 
<% 
String strpage=request.getParameter("currentpage"); /获取 要 显示 的 页 码 
iflstrpage—nullllstrpage.equals("™"))strpage="1"; 


int currentpage=1; 
1 


currentpage=Integer.parseInt(strpage); 
jcatch(Exception e){currentpage=1:} 
db.setPageInfo(currentpage); 
ResultSet rs=db.getPageRs(); // 调 用 getPageRs0 方 法 来 设置 记录 指针 移 至 指定 位 置 
session.setAttribute("db",db); // 将 一 个 实例 化 的 DB 类 对 象 放 入 session 会 话 中 
Session .setAttribute("pageresultset"rs): /将 设置 好 的 结果 集 放 入 session 会 话 中 
Tesponse.sendRedirect("index.jsp"): // 返 回 到 indexjsp 页 面 


图 秘笈 心 法 


在 本 实例 中 ， 通 过 Statement 对 象 的 executeQuery(String sql) 方 法 得 到 的 结果 集 必须 是 可 滚动 的 。 也 就 是 说 ， 
在 本 实例 中 Statement 对 象 是 通过 调用 DB 类 中 的 自 定义 方法 getStmed0 得 到 的 ， 通 过 该 方法 得 到 的 Statement 
对 象 才 可 以 获得 可 滚动 的 结果 集 。 


实例 161 | 
实例 实用 指数 : 食 食 广 食 : 


图 实例 说 明 
数据 库 连 接 是 一 个 占用 资源 很 大 的 操作 , 所 以 在 对 数据 库 的 操作 结束 后 ， ER 


应 及 时 关闭 连接 。 本 实例 将 介绍 如 何 关 闭 数据 库 连 接 , 实例 运行 效果 如 图 5.41 
所 示 。 
| | 关键 技术 请 确保 您 的 浏览 器 支持 JavaSceript 脚 本 9 
5.41 关闭 数据 库 
关闭 数据 库 连接 ， 主 要 调用 的 是 java.sql.Connection 接口 的 close0 方 法 。 


区 得 连接 | | 关闭 连接 | 
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关闭 数据 库 连 接 的 目的 ， 就 是 为 了 释放 数据 库 连 接 所 占用 的 系统 资源 。 
图 设计 过 程 


(1) 在 对 数据 库 进 行 操作 的 DB 类 中 定义 如 下 方法 ， 关 键 代码 如 下 : 
…/ 省 略 了 建立 数据 库 连 接 和 获得 Statement 对 象 的 代码 


public void closedO{ 
ty{ 
iftrs!=null)rs.closeO; 1/ 关闭 号 对 象 
}catch(Exception e){e.printStack Trace();} 
ty{ 
if(stm!=null)stm.closeO: 1/ 关闭 stm 对 象 
}catch(Exception e) {e.printStack TraceO;} 
ty{ 
这 con!=nulD)con.closeO: 1/ 关闭 con 对 象 
} catch(Exception e){e.printStackTrace():;} 
(2) 创建 关闭 数据 库 的 首页 面 index.jsp， 关 键 代码 如 下 : 
<script language="javascript"> 
function changeO{ 
document.connectionform.action="doclose.jsp"; 
3 


</script> 
<form action="dogetcon.jsp" name="connectionform"> 
<table> 
<tr><td> 此 处 为 显示 当前 连接 状态 代码 (省 略 )</td></tr> 
<tr> 
<td align="center" height="60" valign="middle"> 
<input type="submit" name="create" value=" 获 得 连接 "> 
<input type="submit" name="close" value=" 关 闭 连接 " onclick="changeO"> 


(3) 创建 一 个 用 来 关闭 连接 的 页 面 doclosejsp， 关 键 代码 如 下 : 
<jsp:useBean id="db" class="com.jb.db.DB" scope="page"/> 
<% 
Connection con=(Connection)session.getAttribute("con"): 
这 con!=nulD){ 
db.closed0: 
session.setAttribute("closestatus"," 连 接 已 成 功 关闭 !"): 
session.removeAttribute("con"); 


else{ 
session.setAttribute("closestatus"." 当 前 状态 没有 连接 ! "); 


} 
session.setAttribute("formname"."close”"); 


response.sendRedirect("index.jsp"); 
%> 


图 秘笈 心 法 
在 程序 开发 中 ， 当 对 数据 库 的 操作 结束 后 应 及 时 调用 该 方法 来 关闭 数据 库 连 接 ， 以 释放 所 占用 的 系统 资源 。 
实用 指数 ， 友 次 友 次 
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图 实例 说 明 
事务 就 是 将 多 个 操作 封装 到 一 个 单元 中 ， 且 该 单元 不 可 再 分 。 该 事务 中 的 多 个 操作 要 么 都 被 执行 ， 要 么 都 
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不 被 执行 。 最 常见 的 就 是 不 同 的 账户 间 进 行 转账 的 例子 ， 如 图 5.42 所 示 ,“ 雨 飞 ” 用 户 转账 50 元 至 “许久 ”用 
户 ， 可 通过 两 条 更 新 语句 来 实现 。 若 不 使 用 事务 处 理 ， 假 设 更 新 用 户 “ 雨 飞 ” 有 
的 操作 成 功 ， 那 么 “ 雨 飞 ”的 账户 上 将 减少 50 元 ， 如 果 在 更 新 “许久 ”用 户 二 

的 操作 中 出 现 错误 ， 那 么 “许久 ”用 户 的 账户 上 并 没有 加 上 从 “ 雨 飞 ” 账户 5 

上 转 过 来 的 50 元 , 这 就 失去 了 准确 性 。 当 出 现 上 面 的 情况 时 ,就 可 以 用 事务 EE 
回 滚 的 方法 来 撤销 刚刚 提交 的 事务 ， 恢 复 到 未 操作 之 前 的 状态 。 到 


关键 技术 图 5.42 数据 库 事务 处 理 


当 获 得 一 个 Connection 对 象 后 ， 调 用 它 的 getAutoCommit0 方 法 可 得 到 一 个 boolean 类 型 的 值 ， 该 值 默 认为 
true 表示 自动 提交 事务 。 若 要 使 用 事务 处 理 需 调用 Connection 对 象 的 setAutoCommit(false) 方 法 设置 该 值 为 false， 
然后 再 调用 Connection 对 象 的 commit0 方 法 来 提交 事务 。 若 操作 失败 ， 就 可 调用 Connection 对 象 的 rollbackO) 
方法 来 回 深 上 次 的 操作 。 

图 设计 过 程 
(1) 在 对 数据 库 进 行 操 作 的 DB 类 中 定义 doback0 方 法 ， 关 键 代码 如 下 : 


…// 省 略 了 建立 数据 库 连接 的 代码 
public String doback(String from.String to,float money){ 


String mark=""; 

…"// 此 处 为 查询 输入 的 用 户 名 是 否 存在 的 代码 

fromsql="update tb_user set user_ money=user money-"+money+" where User_name 一 "+from+"": 
tosql="update tb_user set user_money=user money+"+money+" where user_name="+to+""; 

ty{ 


con=getCon(); // 获 得 一 个 连接 
con.setAutoCommit(false); // 设 置 为 禁止 自动 执行 
stm=con.createStatement(); 
stm.execute(fromsq]l); // 执 行 SQL 语句 1 
stm.execute(tosq); // 执 行 SQL 语句 2 
con.commitO); /开始 执行 
mark="success"; // 操 作成 功 ， 返 回 success 
} 
catch(Exception e){ 
eprintStackTraceO: 
mark="false"; /操作 失败 ， 返 回 false 
ty{ 
con.rollbackO; // 回 滚 到 上 次 操作 之 前 


}catch(Exception ee) {ee.printStackTraceO;} 


return mark; 
} 

(2) 创建 数据 库 事 务 处 理 的 首页 面 index.jsp， 关 键 代码 如 下 : 
<form action="dorollback.jsp" name="dorollbackform"> 
<table> 

<tr align="center" height="25" bgcolor="lightgrey"> 
<td colspan="2" align="center"> 数 据 库 事 务 处 理 的 方法 </td> 
</tr> 
<t> 
<td align='right"> 来 源 : </td> 
<td><input type="text" name="from"></td> 
</t> 
<t> 
<td align="right"> 转 至 : </td> 
<td><input type="text" name="to"></td> 
< 
<t> 
<td align="right"> 人 金额，</td> 
<td><input type="text" name="money" size="10"> 
元 <td> 
< 
<tralign="center" bgcolor—"lightgrey"> 
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<td colspan="2"> 
<input type="submit" name="Submit" value=" 转 账 " onclick="retum check0"> 
</td> 
<> 
</table> 
</form> 


(3) 创建 接收 Form 表单 的 页 面 dorollback.jsp。 该 页 面 调 用 DB 类 中 的 doback0 方 法 进行 转账 操作 ， 关 键 


代码 如 下 : 

<%@ page import="java.sql.*" %> 

<jsp:useBean id="db" class="com.jb.db.DB"/> 

<% 
boolean mark=true; 
String mess=""; 
float money=0; 
String fromname-—request.getParameter("from"): 
String toname=request.getParameter("to"); 
String strmoney=request.getParameter("money"); 
if(fromname——nulll|fromname.equals(™"){ 


mark=false; 
mess+="<li> 请 输入 <b> 来 源 用 户 ! </b>"; 


1 
…“/ 省 略 了 判断 其 他 属性 的 代码 
这 mark){ 
ty{ 
money=Float.parseFloat(strmoney); 
}catch(Exception a 输入 的 金额 不 是 数字 ! ";} 


} 
这 mark){ 
fromname=new String(fromname.getBytes("ISO-8859-1"),"gbk"); 
toname=new String(toname.getBytes("ISO-8859-1")."gbk"): 
String result=db.doback(fromname,toname,money); // 调 用 事务 处 理 
本 
Imess=" 转 账 成 功 ! " 
else if(result.equals("™ fser 0 


mess=" 转 账 失败 ! 


图 秘笈 心 法 


为 了 保证 数据 的 统一 完整 性 ， 应 该 在 对 数据 库 操 作 时 及 时 应 用 事务 来 处 理 ， 保 证 在 数据 发 生 错误 时 取消 操 


作 ， 从 而 避免 不 必要 的 损失 。 
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图 实例 说 明 

存储 过 程 是 由 存储 在 数据 库 管理 系统 中 的 一 段 SQL 语句 组 成 的 一 个 过 程 。 
本 实例 通过 向 数据 库 中 增加 记录 来 讲解 如 何 建立 及 使 用 存储 过 程 ， 运 行 结果 如 
图 5.43 所 示 。 
图 关键 技术 

本 实例 主要 通过 CallableStatement 对 象 来 设置 语句 中 的 参数 并 执行 调用 。 
CallableStatement 对 象 是 通过 Connection 对 象 的 prepareCall0 方 法 得 到 的 ， 语 法 
格式 如 下 : 
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初级 | 
实用 指数 : 走廊 友 页 


5.43 ”填写 用 户 信息 
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prepareCall(String sql) 

功能 : 获得 CallableStatement 对 象 。 

参数 说 明 

sql: 表示 调用 存储 过 程 的 语句 。 

该 方法 将 调用 存储 过 程 的 对 象 CallableStatement 与 调用 语句 关联 起 来 。 其 中 调用 语句 的 格式 为 {call 存储 过 
程 名 (?,?…,?)}， 它 是 调用 存储 过 程 的 通用 格式 。 


图 设计 过 程 


(1) 首先 在 数据 库 服务 器 上 新 建 一 个 增加 记录 的 存储 过 程 ， 关 键 代码 如 下 : 
CREATE PROCEDURE proc add( 
@username varchar(50), Qusersex Varchar(2),@userage int.userjob varchar(50).Qusermoney float) 
AS 
insert into tb_user values(@usemame,Qusersex,Quserage.Quserjob,Qusermoney) 
GO 


[加 说 明 : 针对 应 用 数据 库 的 不 同 ,其 存储 过 程 的 语法 结构 可 能 存在 差异 ,此 存储 过 程 的 语法 规则 为 SQL Server 
数据 库 中 的 写法 。 


(2) 在 对 数据 库 进 行 操作 的 DB 类 中 定义 如 下 方法 ， 关 键 代码 如 下 : 
…/ 省 略 了 建立 数据 库 连接 和 获得 Statement 对 象 的 代码 
public int useproc(String name,String sex,int age,String job,float money){ 
int num—1; 
String procsql=" {call proc_add(?,?,2,2,7)}"; // 调 用 存储 过 程 
ty{ 
con=getConO; 
CallableStatement stm=con.prepareCall(procsql):; // 创 建 一 个 对 象 
stm.setString(1,name); /设置 调用 语句 中 的 参数 
stm.setString(2,sex); 
stm.setInt(3,age); 
stm.setString(4,job); 
stm.setFloat(5,money); 
num=stm.executeUpdate(); // 执 行 调用 
} 
catch(Exception e){fe.printStackTraceO:num=-13} 
return num; 


} 
(3) 调用 存储 过 程 向 数据 库 中 增加 记录 ， 其 首页 面 设计 与 实例 162 的 设计 完全 相同 ， 读 者 可 参看 该 实例 的 


页 面 代码 。 


(4) 创建 接收 首页 面 index.jjsp 中 Form 表单 的 页 面 douseproc.jsp， 关 键 代码 如 下 : 


<%(@® page import="java.sql.*" %> 
<jsp:useBean id="db" class="com.ijb.db.DB"/> 


String mess=""; 

String usernmame=request.getParameter("username"); 
String usersex=request.getParameter("usersex"); 
String userage=request.getParameter("userage”); 
String userjob=request.getParameter("userjob"): 
String Nt ‘getParameter("usermoney"): 


i ‘equals("™")){ 
mark=false: 
mess="<li> 请 输入 <b> 用 户 名 ! </b></li>"; 


…// 省 略 了 判断 其 他 属性 的 代码 
这 mark){ 
try{ 
age=IntegerparseInt(userage): 
}catch(Exception e){mark=false:mess+ 一 "<1i> 输 入 的 <b> 年 龄 <b> 不 是 数字 ! </li>":} 
ty{ 
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money=Float.parseFloat(usermoney); 
}catch(Exception e) {mark=false;mess1+"<li> 输 入 的 <b> 资 金 </b> 不 是 数字 ! </li>";} 


小 

这 marlo{ 
usemame=new String(usermame.getBytes("ISO-8859-1")."gbk"); 
Usersex=new String(usersex.getBytes("ISO-8859-1")."gbk");: 
userjob=new String(userjob.getBytes("ISO-8859-1")."gbk"); 
int i=db.useproc(usemame,usersex.age.userjob.money); 


db.closedO:; 
ii<o{ 
mess=" 操 作 失败 1 "; 
} 
else 
mess=" 操 作成 功 !"; 
} 
%> 


国 秘笈 心 法 


使 用 存储 过 程 可 以 加 快 程序 的 执行 速度 ， 因 为 存储 过 程 是 预 编 译 的 ， 所 以 使 用 执行 SQL 语句 的 方法 可 节省 
SQL 语句 的 编译 时 间 ; 另外 ， 还 可 以 减少 网 络 数据 传输 的 信息 量 ， 因 为 存储 过 程 是 保留 在 数据 库 服 务 器 中 的 。 
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6.1 Servlet 基础 


Servlet 是 Java Web 应 用 中 最 核心 的 组 件 ， 也 是 Web 服务 器 组 件 ， 它 是 一 个 中 间 控 制 层 ， 负 责 处 理 客 户 端 
提交 过 来 的 请 求 数据 以 及 调用 业务 逻辑 对 象 ， 根 据 业 务 逻 辑 来 控制 页 面 转发 。 为 了 更 好 地 理解 Servlet， 本 节 将 
介绍 一 些 Servlet 基础 方面 的 实例 。 


eu 初级 i 
实例 164 
人 实用 指数 : 娘娘 友信 : 
图 实例 说 明 
在 实际 开发 过 程 中 ， 有 时 需要 直接 在 Servlet 中 将 数据 的 处 理 结果 反馈 
给 客户 端 浏览 器 ， 这 就 需要 通过 Servlet 来 生成 HTML 内 容 。 本 实例 将 介绍 
如 何在 Servlet 关中 动态 生成 一 个 HTML 页 面 ， 运 行 结果 如 图 61 所 示 。 ee 
图 6.1 Servlet 动态 
图 关键 技术 HTML 页 的 内 容 


本 实例 主要 是 通过 在 Servlet 类 中 使 用 HttpServletResponse 对 象 来 动态 
生成 HIML 页 。Servlet 通过 该 对 象 来 生成 响应 结果 ,首先 需要 通过 HttpServletResponse 对 象 的 setContentType0O 
方法 来 设置 响应 正文 内 容 的 MIME 类 型 为 text/html， 表 示 响 应 结果 为 HTML 网 页 ， 然 后 再 通过 getWriter() 方 法 
获得 一 个 PrintWiiter 对 象 ， 该 对 象 用 于 输出 字符 串 形式 的 HTML 正文 数据 。 


图 设计 过 程 
(1) 新 建 名 为 HTMLServlet 的 Servlet 类 , 该 类 继承 自 HttpServlet 类 , 并 在 doPost0 方 法 中 编写 生成 HTML 


文档 的 代码 ， 关 键 代码 如 下 : 
Public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
Le UTF-8 
sponse.setCharacterEncoding("UTF-8"); 
// 度 轩 响应 正文 的 MIME 类 型 
response.setContentType("text/html"); 
/返回 一 个 PrintWiiter 对 象 ，Servlet 使 用 它 来 输出 字符 串 形式 的 正文 数据 
PrintWriter out = response.get Writer(); 
/以 下 为 输出 的 HTML 正文 数据 
out.printin("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional/EN\">"): 
‘out.printin("<HTML>"): 
out.printin("HEAD><TITLE> 动 态 生 成 HTML 文档 </TITLE></HEAD>"): 
out.printin("<BODY>"); 
out.printin("<table border='0' align='center>"); 
out.printin("<tr><td bgcolor='skyblue'colspan=2> 动 态 生成 HTML 文档 <td></tr>"): 
out.printin("</table>"); 
out.printin("</BODY>"); 
out printtn("</HTML>"); 
out.flushO; 
outclose0: 
} 
(2) 在 web.xml 中 配置 HTMLServlet 类 ， 此 处 修改 配置 的 URL 为 “/html”， 然 后 通过 路 径 http://localhost: 


8080/143/html 来 访问 该 Servlet 类 ， 关 键 代码 如 下 : 
<servlet> 
<servlet-name>HTMLServlet</servlet-name> 
<servlet-class>com.lh.servlet.HTMLServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
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<servlet-name>HTMLServlet</servlet-name> 
<url-pattern>/html</url-pattern> 
</servlet-mapping> 


国 秘笈 心 法 


在 有 些 情况 下 ,需要 通过 Servlet 将 数据 处 理 的 结果 反馈 给 客户 端 浏 览 器 , 因此 需要 通过 Servlet 来 生成 HTML 
文档 内 容 并 响应 给 客户 端 ， 而 且 生 成 的 HTML 文档 内 容 还 可 以 包含 JavaScript 代码 以 及 CSS 样式 等 。 


实例 165 


图 实例 说 明 

在 实际 的 网 站 开发 中 ， 页 面 转发 是 最 常见 的 。 本 实例 将 介绍 如 何在 Servlet 中 控制 页 面 的 转发 ， 在 相应 的 文 
本 框 中 输入 用 户 名 和 密码 ， 单 击 “ 登 录 ” 按 钮 ， 如 果 用 户 名 和 密码 输入 正确 则 页 面 转发 到 成 功 页 ， 否 则 页 面 跳 
转 到 失败 页 ， 运 行 结果 如 图 6.2 所 示 。 


用 户 名 ;mr 


骞 三 Dh 


葡 容 站 【mr】， 颁 生成 蕊 ! 


6.2 在 Servlet 中 实现 页 面 转发 
图 关键 技术 


在 Servlet 中 实现 页 面 转发 ,使 用 的 是 RequestDispatcher 对 象 的 forward0 方 法 ,可 以 在 Servlet 中 通过 forward0) 
方法 将 当前 的 请 求 转发 到 其 他 Web 组 件 (如 Servlet、JSP、HTML)。 
图 设计 过 程 
(1) 新 建 ndex.jsp 页 ， 该 页 主要 包含 一 个 输入 用 户 名 和 密码 的 <form> 表 单 ， 其 中 <form> 中 的 action 属性 
值 为 Servlet 类 在 web.xml 中 配置 的 URL， 提 交 方 式 为 POST， 关键 代码 如 下 : 
<form action="forward" method="post”> 
<table align="center ”> 
<td> 用 户 名 : </td> 
<td><input type= "text" name="name" /></td> 


<td> 密 码 :</td> 
<td><input type="password”" name="pwd" /></td> 


<td colspan="2"><input type="submit” value=" 合 灵 " /<ltd> 
(2) 新 建 名 为 ForwardServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 获得 表单 请 求 信息 ， 然 后 根据 请 求 信 


息 转发 页 面 ， 关 键 代 码 如 下 : 
public void doPost(HttpServletRequest request HttpServletResponse response) 
IOException 


throws ServletException, 1 { 
Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 的 字符 编码 格式 
String name = request.getParameter("name”): // 获 得 请 求 表单 中 的 用 户 名 
String pwd = request.getParameter("pwd"): /获得 请 求 表单 中 的 密码 


if((name!=nullé&!name.equals(""))&-&(pwd!=null&&!pwd.equals(™"){ 
if(name.equals(“mr")&-&pwd.equals("123"){ 
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/使 用 RequestDispatcher 对 象 将 页 面 请 求 转发 到 successjsp 页 
Re pnt ee jsp") forward(request, response): 
else 
Tequest.getRequestDispatcher("errorjsp").forward(request response): 
} 
了 


(3) 在 web.xml 中 配置 ForwardServlet 类 ， 主 要 修改 用 于 配置 URL 的 <url-pattern> 标 签 值 为 “/forward”， 
关键 代码 如 下 : 
<servle> 
<servlet-name>ForwardServlet</servlet-name> 
<servlet-class>com.lh.servlet.ForwardServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>ForwardServlet</servlet-name> 
<url-pattem>/forward</url-pattern> 
</servlet-mapping> 


国 秘笈 心 法 

如 果实 现 的 是 单纯 的 页 面 跳 转 并 不 需要 传递 请 求 对 象 ， 可 以 使 用 HttpServletResponse 对 象 的 sendRedirect() 
方法 。 如 果 想 要 在 转发 页 面 中 获得 当前 的 请 求 对 象 ， 那 就 需要 通过 RequestDispatcher 对 象 的 forward0) 方 法 来 
实现 。 
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实用 指数 : 去 丰 页 页 ， 


图 实例 说 明 
本 实例 将 介绍 如 何在 Servlet 中 实现 页 面 重 定向 。 如 图 6.3 所 示 ， 当 用 户 输入 的 用 户 名 或 密码 错误 时 ， 提 交 
表单 后 在 Servlet 中 会 进行 判断 ， 然 后 将 页 面 重 定向 到 错误 页 。 


用 户 名 :mr 


密码 入 久生 四 宝生 各 
登录 淡 败 1 用 户 名 或 密码 错误 ! 


图 6.3 在 Servlet 中 实现 页 面 重 定向 


图 关键 技术 

实现 页 面 重 定向 主要 应 用 的 是 HttpServletResponse 对 象 的 sendRedirect(0) 方 法 , 该 方法 与 页 面 转发 的 forward0 
方法 有 本 质 的 区 别 。 使 用 forward0 方 法 时 ,会 将 当前 正在 处 理 的 请 求 转发 到 其 他 Web 组 件 (Servlet、JSP、HTML)， 
如 将 请 求 转发 到 index.jsp 页 , 在 该 页 中 可 以 通过 request 内 置 对 象 来 获得 此 请 求 。 而 sendRedirect0 方 法 不 会 转发 
请 求 ， 只 是 简单 的 页 面 跳 转 。 
图 设计 过 程 

(1) 新 建 名 为 RedirectServlet 的 Servlet 类 ， 该 类 继承 自 HttpServlet 类 ， 在 该 类 的 doPost0 方 法 中 判断 用 户 

名 和 密码 是 否 正确 ， 如 果 不 正 确 会 使 用 sendRedirect0 方 法 将 页 面 重 定向 到 错误 页 ， 关 键 代码 如 下 : 

Public void doPost(HttpServietRequest request, HttpServietResponse response) 


{ 
Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 数据 的 字符 编码 格式 
String name = request.getParameter("name"); 。” // 获 得 请 求 表 单 中 的 用 户 名 
String pwd =request.getParameter("pwd"); 。”// 获 得 请 求 表单 中 的 密码 
if((name!=nullé-&!name.equals(""))&-&(pwd!—null&&!pwd.equals(™){ 
if(name.equals("mr")&-&pwd.equals("123")){ 
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/使 用 RequestDispatcher 对 象 将 页 面 请 求 转发 到 successjsp 页 
EE Tequest getRequestDispatcher("successjsp") forward(request response); 
else: 
response.sendRedirect("errorjsp");// 使 用 sendRedirect0 方 法 将 页 面 重 定向 到 errorjsp 
} 
} 
(2) 在 Servlet 的 配置 文件 web.xml 中 配置 RedirectServlet 类 ， 关 键 代 码 如 下 : 
<servlet> 
<servlet-name>RedirectServlet</servlet-name> 
<servlet-class>com.Ih.servlet. RedirectServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>RedirectServlet</servlet-name> 


图 秘笈 心 法 
HttpServletResponse 对 象 的 sendRedirect0 方 法 一 律 返回 状态 代码 为 302 的 响应 结果 ， 浏 览 器 端 接收 到 这 种 
响应 结果 后 ， 立 即 自动 请 求 访问 重 定向 的 目标 Web 组 件 ， 客 户 端 最 后 接收 到 的 是 目标 Web 组 件 的 响应 结果 。 
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图 实例 说 明 

Java Web 的 核心 组 件 Servlet 的 主要 功能 是 处 理 客户 端的 表单 请 求 数据 ， 在 Servlet 中 首先 对 这 些 数据 进行 
验证 ， 可 能 会 将 其 封装 到 JavaBean， 接 下 来 调用 数据 库 的 业务 逻辑 方法 将 数据 保存 或 者 进行 其 他 的 操作 ， 最 后 
Servlet 控制 将 响应 结果 返回 给 客户 端 。 运 行 本 实例 ， 如 图 6.4 所 示 ， 输 入 用 户 注册 信息 提交 后 ， 在 Servlet 中 将 
获取 这 些 表单 请 求 信息 ， 然 后 通过 forward( 方 法 将 这 些 请 求 信息 转发 ， 最 后 在 转发 页 中 显示 出 这 些 信息 。 


用 产 各 : mr 


赛 玛 电大 外包 自重 


位 到 5 女 


用 户 儿 :mr 
不 四 15 痢 码 : 123456 
Enail: nrsoft@163. com bd 
不 sm 15 
Enail: nrsoftQl63.e 


6.4 在 Servlet 中 获取 表单 数据 


图 关键 技术 


在 Servlet 中 获取 表单 信息 主要 是 应 用 HttpServletRequest 对 象 的 getParameter0 方 法 ， 该 方法 有 一 个 String 
类 型 的 参数 ， 这 个 参数 的 名 称 与 表单 元 素 的 name 属性 值 对 应 ， 如 果 getParameter() 方 法 尝试 读 取 一 个 Null 值 ， 
执行 时 会 抛 出 一 个 java.lang.NULLPointerException 的 异常 ， 也 就 是 说 getParameter0 方 法 中 的 参数 名 必须 要 与 表 
单元 素 中 的 name 属性 值 一 样 ， 否 则 会 发 生 异 常 。 

例如 ， 表 单 中 有 这 样 一 个 文本 框 ， 代 码 如 下 : 

<input type—"text" name—"usemame” /> 

在 Servlet 中 获取 该 表单 文本 框 的 值 ， 代 码 如 下 : 

String userName — request.getParameter("username"): 


在 Servlet 中 会 根据 客户 端 表单 <form> 的 method 属性 值 来 决定 调用 doXXX(0 方 法 ， 如 果 method 属性 值 为 
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POST， 表单 提交 会 调用 Servlet 中 的 doPost0 方 法 ， 如 果 method 属性 值 为 GET， 则 调用 doGet0 方 法 。 
图 设计 过 程 
(1) 新 建 用 户 注册 页 mdex.jsp， 关 键 代 码 如 下 : 


<form action="ogin"method-"post> 
<table align="center ”> 
<tr> 
<td> 用 户 名 : </td><td><input type="texrt"name= "mame"/></td> 


<td> 密 码 : </td><td><input type="password" name="pwd" /></td> 


<td> 性 别 : </td> 
<td> 
<input type="7adio" name="sex" value=" 罗 "人 > 男 
<input type="radio" name="sex" value=" 萎 "/> 女 
</td> 


<td> 年 龄 ，</td><td><input type="tert"name="age"/></td> 
<td>Email: </td><td><input type="text" name="email” /></td> 


<td colspan="2" align="center "> 
<input type="submit” value=" 逆 碎 " /><input type= eset" value=" 硬 入"> 
</td> 
<t> 
</table> 
</form> 
(2) 新 建 名 为 LoginServlet 的 Servlet 类 ， 在 doPost0 方 法 中 获得 表单 请 求 信 息 ， 关 键 代码 如 下 : 
Public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 的 字符 编码 格式 
String name = request.getParameter("name"); 。” // 获 得 用 户 名 
String pwd = request.getParameter("pwd"); /获得 密码 
String sex = request.getParameter("sex' // 获 得 性 别 
String age = request.getParameter("age"); // 获 得 年 龄 
String email = request.getParameter("email"); /获得 Email 
Tequest.getRequestDispatcher("logininfo.jsp").forward(request, response); 


} 
(3) 在 web.xml 中 配置 LoginServlet 类 ， 关 键 代 码 如 下 : 


<servlet> 
<servlet-name>LoginServlet</servlet-name> 
<servlet-class>com.lh.servlet.LoginServlet</servlet-class> 

</servlet> 

<servlet-mapping> 
<servlet-name>LoginServlet</servlet-name> 
<url-pattern>/login</url-patterm> 

</servlet-mapping> 


图 秘笈 心 法 

在 Servlet 中 获得 客户 端 表单 请 求 数据 时 ， 应 该 及 时 处 理 中 文 乱码 问题 ， 中 文 乱码 问题 一 直 是 程序 开发 中 不 
可 避免 的 问题 。 有 效 的 处 理 办 法 之 一 就 是 在 Servlet 中 获取 请 求 数据 之 前 ， 应 该 通过 HttpServletRequest 对 象 的 
setCharacterEncoding() 方 法 统一 请 求 信息 的 编码 格式 ， 当 JSP 页 面 的 编码 格式 为 UTF-8 时 ，HttpServletRequest 
对 象 的 setCharacterEncoding( 方 法 的 参数 值 也 应 该 为 UTF-8。 
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初级 
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实用 指数 : 去 让 让 太 


图 实例 说 明 

本 实例 介绍 的 是 如 何在 Servlet 中 向 客户 端 写 Cookie 信息 ,运行 本 实 
例 ， 如 图 6.5 所 示 , 输入 用 户 名 和 密码 并 将 其 提交 到 Servlet 中 , 在 Servlet 
中 将 用 户 名 添加 到 Cookie 对 象 中 ， 然 后 关闭 浏览 器 ， 在 重新 访问 用 户 登 
录 页 时 ， 用 户 名 的 文本 框 中 会 显示 上 一 次 输入 的 用 户 名 信息 。 


图 关键 技术 6.5 ”关闭 浏览 器 再 次 访问 的 结果 


本 实例 的 实现 主要 是 应 用 Servlet API 中 提供 的 Cookie 类 。 用 户 把 表 
单 信息 提交 给 Servlet 后 , 在 Servlet 中 获取 用 户 请 求 的 信息 并 添加 到 Cookie 对 象 中 , 再 通过 HttpServletResponse 
对 象 把 Cookie 信息 返回 给 客户 端 ， 然 后 在 JSP 页 面 中 通过 request 内 置 对 象 来 获取 客户 端的 Cookie 信息 。 

在 JSP 中 使 用 request 对 象 获取 的 是 一 个 Cookie 对 象 的 数组 ， 需 要 在 循环 中 遍历 所 有 Cookie 对 象 ， 并 通过 
Cookie 对 象 的 getName0 方 法 查找 所 有 Cookie 对 象 的 名 称 ， 然 后 根据 找到 的 Cookie 名 称 获得 Cookie 对 象 中 的 
值 。Cookie 类 中 包含 的 主要 方法 及 说 明 如 表 6.1 所 示 。 

表 6.1 Cookie 类 的 主要 方法 及 说 明 
方 ” 法 说 明 
getComment()/setComment(String purpose, 获取 /设置 Cookie 的 注释 


获取 /设置 Cookie 适用 的 域 。 一 般 地 ，Cookie 只 返回 给 与 发 送 它 的 服务 器 
getDomain()/setDomain(String pattern) 名 字 完全 相同 的 服务 器 


获取 /设置 Cookie 过 期 之 前 的 时 间 , 以 秒 为 单位 .如果 不 设置 该 值 , 则 Cookie 
只 在 当前 会 话 内 有 效 ， 即 在 用 户 关 闭 浏览 器 之 前 有 效 


getMaxAge()/setMaxAge(int expiry) 


getName()/setName(String name, 获取 /设置 Cookie 的 名 字 
getValue()/setValue(String newValue, 获取 /设置 Cookie 的 值 
Se 获取 /设置 Cookie 适用 的 路 径 。 如 果 不 指定 路 径 ，Cookie 将 返回 给 当前 页 
BO ne 面 所 在 目录 及 其 子 目 录 下 的 所 有 页 面 
getVersion()/setVersion(int V 获取 /设置 Cookie 所 遵从 的 协议 版 本 。 默 认 版 本 为 0 
图 设计 过 程 


(1) 新 建 用 户 登 录 表 单 页 ndex.jsp， 关 键 代 码 如 下 : 
<form action="cookieserviet" method="post”> 
<table align="center "> 
<tr><td> 用 户 名 : </td><td><input type="text" name="name” /></td></tr> 
<tr><td> 密 码 :</td><td><input type="password” name="pwd" /></td></tr> 
<tr><td colspan="2"><input type="submit” value=" 登 如 "/></td></tr> 
</table> 
</form> 


(2) 新 建 名 为 CookieServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 获取 用 户 名 信息 ， 然 后 添加 到 Cookie 


对 象 中 并 保存 到 客户 端 ， 关 键 代 码 如 下 : 
Public void doPost(HttpServietRequest request HttpServietResponse response) 
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name =java.net.URLEncoder.encode(name, "UTF-8"): // 将 用 户 名 进行 格式 编码 

Cookie nameCookie = new Cookie("userName", name); /创建 一 个 Cookie 对 象 ， 并 将 用 户 名 保存 到 Cookie 对 象 中 
mameCookie setMaxAge(60): // 设 置 Cookie 的 过 期 之 前 的 时 间 ， 单 位 为 秒 
Tesponse.addCookie(nameCookie): // 通 过 response 的 addCookie0 方 法 将 此 Cookie 对 象 保存 到 客户 端 浏览 器 的 Cookie 中 
Tequest.getRequestDispatcher("success.jsp").forward(request. response); 


} 
(3) 在 index.jsp 页 中 读 取 所 有 客户 端的 Cookie， 通 过 循环 Cookie 数组 找到 保存 用 户 名 的 Cookie， 关 键 代 
码 如 下 : 
<% 


String userName=null; /用 于 保存 从 Cookie 中 读 取出 的 用 户 名 
Cookie cookieArr[] = request.getCookies|: /获取 客户 端的 所 有 Cookie 
icookieArr'=null&c&cookieArrlength>0){ 
for(Cookie c:cookieAmM{ 
ifl(c.getNameO.equals("userName”"){ // 如 果 Cookie 中 有 一 个 名 为 userName 的 Cookie 


userName = java.net.URLDecoder.decode(c.getValue0."UTF-8");// 将 字符 串 解码 ， 获 得 此 Cookie 的 值 
} 
} 
} 


%> 
(4) 将 获取 到 的 用 户 名 Cookie 的 值 赋值 给 “用 户 名 ”文本 框 ， 关 键 代码 如 下 : 
<input type="text" name="name” value="<%if(userName!=null) {out.print(userName);}%>"/> 
(5) 在 web.xml 文件 中 配置 CookieServlet 类 ， 关 键 代 码 如 下 : 
<servlet> 
<servlet-name>CookieServlet</servlet-name> 
<servlet-class>com.lh.servlet.CookieServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>CookieServlet</servlet-name> 
<url-pattern>/cookieservlet</url-pattern> 
</servlet-mapping> 


图 秘笈 心 法 

在 创建 Cookie 对 象 时 ， 由 于 不 可 以 直接 将 中 文字 符 作为 Cookie 中 的 值 ， 因 此 在 将 中 文字 符 保存 到 Cookie 
对 象 之 前 ， 应 该 使 用 java.net.URLEncoder 类 的 encode0 方 法 对 中 文字 符 进行 编码 。 在 获取 该 Cookie 对 象 中 的 值 
时 ， 需 要 使 用 java.net.URLDecoder 类 的 decode() 方 法 对 已 经 编码 过 的 字符 串 进行 解码 ， 还 原 字 符 串 的 初始 值 。 
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图 实例 说 明 


本 实例 将 介绍 如 何 将 一 个 封装 用 户 注册 信息 的 JavaBean 对 象 传递 到 JSP 页 中 ， 然 后 在 JSP 页 中 读 取 该 
JavaBean 对 象 中 的 数据 ， 运 行 结果 如 图 6.6 所 示 。 


用 户 和 名: 你 三 李 


密码 Dd 


位 到 ©@s Oz 


Enai 


EE Email hi 3. con 
6.6 在 JSP 中 读 取 由 Servlet 传递 过 来 的 JavaBean 对 象 中 的 数据 


an 


图 关键 技术 


实现 本 实例 主要 是 在 Servlet 中 使 用 HttpServletRequest 对 象 的 getParameter0 方 法 、setAttribute0 方 法 以 及 
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构 如 下 : 


public void setAttribute(String name, Object object) 
参数 说 明 

@ name: 属性 名 。 

@ object: 属性 值 。 
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getAttribute0 方 法 。setAttribute0 方 法 的 作用 是 可 以 在 HttpServletRequest 对 象 中 保存 一 个 属性 ， 该 方法 的 语法 结 


设置 完 属性 后 ， 通 过 getAttribute0 方 法 来 获取 属性 值 ， 该 方法 的 语法 结构 如 下 : 


public Object getAttribute(String name) 


根据 参数 name 来 查找 请 求 范围 内 匹配 的 属性 值 。 
图 设计 过 程 


(1) 新 建 用 户 注册 页 indexjsp， 关 键 代 码 如 下 : 


<form action="passserviet” method="post"> 
<table align="center ”> 
<t> 
<td> 用 户 名 : </td> 


<td><input type="text” name="name” /></td> 


</t> 
<t> 
<td> 密 码 : </td> 


<td><input type="password" name="pwd” /></td> 


<t> 


… 此 处 省 略 了 部 分 文本 框 的 标签 


<b> 


<td colspan="2"align="center'> 


<input type="submit” value=" 注 太 " 户 
<input type= eset"value=" 夯 大 "人 > 


</td> 
<t> 
</table> 
</form> 


(2) 新 建 名 为 UserInfo 的 JavaBean 类 ， 该 类 用 于 封装 用 户 的 注册 信息 ， 关 键 代码 如 下 : 


Ppublic class UserInfo { 
Private String userName; 
Private String userPwd: 
Private String userSex; 
Private int userAge; 
Private String email; 

public UserInfoO{} / 


/用 户 名 

/密码 

/性 别 

/年 龄 

/电子 邮件 
/默认 的 构造 方法 


/此 处 省 略 了 属性 的 getXXXO 和 setXXX0 方 法 


(3) 新 建 名 为 PassServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 将 获取 的 用 户 注册 信息 封装 到 UserInfo 


然后 将 请 求 转发 到 logininfo.jsp 页 ， 


关键 代码 如 下 : 


Public void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 


Tequest.setCharacterEncoding("UTF-8"); 
String name = request.getParameter("name"); 
String pwd = request.getParameter("pwd"); 
String sex = request.getParameter("sex"); 
String age = request.getParameter("age"”); 
String email = request.getParameter("email"): 


UserInfo user = new UserInfo0; 


// 设 置 请 求 的 字符 编码 格式 

/获取 用 户 名 

/获取 密码 

/获取 性 别 

/获取 年 齿 

/获取 Email 

/创建 封装 用 户 信息 的 JavaBean 对 象 


/以 下 方法 将 获得 的 表单 数据 封装 到 user 对 象 中 


sersetUserName(name): 
UsersetUserPwd(pwd): 
user.setUserSex(sex); 

Integer userAge = new Integer(age); 


219 


Java Web 开发 实例 大 全 (基础 卷 ) 


Tequest: setAttributeCvUsern user); // 将 user 对 象 添加 到 request 对 象 中 
Tequest.getRequestDispatcher("logininfo.jsp").forward(request. response); // 将 请 求 转发 到 logininfojsp 页 面 
¥. 


(4) 在 logininfo.jsp 页 中 , 使 用 request 内 置 对 象 的 getAttribute0 方 法 获取 封装 用 户 注 册 信 息 的 JavaBean 对 
象 ， 然 后 将 该 对 象 中 封装 的 注册 信息 显示 出 来 ， 关 键 代码 如 下 : 
<% 


UserInfo user = (UserInfo)request.getAttribute("User"); 
%> 
<table align="center"> 


<td> 用 户 名 : </td><td><%=user getUserName096></td> 
<t 由 密码 ，</td><td><%=user getUserPwdO%></td> 
<td> 性 别 :</td><td><%=user.getUserSex0%></td> 


<td> 年 龄 ，</td><td><%=user.getUserAge0%></td> 


$$ $$ $$ $9 


<td>Email: </td><td><%=user getEmailO%></td> 
</table> 
图 秘笈 心 法 
本 实例 意 在 说 明 MVC (Model-View-Controller) 模式 的 三 层 架构 设计 理念 ， 其 中 JSP 相当 于 View (视图 ) 
层 、JavaBean 相当 于 Model (模型 )、Servlet 相当 于 Controller (控制 器 )。MVC 架构 有 助 于 将 应 用 程序 分 割 成 


若干 好 辑 部 件 ， 使 程序 设计 变 得 更 加 容易 。 基 于 MVC 结构 的 开源 框架 包括 Stuts1、WebWork、Struts2 等 ， 而 
目前 被 广泛 应 用 的 框架 是 Struts2， 如 果 读 者 感 兴趣 ， 可 以 参考 这 些 开源 框架 的 相关 资料 或 书籍 。 
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力 实例 说 明 


在 实际 的 开发 中 ， 经 常 需要 获得 Web 路 径 以 及 某 个 文件 的 真实 路 径 ， 然 后 根据 这 些 路 径 来 做 相应 的 操作 。 
本 实例 将 介绍 如 何在 Servlet 中 获取 Web 路 径 和 真实 路 径 。 运 行 本 实例 ， 在 浏览 器 的 地 址 栏 中 输入 
“http://localhost:8080/149/getpath”， 运 行 结果 如 图 6.7 所 示 。 


Web 路 径 ; http://1 
现实 路 径 ; D:NProgran 


-6. 0. 20\webapps\149\index. jsp 


图 6.7 访问 Servlet 后 输出 的 Web 路 径 以 及 文件 的 真实 路 径 
图 关键 技术 


在 Servlet 中 , 使 用 HttpServletRequest 对 象 中 的 一 系列 方法 可 以 获取 相关 路 径 的 信息 , 然后 可 以 根据 这 些 信 
息 组 合成 一 个 Web 站 点 的 虚拟 路 径 。HttpServletRequest 接口 中 提供 的 用 于 获取 路 径 有 关 的 信息 的 方法 如 下 。 

口 ”getScheme(): 返回 请 求 协议 (http) 。 

口 。 getServerName0: 返回 服务 器 的 名 称 。 如 果 访 问 本 机 ， 则 返回 的 是 localhost。 

口 getServerPort0: 返回 服务 器 的 端口 号 。Tomcat 服 务 器 的 默认 端口 为 8080。 
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口 ”getContextPath0: 返回 客户 端 所 请 求 的 Web 应 用 的 URL 入 口 。 例如 , 在 浏览 器 中 访问 http://localhost:8080/ 
helloapp/getpath， 该 方法 返回 的 是 “mhelloapp” 
OD getRequestURLO: 返回 请 求 Web 服 务 器 的 完全 路 径 。 例如 , 在 浏览 器 中 访问 http:/Wlocalhost8080/149/getpath， 
该 方法 就 直接 返回 的 是 http://localhost:8080/149/getpath 这 个 路 径 。 
获取 文件 的 真实 路 径 , 可 以 使 用 ServletContext 接口 的 getRealPath(String path) 方 法 , 该 方法 根据 参数 指定 的 
虚拟 路 径 ， 返 回 文件 在 系统 中 的 真实 路 径 ， 这 个 路 径 主 要 是 指 发 布 在 Tomcat 服务 中 的 文件 路 径 。 例 如 ， 找 出 
index.jsp 文件 的 真实 路 径 的 写法 为 getRealPath("indexjsp")， 那 么 返回 的 真实 路 径 为 “D:\Program Files\apache- 
tomcat-7.0.41\webapps\149\index.jsp”。 


图 设计 过 程 
(1) 新 建 名 为 GetPathServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 获取 Web 服务 器 的 路 径 以 及 文件 的 真 


实 路 径 ， 关 键 代码 如 下 : 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


String scheme = request.getScheme(); /获取 请 求 协议 (http) 
String serverName = request.getServerName(); // 获 取 服 务 器 名 称 (localhost) 
int serverPort = request.getServerPort(); // 获 取 服 务 器 端口 号 


String contextPath = request.getContextPath0; /返回 Web 应 用 的 URL 入 口 
/以 上 这 些 属 性 组 合成 一 个 站 点 路 径 〈http:/Wlocalhost:8080/149/) 
String path = scheme+"://"tserverName+":"+serverPort+contextPath+"/"; 
//getRealPath0 方 法 返回 一 个 给 定 虚 拟 路 径 的 真实 路 径 
String realPath = this.getServletContext(|.getRealPath("index.jsp"): 
/设置 HITP 响应 的 是 文 的 MIME 类 型 Dy 
request.setAttribute("path", path); /将 Web 路 径 添加 到 request 对 象 中 
Tequest.setAttribute("realPath", realPath); // 将 真实 路 径 添加 到 request 对 象 中 
Tequest.getRequestDispatcher("path.jsp").forward(request, response); 
(2) 在 web.xml 中 配置 GetPathServlet 类 ， 具 体 代码 请 参考 前 面 讲解 的 实例 中 给 出 的 代码 。 
(3) 新 建 pathjsp 页 ， 在 该 页 中 获得 请 求 中 保存 的 路 径 信 息 并 显示 ， 关 键 代码 如 下 : 
<table align="center’> 
<tr> 
<td>Web 路 径 : </td><td><%=(String)request.getAttribute("path”) 9%6></td> 


< 
<tr> 
<td> 真 实 路 径 : </td><td><%=(String)request.getAttribute("realPath") %></td> 
</tr> 
</table> 


国 秘笈 心 法 
在 实际 的 开发 过 程 中 ， 经 常 需要 根据 获取 的 Web 路 径 来 实现 文件 的 读 写 操作 。 例 如 ， 在 实现 将 文件 上 传 到 

服务 器 时 ， 首 先 需要 获取 到 Web 服务 器 的 工作 目录 ， 然 后 再 根据 该 目录 实现 相应 的 操作 。 因 此 ， 读 者 应 该 党 握 

本 实例 的 实现 过 程 。 

实例 171 2 


实用 指数 : 太太 女人 


国 实例 说 明 

本 实例 将 介绍 如 何 通 过 Servlet 来 访问 Web 应 用 的 工作 目录 。 运 行 本 实例 ， 在 Servlet 中 读 取 ServletContext 
中 的 所 有 属性 值 ， 其 中 包含 一 个 名 为 javax.servlet.context.tempdir 的 属性 ,该 属性 值 代表 当前 Web 应 用 的 工作 目 
录 ， 运 行 结果 如 图 6.8 所 示 。 
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图 6.8 打印 ServletContext 对 象 中 所 有 的 属性 值 


图 关键 技术 


在 Servlet 中 , 访问 Web 应 用 的 工作 目录 主要 是 通过 ServletContext 对 象 的 getAttribute() 方 法 ,在 ServletContext 
对 象 中 包含 一 个 名 为 javax.servlet.context.tempdir 的 属性 ， 在 Servlet 初始 化 时 会 自动 在 ServletContext 对 象 中 设 
置 该 属性 ， 通 过 这 个 属性 返回 的 对 象 就 是 Web 应 用 的 工作 目录 。 在 Servlet 中 获得 Web 应 用 的 工作 目录 的 关键 
代码 如 下 : 

File workPath = (File)context.getAttribute("javax.servlet.context.tempdir"); 


图 设计 过 程 
(1) 新 建 名 为 WebWorkPathServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 ， 获 得 所 有 的 ServletContext 中 


的 属性 并 打印 输出 ， 然 后 获得 Web 应 用 的 工作 目录 ， 并 向 该 目录 中 写 入 一 个 文本 文件 ， 关 键 代码 如 下 : 
public void doPost(HttpServletRequest request, HttpServletResponse response) 

throws ServletException, IOException { 

response.setContentType("text/html:charset=UTF-8"); /响应 正文 的 MIME 类 型 以 及 字符 编码 格式 

PrintWriter out = response.getWriter(); 

ServletContext context = this.getServletContext(); 

Enumeration e = context.getAttributeNames(); // 获 得 ServletContext 对 象 中 的 所 有 属性 名 

While(e hasMoreElementsO)f // 循 环 Enumeration 对 象 ， 读 出 ServletContext 对 象 中 的 所 有 属性 值 
String attributeName = (String)e.nextElementO; 
out.printin("<br>"+attributeName+" : "+context.getAttribute(attributeName)); 

} 

out.closeO: 

/获得 Web 应 用 的 工作 目录 

File workPath = (File)context.getAttribute("javax.servlet.context.tempdir"); 

FileWriter writer =new FileWriter(workPath+"/test.txt"); 

BufferedWriter bf = new Buffered Writer(writer); 


bf write(" 获 取 Web 应 用 的 工作 目录 "): // 向 文件 中 写 入 字符 
bfnewLineO: /换行 

bfwrite" 明 日 科技 ! 

bf.flushO; /刷新 缓冲 区 
bf.closeO: // 关 闭 缓冲 区 输出 流 


} 
(2) 在 web.xml 中 配置 WebWorkPathServlet 类 ， 关 键 代码 如 下 : 

<servie> 
<servlet-name>Web WorkPathServiet</serviet-name> 
<servlet-class>com lh.servlet. Web WorkPathServlet</servlet-class> 

</servlet> 

<servletmapping> 
<servletname>WebWorkPathServlet</servlet-name> 
<url-pattern>/webworkpath</url-pattern> 

</servlet-mapping> 


国 秘笈 心 法 


每 个 Web 应 用 都 有 一 个 工作 目录 ，Servlet 容器 会 把 与 这 个 Web 应 用 相关 的 临时 文件 存放 在 这 个 目录 下 。 
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在 Servlet 中 通过 ServletContext 对 象 来 访问 Web 应 用 的 工作 目录 。 
6.2 Servlet 应 用 


本 节 将 介绍 一 些 在 Web 开发 中 常用 的 Servlet 技术 .例如 ,在 Servlet 中 生成 验证 码 、 将 表格 数据 导出 到 Excel、 
避免 客户 端 访问 的 并 发 问题 以 及 访问 数据 库 连 接 池 等 。 


Es 初级 
实例 172 | 
实例 实用 指数 : 食 食 食 谷 : 
图 实例 说 明 
在 浏览 网 站 时 ， 有 些 网 站 会 有 计数 器 的 功能 ， 浏 览 者 每 访问 一 次 网 站 ， 
计数 器 就 累加 一 次 。 运行 本 实例 ,， 当 用 户 访问 时 ,实现 记 录用 户 的 访问 次 数 ， 是 第 3 位 访客 ! 
运行 结 示 。 
人 图 6.9 记录 用 户 的 访问 次 数 
图 关键 技术 


实现 计数 器 主要 是 在 Servlet 中 应 用 ServletContext 接口 ，Servlet 容器 在 启动 一 个 Web 应 用 时 ， 会 为 它 创建 
-个 ServletContext 对 象 。 当 Servlet 容器 终止 一 个 Web 应 用 时 ，ServletContext 对 象 也 会 被 销毁 ， 所 以 该 对 象 与 
Web 应 用 程序 有 同样 的 生命 周期 。 也 就 是 说 ， 整 个 Web 应 用 的 组 件 可 以 共享 ServletContext 对 象 中 存放 的 共享 
数据 。 在 ServletContext 接口 中 存 取 共享 数据 的 方法 包括 以 下 几 种 。 
口 。setAttribute(String name,Object object): 在 ServletContext 对 象 中 存放 共享 数据 ， 参 数 name 表 示 属 性 名 ， 
参数 object 表 示 属 性 值 。 
口 removeAttribute(String name): 根据 指定 参数 name 属 性 名 ， 删 除 ServletContext 对 象 中 的 共享 数据 。 
口 ”getAttribute(String name): 根据 指定 的 参数 name 属 性 ， 获 取 ServletContext 对 象 中 的 共享 数据 。 
图 设计 过 程 
(1) 新 建 名 为 CounterServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 实现 统计 用 户 的 访问 次 数 ， 关 键 代码 
如 下 : 


Public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


ServletContext context = getServletContextO: // 获 得 ServletContext 对 象 

Integer count = (Integer)context.getAttribute("counter"); /从 ServletContext 中 获得 计数 器 对 象 

if(count 一 aulD){ /如 果 为 空 ， 则 在 ServletContext 中 设置 一 个 计数 器 的 属性 
count=1: 
context.setAttribute("counter". count); 

jelsef // 如 果 不 为 空 ， 则 设置 该 计数 器 的 属性 值 加 1 
context.setAttribute("counter", count+1): 

. 

Tesponse.setContentType("text/html"): /响应 正文 的 MIME 类 型 

Tesponse.setCharacterEncoding("UTF-8"); /响应 的 编码 格式 


PrintWriter out = Tesponse.getWriterO: 

‘out.printin("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional/EN\">"); 
outprintin("<HTML>"): 

outprintm(” <HEAD><TITLE> 统 计 网 站 访问 次 数 </TITLE></HEAD>"); 

‘out.printin("” <BODY>"): 

out.print(" <h2><font color='gray> "); 

out print(" 您 是 第 Re 位 访客 ! "); 
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outflush0: 
outclose0: 


} 
(2) 在 web.xml 中 配置 CounterServlet 类 ， 关 键 代码 如 下 : 


<servlet> 


<servlet-name>CounterServlet</servlet-name> 
<servlet-class>com.lh.servlet.CounterServlet</servlet-class> 


</servlet> 


<servlet-mapping> 


<servlet-name>CounterServlet</servlet-name> 
<url-pattern>/counter</url-pattern> 


</servlet-mapping> 


国 秘笈 心 法 


在 实际 开发 应 用 中 ， 经 常 需要 通过 ServletContext 对 象 来 访问 Web 应 用 的 各 种 资源 。 通 过 ServletContext 对 


象 可 以 实现 以 下 操作 : 


(1) 在 Web 应 用 范围 内 存 取 共 享 数据 。 
(2) 访问 当前 Web 应 用 的 资源 。 

(3) 访问 Servlet 容器 中 的 其 他 Web 应 用 。 
(4) 访问 Servlet 容器 的 相关 信息 。 

(5) 访问 服务 器 端的 文件 系统 资源 。 

(6) 向 Servlet 的 日 志文 件 中 输出 日 志 。 


实例 173 


图 实例 说 明 


在 实际 的 开发 中 ， 经 常 需要 将 一 些 数据 导出 到 Excel 或 者 Word 来 进行 处 理 。 本 实例 将 介绍 如 何 使 用 POI 
开源 组 件 实现 将 数据 导出 到 Excel 文件 中 。 运 行 本 实例 ， 输 入 用 户 注册 信息 后 ， 单 击 “ 导 出 到 Excel” 按 钮 后 ， 
会 将 用 户 的 信息 导出 到 Excel 文件 中 ， 如 图 6.10 所 示 。 


图 关键 技术 


实现 本 实例 的 关键 使 用 的 是 开源 的 POI 组 件 ， 该 组 件 中 包含 实现 对 Excel 文件 的 创建 和 写 入 操作 的 类 。 


[ 国 Miaesok Bcel -logninfeDas ee [二 号 荐 强 
pp 河 ] xf#B 和 视 WW 拍 D 格 K(O) 工具 DO KD) BOW WW 
全 -x 
窑 巧 ， 。 重 乔 重 重合 全 arial 10 zB LU 天 二 > 
位 到 [EE .7 B C D [到 用 (| 
1 用 户 姓名 密码 性 别 年 晤 Email 白 
人 lk "23456 粤 了 zhangsan@163.com 
3 
ai A | We 
jn + 用 户 注册 信息 / 一 
LL 半 | 数字 
(a) (b) 


6.10 将 用 户 注册 的 信息 导出 到 Excel 中 


用 POI 组 件 操作 Excel 文件 的 关键 步骤 如 下 : 
(1) 创建 Excel 的 工作 表 。POI 组 件 的 HSSFWorkbook 类 提供 了 创建 工作 表 的 方法 ， 语 法 格式 如 下 
public HSSFSheet createSheet(String sheetname) // 参 数 sheetname 表示 工作 表 的 名 称 
(2) 创建 表格 的 行 。 在 保存 之 前 需要 创建 行 对 象 ， 该 对 象 由 工作 表 对 象 创建 ， 语 法 格式 如 下 : 
public HSSFRow createRow(int rownum) // 参 数 rownum 表示 工作 表 中 行 对 象 的 行 号 
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(3) 创建 表格 的 单元 格 。Excel 表格 中 的 数据 由 多 个 单元 格 组 成 , 在 POI 组 件 中 , 这些 单 元 格 对 象 由 HSSF 
Row 类 的 createRow0 方 法 创建 ， 语 法 格式 如 下 : 


public HSSFCell createCell(int columnIndex)// 参 数 columnIndex 表示 单元 格 对 象 的 列 编号 


(4) 写 入 单元 格 内 容 。 单 元 格 对 象 定义 了 写 入 各 种 类 型 数据 的 方法 ， 其 中 最 常用 的 就 是 String 类 型 的 字符 
串 数据 。 本 实例 使 用 最 多 的 也 是 这 个 方法 ， 语 法 格式 如 下 : 


public void setCellValue(String value)// 参 数 value 表示 保存 在 Excel 单元 格 中 的 数据 


图 设计 过 程 


(1) 新 建 用 户 注册 表单 页 indexjsp， 关 键 代码 如 下 : 


<form action="export" method="post"> 


<table align="center "> 
<t> 


<td> 用 户 名 : </td><td><input type="text” name="name" /></td> 


<t> 


“由 于 篇 幅 有 限 ， 此 处 省 略 了 表单 中 的 其 他 元 素 


<tr> 
<td colspan="2" align="center"> 


<input type="submit” value=" 拖 办 到 Excel" /> 


<ltd> 
<t> 
</table> 


A/form> 
(2) 新 建 名 为 ExportServlet 的 Servlet 类 ,在 该 类 的 doPost0 方 法 中 获得 用 户 注 册 信息 


中 的 类 将 用 户 注册 信息 导出 到 Excel 文件 中 ， 关 键 代 码 如 下 : 
public void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); 


然后 使 用 POI 组 件 


response.setContentType("application/vnd.ms-exce1");// 响 应 正文 的 MIME 类 型 ， 表 示 Excel 
Tesponse.addHeader("Content-Disposition", "attachment:filename=logininfo.xls"); 


String name = request.getParameter("name"); 
String pwd =request.getParameter("pwd"): 
String sex = request.getParameter("sex"); 
String age = request.getParameter("age"); 
String email = request.getParameter("email"); 


ServletOutputStream out = response.getOutputStream(); 


HSSFWorkbook wb = new HSSF WorkbookO; 


HSSFSheet sheet = wb.createSheet(" 用 户 注册 信息 "); 


sheet.setColumn Width(4, 5000): 

HSSFRow titleRow = sheet.createRow(0); 
HSSFCell titleCelll =titleRow .createCell(0); 
titleCelll.setCellValue(" 用 户 姓 名 "); 
HSSFCell titleCell2= titleRow.createCell(1); 
titleCell2.setCellValue(" 密 码 "); 

HSSFCell titleCell3 =titleRow .createCell(2); 
titleCell3.setCellValue(" 性 别 "); 

HSSFCell titleCell4= titleRow.createCell(3); 
titleCell4.setCellValue(" 年 龄 "); 

HSSFCell titleCells= titleRow.createCell(4):; 
titleCell5.setCellValue("Email ): 

HSSFRow valueRow = sheet.createRow(1): 
HSSFCell nameCell = valueRow.createCell(0); 
nameCell.setCellValue(name): 

HSSFCell pwdCell = valueRow.createCell(1): 
PpwdCell.setCellValue(pwd); 

HSSFCell sexCell = valueRow.createCell(2):; 
sexCell.setCellValue(sex); 

HSSFCell ageCell = valueRow.createCell(3); 
ageCell.setCellValue(age): 

HSSFCell emailCell = valueRow.createCell(4); 
emailCell.setCellValue(email): 

HSSFCellStyle cellStyle = wb.createCellstyle0: 
wb.write(out):; 


/响应 输出 流 对 象 

/创建 Excel 表格 

1/ 创建 工作 短 

/设置 列 宽 

// 创 建 Excel 中 的 标题 行 

// 在 行 中 创建 第 1 个 单元 格 
// 设 置 第 1 个 单元 格 的 值 

// 在 行 中 创建 第 2 个 单元 格 
/设置 第 2 个 单元 格 的 值 

// 在 行 中 创建 第 3 个 单元 格 
/设置 第 3 个 单元 格 的 值 

// 在 行 中 创建 第 4 个 单元 格 
1/ 设置 第 4 个 单元 格 的 值 

// 在 行 中 创建 第 5 个 单元 格 
/设置 第 5 个 单元 格 的 值 

// 创 建 第 2 行 

// 在 第 2 行 中 创建 单元 格 


// 将 响应 流 输入 到 Excel 表格 中 
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out flush|; 
outclose0: 


} 
(3) 在 web.xml 中 配置 ExportServlet 类 ,具体 代码 请 参考 实例 172， 只 需要 把 实例 172 中 的 CounterServlet 
类 换 成 本 实例 中 的 ExportServlet 类 即 可 。 


国 秘笈 心 法 
在 Servlet 中 ， 通 过 HttpServletResponse 对 象 的 setContextType() 方 法 设置 不 同 MIME (Multipurpose Internet 


Mail Extension, 多 用 途 Internet 邮件 扩展 ) 类 型 ，Servlet 可 以 生成 不 同类 型 的 响应 文件 。 例 如 ，Word 文档 、Excel 
文档 、XML 文档 、 图 像 等 。 


高 级 
实例 174 | 
实例 实用 指数 : 食 广 食 谷 ; 

图 实例 说 明 
如 今 ， 绝 大 多 数 网 站 或 者 Web 应 用 程序 都 实现 了 验证 码 的 功能 ， 加 入 
验证 码 可 以 防止 黑客 利用 恶意 程序 ， 在 网 站 中 进行 频繁 登录 、 注 册 、 灌 水 由 出 
等 操作 。 运行 本 实例 ,在 用 户 注册 的 表单 中 包含 一 个 验证 码 图 片 和 文本 框 ， 一 
运行 效果 如 图 6.11 所 示 。 ea 
四 关键 技术 Email 
在 Servlet 中 ， 首 先 要 设置 响应 正文 的 类 型 为 image/ipeg， 表 示 响 应 的 ep 
是 一 个 图 片 ,然后 通过 java.awt 包 中 的 操作 图 形 图 像 的 类 来 生成 一 个 图 像 ， 了 机 
主要 用 到 以 下 几 个 类 。 
口 java.awtimage.BufferedImage: 创建 该 对 象 时 ， 会 在 缓存 中 构造 一 a 
个 图 像 。 


口 java.awt.Graphics， 该 类 的 对 象 表示 一 个 画笔 ， 可 以 用 它 来 画 矩 形 、 写 字 、 添 加 颜色 、 画 线 等 。 
口 javanutiLRandom: 该 类 的 对 象 用 于 生成 随机 数 。 本 实例 中 使 用 它 来 生成 图 像 上 的 随机 坐标 的 值 、 随 机 
颜色 的 值 以 及 随机 的 验证 码 数字 。 
图 设计 过 程 
(1) 新 建 名 为 ValidateCodeServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 实现 生成 验证 码 图 片 ， 关 键 代码 
如 下 : 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
1/ 禁止 页 面 缓存 
Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse.setHeader("Cache-Control". "No-cache"); 
Tesponse.setDateHeader("Expires". 0): 
Tesponse.setContentType("image/ipeg"): /设置 响应 正文 的 MIME 类 型 为 图 片 
int width=60, height=20; 
/4 创建 一 个 位 于 缓存 中 的 图 像 ， 宽 度 为 60， 高 度 为 20 */ 
BufferedImage image=new BufferedImage(width. height. BufferedImage.ITZPE TVT 


Graphics g = image.getGraphicsO: 处理 国 了 上 多 的 对 象 ， 相当 于 画笔 
Random random = new Random(); // 创 建生 成 随机 数 的 对 象 
gsetColor(getRandomColor(200.250)): /设置 图 像 的 背景 色 

gfillRect(0. 0. width. height): // 画 一 个 矩形 ， 坐 标 〈0.0)， 宽 度 为 60， 高 度 为 20 
g.setFont(new Font("Times New Roman",Font.PLAIN.18)); // 设 定 字体 格式 
gsetColor(getRandomColor(160.200)): 

for(int 0:i<130:iH){f /产生 130 条 随机 干扰 线 


int x =random.nextInt(width): 
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int y = random.nextInt(height); 

int x1 = random.nextInt(12); 

int yl = random.nextInt(12); 

g.drawLine(x,y.xtxl,y+yD): /在 图 像 的 坐标 〈x.y) 和 坐标 (x+xl.y+y1) 之 间 画 干扰 线 
} 
String strCode=""; 
for (int =0;i<4:iH){ 

String strNumber=String.valueOfrandom.nextInt(10)): 


strCode=strCodetstrNumber: 

/设置 字体 的 颜色 

gsetColor(new Color(15+random.nextInt(120).15+random.nextInt(120).15+random.nextInt(120))); 

g.drawString(strNumber, 13*i+6,16); /将 验证 码 依次 画 到 图 像 上 ， 坐 标 (x=13*i+6.y=16) 
和 
Tequest.getSession().setAttribute("Code",strCode): /把 验证 码 保存 到 Session 中 
g.dispose(); /释放 此 图 像 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); // 输 出 JPEG 格式 的 图 像 
Tesponse.getOutputStream().flush(); /刷新 输出 流 
Tesponse.getOutputStreamO.closeO: /关闭 输出 流 


} 
(2) 在 ValidateCodeServlet 中 添加 一 个 获取 随机 颜色 的 方法 ， 关 键 代 码 如 下 : 
public Color getRandomColor(int fc,int be){ 
Random random = new Random(): 
Color randomColor = null: 
if(fe>255) fe=255; 
if(be>255) be=255; 
/设置 0~255 之 间 的 随机 颜色 值 
int r=fetrandom.nextInt(be-fe); 
int g=fc+random.nextInt(be-fe); 
int b=fe+random.nextInt(be-fe); 
TandomColor = new Color(r,g.b); 
return randomColor; // 返 回 具有 指定 红色 、 绿 色 和 蓝 色 值 的 不 透明 的 sRGB 颜色 
人 
(3) 新 建 用 户 注册 表单 页 indexjsp， 在 该 页 的 表单 中 使 用 <img> 标 签 的 src 属性 来 调用 ValidateCodeServlet 


类 生成 验证 码 ， 关 键 代 码 如 下 : 
<form action="" method="post> 
<table align="center"> 


<t> 
<td> 用 户 名 : </td><td><input type="text”" name="name”/></td> 
<t> 
二 /省 略 了 其 他 注册 信息 的 表单 元 素 
<t> 
<td> 验 证 码 : </td><td><img alt="" src="validatecode” ></td> 
<t> 
<t> 
<td> 输 入 验证 码 : </td><td><input type="text” name="code"/></td> 
</tr> 
<t> 
<td colspan="2" align="center"> 
<input type="submit” value=" 池 加 " /><input type="reset” value=" 苗 留 "/> 
<htd> 
</t> 
</table> 
</form> 


图 秘笈 心 法 

由 于 服务 器 端的 Servlet 生成 的 图 像 首先 是 存放 在 缓存 中 的 ， 为 了 使 客户 端 获取 到 最 新 的 图 像 ， 避 免 客户 端 
通过 缓存 获取 图 像 ， 应 该 在 Servlet 中 通过 设置 特定 HTTP 响应 头 来 禁止 客户 端 缓存 页 面 。 在 Servlet 中 ,禁止 客 
户 端 缓存 页 面 的 具体 代码 如 下 : 


response.setHeader("Pragma", "No-cache”): 
response.setHeader("Cache-Control"”. "No-cache"); 
response.setDateHeader("Expires", 0); 
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实例 175 


图 实例 说 明 

在 Web 应 用 程序 开发 或 者 网 站 开发 中 ， 一 个 Web 应 用 可 能 会 存 
在 多 个 客户 同时 访问 的 情况 ， 甚 至 可 能 同时 访问 同一 个 Servlet, 如果 [一 二 一 一 后 于] fr 
程序 没有 及 时 地 处 理 并 发 问题 ， 可 能 会 返回 给 客户 端 错误 的 信息 。 本 [ew | 
实例 将 讲解 如 何 避 免 客户 端的 并 发 问题 ,运行 本 实例 , 如 图 6.12 所 示 ， [0 Ee] ET 


同时 打开 两 个 浏览 器 ， 在 表单 中 输入 同样 的 数字 ， 单 击 “ 等 于 ”按钮 。 图 612 客户 端 并 发 访问 出 现 的 储 误 
提交 之 后 ， 其 中 一 个 提交 之 后 返回 的 值 出 现 错误 。 
图 关键 技术 

避免 客户 端 并 发 的 问题 主要 有 以 下 两 个 解决 办 法 : 

(1) 合理 决定 在 Servlet 中 定义 的 变量 的 作用 域 。 确 定 变量 是 全 局 变量 还 是 局 部 变量 ， 如 果 定义 错误 ， 客 
户 端 并 发 访问 时 可 能 会 出 现 问题 。 

(2) 多 个 线程 同时 访问 共享 数据 而 导致 并 发 问题 时 ， 应 该 使 用 Java 同步 机 制 对 多 线程 进行 同步 。Java 同 
步 机 制 确保 在 任意 时 刻 ， 只 允许 有 一 个 线程 执行 共享 数据 的 代码 块 ， 只 有 当 这 个 线程 退出 同步 代码 块 时 ， 其 他 
线程 才 允 许 执行 同步 代码 块 ， 因 此 可 以 避免 并 发 所 带 来 的 问题 。 


图 设计 过 程 
(1) 新 建 名 为 SynchronizationServlet 的 Servlet 类 ， 在 该 类 中 定义 一 个 全 局 变量 ， 在 doPost0 方 法 中 使 用 


Synchronized 关键 字 避 免 并 发 问题 ， 关 键 代码 如 下 : 
Private int sum =100;// 定 义 一 个 全 局 变量 
public void Ce Tequest, HttpServletResponse Tesponse) 


String 于 request.getParameter("num2"):; 
intn2 = Integer.parseInt(num2); 
Tesponse.setContentType("text/html"); 
response.setCharacterEncoding("UTF-8"); 
PrintWriter out = response.getWriter():; 
‘out Tt OEE HTML PUBLIC \-WW3CWDTD HTML 4.01 Transitional//EN\">"); 


7 
synchronized(this){ /同步 以 下 代码 块 ， 同 步 之 后 ， 某 一 时 刻 只 有 当前 线程 可 以 访问 
out.printin(sumt+"+"+n2+"="); 
try{ 
Thread.sieep(3000):; /使 当前 线程 休眠 3000 毫秒 ， 然 后 继续 执行 
人 


outcloseO: 
} 
(2) 在 web.xml 中 配置 SynchronizationServlet 类 ， 关 键 代码 如 下 : 
<servlet> 
< 
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<servlet-class>com lh .servlet SynchronizationServlet</servletclass> 

</servlet> 

<servlet-mapping> 
<servlet-name>SynchronizationServlet</servlet-name> 
<url-patten>/synchronization</url-pattern> 

</servlet-mapping> 


图 秘笈 心 法 
在 实际 的 开发 应 用 过 程 中 ， 应 该 考虑 到 客户 端 并 发 访问 所 带 来 的 问题 ， 解 决 并 发 问题 的 办 法 主要 是 合理 决 
定 在 Servlet 中 定义 的 变量 的 作用 域 以 及 使 用 Java 同步 机 制 对 线程 进行 同步 。 


图 实例 说 明 

JDBC 是 Java API 中 对 数据 库 操作 的 重要 组 件 ， 也 是 Java 程序 访问 数据 库 的 标准 接口 。 为 了 帮助 程序 员 编 
写 可 以 在 不 同 数据 库 引 擎 之 间 通 用 的 代码 ,在 Java API 中 提供 了 访问 数据 库 的 JDBC API, 使 用 JDBC 中 提供 的 
接口 和 类 可 以 在 任何 关系 数据 库 中 以 相同 的 方式 执行 SQL 语句 。 本 实例 将 介绍 如 何在 Servlet 中 通过 JDBC 技术 
来 访问 数据 库 。 运 行 本 实例 ， 如 图 6.13 所 示 ， 在 表单 页 中 输入 用 户 注册 信息 ， 单 击 “注册 ”按钮 后 会 将 信息 保 
存 到 数据 库 中 。 


JDBC 访问 数据 库 


用 户 名 张 三 

ETT 
世 到 :图 避 Ox 
id name pwd sex age emal 


1 test 123 男 123 test@123.com 
2 张 = 123456 男 26 zhangsan@163.com 


图 6.13 将 用 户 注册 信息 保存 到 数据 库 中 


图 关键 技术 


java.sql 包 中 提供 了 用 于 连接 数据 库 的 JDBC API， 使 用 JDBC 连接 不 同 的 数据 库 需 要 加 载 不 同 数据 库 厂商 
所 提供 的 数据 库 驱 动 类 ， 具 体 的 驱动 类 包 可 以 到 数据 库 厂商 的 官方 网 站 进行 下 载 。 本 实例 使 用 的 是 MySQL 数 
据 库 ， 该 数据 库 的 驱动 包 文件 可 以 到 MySQL 官方 网 站 进行 下 载 。 使 用 JDBC 连接 数据 库 的 步 又 如 下 。 
(1) 注册 加 载 数据 库 连 接 的 驱动 程序 。 加 载 数据 库 驱 动 程序 使 用 的 是 Class.forName0 方 法 ， 调 用 此 方法 会 
将 指定 的 类 加 载 到 JVM 中 ， 关 键 代 码 如 下 : 
Class.forName("com.mysql.jdbc.Driver"): 
(2) 设置 访问 数据 库 连接 URL， 关 键 代 码 如 下 : 
String url = "jdbe:mysql://localhost:3306/db_database06";// 连 接 URL 
(3) 建立 数据 库 连 接 。 通 过 JDBC API 中 DriverManager 类 的 getConnection0 方 法 来 创建 与 数据 库 之 间 的 
连接 ，getConnection() 方 法 需要 接收 3 个 String 类 型 的 参数 , 分 别 是 连接 URL、 用 户 名 以 及 密码 , 关键 代码 如 下 : 
Connection con= DriverManager.getConnection(url, user pwd): 
(4) 建立 连接 之 后 ， 使 用 数据 库 连接 对 象 Connection 创建 用 户 操 作 SQL 语句 的 Statement 对 象 ， 关 键 代 码 
站 East 
也 可 以 用 Connection 对 象 创建 PreparedStatement 对 象 来 执行 SQL 语句 ， 使 用 的 是 prepareStatement0 方 法 ， 
关键 代码 如 下 : 
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PreparedStatement pstmt = con.prepareStatement("select * fom tb_user"); 
(5) 通过 Statement 对 象 的 execute0 方 法 ， 编 译 执行 sql 语句 ， 关 键 代码 如 下 : 


String sql="update from tb_user set age=30 where userId=1"; 
stmt.execute (sql): 


(6) 关闭 数据 库 连 接 。 数 据 库 用 完 后 要 及 时 关闭 与 数据 库 之 间 的 连接 ， 释 放 与 数据 库 关联 的 资源 ， 关 键 代 
码 如 下 : 
con.close0; /关闭 连接 


图 设计 过 程 
(1) 新 建 用 户 注册 表单 页 indexjsp， 关 键 代 码 如 下 : 


<form action="login” method= "Post 


<table align="center ”> 
<t> 
<td> 用 户 名 : </td><td><input type="text” name="name”/></td> 
<t> 
<t> 
<td> 密 码 : </td><td><input type="password" name="pwd"/></td> 
</t> 
we /此 处 省 略 了 表单 中 其 他 选项 
<tr> 
<td colspan="2" align="center’> 
<input type="submit” value=" 逆 议 " /><input type= eset" value=" 熏 乱 "/> 
</td> 
<t> 
</table> 
</form> 


(2) 新 建 名 为 UserInfo 的 JavaBean 类 ， 用 于 封装 用 户 的 注册 信息 ， 关 键 代码 如 下 : 


Ppublic class UserInfo { 


Private String id; /用 户 编号 
Private String name; /用 户 名 
Private String pwd ; /密码 
Private String sex; /性 别 
Private int age: /年 龄 
Private String email; /Email 
public UserInfo0 人 } 


ee /此 处 省 略 了 属性 的 getXXXO 和 setXXX0 方 法 


(3) 在 Servlet 中 使 用 JDBC 访问 数据 库 。 可 以 将 数据 库 连 接 的 代码 单独 写成 一 个 类 ， 这 样 在 其 他 的 功能 
模块 中 可 以 实现 代码 的 重用 。 新 建 名 为 MySQLDBCon 的 类 ， 该 类 主要 包含 一 个 建立 数据 库 连接 的 方法 ， 关 键 
代码 如 下 : 

public class MYSQLDBCon { 


Private static Connection conn = null; 
Public static Connection getConn(){ 


try{ 
ClassforName("com.mysql.jdbc.Driver"): // 加 载 数据 库 驱 动 类 
String user = "root":; /用 户 名 
/密码 
String url = "jdbc:mysql:/Wlocalhost:3306/db_database06"; 。“ /连接 URL 
conn = DriverManager.getConnection(url.user.pwd); // 创 建 数据 库 连 接 
}catch(Exception ex){ 
ex.printStackTraceO; 
} 
return conn: 


} 
} 


(4) 新 建 名 为 LoginDao 的 类 ， 该 类 中 包含 一 个 保存 用 户 注册 信息 到 数据 库 的 方法 和 一 个 获得 本 类 实例 的 
静态 方法 ， 关 键 代码 如 下 : 


public class LoginDao { 
Private static LoginDao instance = null; 
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Ppublic static LoginDao getimstanceO{ 
if(instance 一 mulD{ 
instance = new LoginDao0: 
} 
return instance; 


} 
/保存 用 户 注册 信息 
public boolean saveUser(UserInfo user){ 
Connection conn = null; 
try{ 
conmn = MySQLDBCon .getComm0: // 建 立 数据 库 连接 
String sql = "insert into tb_Userinfo(name,pwd.sex,age.email) Values(?.2.2.?,?)": Winsert SQL 语句 
PreparedStatement pstmt = conn.prepareStatement(sql): 


pstmt.setString(1, user getNameO): /为 SQL 语句 第 1 个 参数 赋值 
pstmit.setString(2, user.getPwdO)); /为 SQL 语句 第 2 个 参数 赋值 
pstmt.setString(3, user.getSex()); /为 SQL 语句 第 3 个 参数 赋值 
pstmt.setInt(4, user.getAge()); /为 SQL 语句 第 4 个 参数 赋值 
pstmt.setString(5, user getEmailO): /为 SQL 语句 第 5 个 参数 赋值 
pstmt.executeUpdate(); /执行 insert 语句 
return true; 
}catch(Exception ex){ 
ex.printStackTrace(): 
}finally{ 
try{ 
conn.close(); 
} catch (SQLException e) { 
e.printStackTrace(); 
} 
} 
return false; 
} 
} 


(5) 新 建 名 为 LoginServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 获得 表单 提交 的 用 户 注 册 信息 ， 并 将 这 
些 信息 封装 到 用 户 信息 类 UserInfo 中 , 然后 调用 LoginDao 中 的 方法 将 注册 信息 保存 到 数据 库 中 , 关键 代码 如 下 : 
Public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 字符 编码 格式 
/t*# 以 下 是 获得 表单 提交 过 来 的 值 %/ 
String name = request.getParameter(“name"); 
String pwd= request.getParameter("pwd"); 
String sex = request. getParameter(" 
String age = request.getParameter("age"); 
int userAge =0; 
if(age!=null&&!age.equals(™"){ 
UserAge = Integer.parseInt(age); 
} 


String email = request.getParameter("email"); 

/4# 以 下 代码 将 获得 的 表单 值 封装 到 用 户 信息 对 象 中 #/ 

UserInfo user = new UserInfo(): 

User.setName(name); 

user.setPwd(pwd); 

User.setSex(sex); 

User.setAge(userAge):; 

user.setEmail(email); 

boolean res = LoginDao.getInstance().saveUser(user): 1/ 将 用 户 注册 信息 保存 到 数据 库 
Pen 1/ 此 处 省 略 了 一 些 非 关键 代码 


国 秘笈 心 法 


在 本 实例 中 ， 将 获取 数据 库 连接 的 代码 、 表 单数 据 以 及 数据 库 的 操作 都 封装 在 单独 的 类 中 ， 而 Servlet 只 是 
负责 调用 这 些 类 ， 这 样 便 充 分 地 体现 了 Servlet 作为 控制 器 (Controller) 角色 的 作用 。 
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高 级 


实例 177 
实用 指数 ， 育 朗 友 


图 实例 说 明 
由 于 建立 数据 库 连 接 需 要 消耗 大 量 的 系统 资源 ， 频 繁 创建 数据 库 连 接 会 大 大 降低 应 用 程序 的 性 能 ， 针 对 这 
-问题 ， 可 以 使 用 数据 库 连 接 池 ， 通 过 它 可 以 提高 访问 数据 库 的 效率 。 以 实例 176 为 基础 ， 本 实例 将 介绍 如 何 
利用 Servlet 访问 数据 库 连接 池 。 


关键 技术 


数据 库 连 接 池 的 工作 原理 是 : 首先 会 在 连接 池 中 建立 一 定数 量 的 数据 库 连 接 ， 当 程序 需要 访问 数据 库 时 ， 
会 从 池 中 取出 一 个 空闲 连接 ， 然 后 会 将 此 连接 锁定 ， 标 记 为 “ 忙 ” 当 本 次 连接 执行 结束 时 ， 会 将 此 连接 放 回 连 
接 池 ， 并 标记 为 “空闲 ”， 当 池 中 没有 空闲 连接 时 ， 池 驱动 程序 会 根据 配置 再 创建 指定 数目 的 数据 库 连接 。 

可 以 在 Tomecat 服务 器 中 配置 数据 库 的 连接 池 ， 由 于 Tomcat 服务 器 的 版 本 不 同 ， 具 体 的 连接 池 配 置 也 不 相 
同 ， 本 实例 是 按照 Tomcat 7 来 配置 的 ， 具 体 配 置 过 程 请 参见 设计 过 程 。 


图 设计 过 程 
(1) 在 Tomcat 服务 器 的 安装 文件 目录 中 ,包含 一 个 conf 文件 夹 ， 该 文件 夹 中 有 一 个 名 为 context.xml 的 文 
件 ， 主 要 是 在 该 文件 的 <Context> 元 素 中 配置 数据 库 的 连接 池 ， 具 体 配置 如 下 : 


<Context path="/mysgql" reloadable="hue”"> 
本 
name: 指定 Resource 的 JINDI 名 字 
type: 指定 Resource 所 属 的 Java 类 名 
auth: 指定 管理 Resource 的 Manager，Container 表示 由 容器 来 管理 Resource 
maxActice: 处 于 活动 状态 的 数据 库 连 接 的 最 大 数目 
maxIdle: 处 于 空闲 状态 的 数据 库 连 接 的 最 大 数目 
maxWait: 指定 数据 库 连 接 池 中 处 于 空闲 状态 连接 的 最 长 时 间 ， 以 毫秒 为 单位 
username': 连接 数据 库 的 用 户 名 
password: 连接 数据 库 的 密码 
driverClassName: ”连接 数据 库 的 JDBC 驱动 程序 
al: 连接 数据 库 的 URL 
a 
<Resource name="dbc/mysql” auth="Container” 
type="avax.sql.DataSource” 
maxActive="100”" 
maxIdle="30" 
max Wait="]0000" 
Usermame="7oot” 
password="111" 
driverClassName="com.mysql.jdbc. Driver” 
url="ydbc:mysql://ocalhost:3306/db_database06"/> 
<ResourceLink global=")dbc/mysgl" name="jdbc/mysql”" type="javax.sql.DataSource”"/> 
<!-- Default set of monitored resources --> 
<WatchedResource>WEB-INF/webxml</WatchedResource> 
</Context> 


(2) 配置 完 数据 库 连 接 池 后 ， 需 要 将 MySQL 数据 库 的 驱动 程序 文件 复制 到 Tomcat 安装 目录 的 lib 文件 夹 中 。 
(3) 建立 数据 库 连 接 的 MySQLDBCon 类 ， 关 键 代 码 如 下 : 
public class MySQLDBCon { 


Private static Connection conn = null: 
Ppublic static Connection getConnO{ 


{ 
/通过 这 个 类 访问 Tomcat 配置 文件 Contextxml 中 指定 的 JNDI 数据 源 
InitialContext ctx = new InitialContextO: 
/使 用 lookup0 方 法 查找 匹配 的 JNDI 名 字 ， 获 得 数据 源 
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DataSource ds = (DataSource)ctx.lookup("java:comp/env/idbc/mysql"); 
/从 数据 源 中 获得 数据 库 连接 
com = ds.getConnection(); 
jeatch(Exception ex){ 
ex.printStackTrace(); 
} 


return conn; 
} 
} 


图 秘笈 心 法 

JNDI (Java Naming and Directory Interface)， 可 以 简单 地 把 JNDI 理解 为 一 种 将 对 象 和 名 字 绑 定 的 技术 ， 对 
象 工厂 负责 生产 出 对 象 , 这 些 对 象 都 和 唯一 的 JNDI 名 字 绑 定 , 外 部 程序 通过 JNDI 名 字 来 获取 某 个 对 象 的 引用 。 
例如 ， 在 本 实例 中 ， 在 Tomcat 容器 中 构造 一 个 数据 源 ， 即 javax.sql.DataSource 的 实例 ， 然 后 把 它 发 布 为 JNDI 
资源 ， 名 称 为 jdbc/mysql， 最 后 在 Java 应 用 中 通过 JNDIAPI 中 的 javax.nameing.Context 接口 来 获取 这 个 数据 源 
的 引用 。 


实例 178 


图 实例 说 明 
本 实例 将 介绍 如 何 通过 Servlet 来 实现 个 人 所 得 税 的 计算 。 运行 本 实例 ， 如 图 6.14 所 示 , 在 文本 框 中 输入 收 
入 金额 和 起 征 金 额 ， 单 击 “ 计 算 个 税 ”按钮 ， 将 调用 Servlet 计算 个 人 所 得 税 并 显示 结果 。 
个 人 所 得 税 计划 器 
A i 「 个 人 所 得 税 - 


| 您 应 交纳 的 个 人 汤 得 税 为 ， 325, 0 元 


图 6.14 个 人 所 得 税 计算 器 
图 关键 技术 

工资 、 薪 金 的 个 人 所 得 税 计算 公式 为 : 〈 收 入 金额 -起 征 点 金额 ) x 税率 -速算 扣除 数 。 不 同 的 工资 范围 其 税 
率 和 速算 扣除 数 也 不 同 。 薪 资 在 扣除 起 征 点 金额 之 后 的 范围 的 税率 以 及 速算 扣除 数 如 表 6.2 所 示 。 
表 6.2 薪资 在 扣除 起 征 点 金额 之 后 的 


薪资 在 扣除 起 征 点 金额 之 后 的 范围 
金额 在 0 一 500 之 间 


金额 在 501 一 2000 之 间 25 
金额 在 2001 一 5000 之 间 125 
金额 在 5001 一 20000 之 间 375 


金额 在 20001 一 40000 之 间 


金额 在 40001 一 60000 之 间 3375 
金额 在 60001 一 80000 之 间 6375 
金额 在 80001 一 100000 之 间 10375 


金额 在 100001 以 上 
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设计 过 程 
(1) 新 建 表单 页 index.jsp， 关 键 代码 如 下 : 


<form action="incometax” method="post”> 
<table> 
<t> 
<td> 收 入 金额 : </td> 
<td> 
<input type="text” name="laborage” 广元 
</td> 


<td> 起 征 金额 : </td> 
<td> 


<input type="fext" name="startpoint” value="2000" 记 元 
</td> 


<td align="center" colspan="2"> 
<input type="submit” value=" 太 瀑 介 琵 "/> 
<td> 
</a> 
</table> 
</form> 
(2) 新 建 名 为 IncomeTaxServlet 的 Servlet 类 ， 该 类 中 实现 计算 个 人 所 得 税 的 方法 ， 在 doPost0 方 法 中 根据 
获得 的 收入 金额 和 起 征 金额 来 计算 个 人 所 得 税 ， 关 键 代码 如 下 : 
1/ 计 算 个 人 所 得 税 
public double getTax(double charge){ 
double tax = 0; 
if(charge<=0){ 
tax=0; 
}else if(charge>0&-&charge<=500){ 
tax = charge*0.05; 
jelse if(charge>500&-&:charge<=2000){ 
tax = charge*0.1-25; 
}else if(charge>2000&&-charge<=5000){ 
tax = charge*0.15-125; 
jelse if(charge>5000&&-charge<=20000){ 
tax = charge*0.2-375; 
}else if(charge>20000&-&:charge<=40000){ 
tax = charge*0.25-1375; 
jelse if(charge>40000&-&charge<=60000){ 
tax = charge*0.30-3375; 
}else if(charge>60000&-&:charge<=80000){ 
tax = charge*0.35-6375; 
}else if(charge>80000&&charge<=100000){ 
tax = charge*0.4-10375; 
}else if(charge>100000){ 
tax = charge*0.45-15375; 


return tax: 


9 
public void doPost(HttpServletRequest request HttpServletResponse response) 
throws ServletException, IOException { 
double laborage = Double.parseDouble(request.getParameter("laborage"”)): /获得 表单 提交 的 工资 收入 
double startPoint = Double.parseDouble(request.getParameter("startpoint")); /获得 表单 提交 的 征 税 起 点 金额 


double myTax = this.getTax(laborage - startPoint); /调用 计算 个 人 所 得 税 的 方法 
Tequest.setAttribute("Tax". myTax): 1/ 将 个 人 所 得 税 的 值 保存 在 请 求 中 
Tequest.getRequestDispatcher("result.jsp").forward(request, response): // 请 求 转发 到 resultjsp 页 
} 
(3) 在 web.xml 中 配置 mcomeTaxServlet 类 ， 关 键 代 码 如 下 : 
<servlet> 


<servlet-name>IncomeTaxServlet</servlet-name> 
<servlet-class>com.lh.servlet.Income TaxServlet</servlet-class> 
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<url-pattern>/incometax</url-pattern> 
</servlet-mapping> 

(4) 新 建 resultjsp 页 ， 从 请 求 范围 内 取出 个 人 所 得 税 的 计算 结果 并 显示 ， 关 键 代码 如 下 : 
<table> 


<td> 您 应 交纳 的 个 人 所 得 税 为 : </td> 
<td> 
<9%6=request.getAttribute("Tax")toStringO %> 元 


</tr> 
</table> 


国 秘笈 心 法 

本 实例 实现 的 只 是 工资 、 薪 金 的 个 人 所 得 税 计算 ， 而 实际 的 个 人 所 得 税 还 包括 很 多 种 ， 例 如 ， 个 体 工 商户 
的 生产 经 营 所 得 税 、 企 业 单位 的 承包 经 营 所 得 税 、 劳 动 报酬 所 得 税 等 ， 其 具体 的 税率 算法 也 有 所 差异 。 如 果 读 
者 对 此 感 兴趣 ， 可 以 查阅 相关 资料 进行 了 解 ， 此 处 不 再 详细 介绍 。 


| 


图 实例 说 明 

在 访问 一 些 网 站 时 ， 用 户 在 登录 网 站 之 后 ， 网 站 会 将 该 用 户 信 息 保存 一 段 时 间 ， 当 该 用 户 再 访问 该 网 站 时 ， 
不 需要 输入 用 户 名 和 密码 就 会 自动 进入 登录 状态 。 运 行 本 实例 ， 如 图 6.15 所 示 ， 输 入 账号 和 密码 ， 然 后 选择 有 
效 期 为 “30 天 内 有 效 ”， 单 击 “ 登 录 ” 按 钮 之 后 ， 该 账号 会 保存 30 天 ， 再 次 访问 时 不 必 登 录 ， 会 直接 进入 登录 
状态 ， 只 有 单 击 “ 注 销 登 录 ” 超 链接 时 ， 该 用 户 的 登录 状态 才 会 失效 。 


用 户 登 录 欢迎 您 回来 
test， 欢 迎 您 党 东 本 网 站 1 注销 父 冰 

账 呈 :test 
3 O00009 

关闭 出 览 器 即 失效 
有 效 其 ; 回 30 天 内 有 效 

水 久 有 站 

全 系 


图 6.15 利用 Servlet 实现 用 户 永久 登录 


图 关键 技术 


本 实例 主要 是 在 Servlet 中 通过 Cookie 技术 来 实现 的 。 首 先 在 Servlet 中 获得 用 户 输入 的 账号 、 密 码 和 有 效 期 ， 
然后 将 账号 信息 保存 在 Cookie 中 ， 并 设置 该 Cookie 的 最 大 保存 时 间 ， 然 后 将 此 Cookie 保存 在 客户 端的 Cookie 中 。 

本 实例 的 实现 还 用 到 了 MD5 加 密 技术 。 考 虑 到 账号 密码 的 安全 性 ， 由 于 不 能 将 密码 保存 在 Cookie 中 ， 因 
此 可 以 在 Servlet 中 ， 通 过 MD5 加 密 算法 将 用 户 账号 生成 一 个 密 钥 并 保存 在 Cookie 中 ， 然 后 在 用 户 登录 页 中 ， 
就 可 以 根据 该 密 钥 来 判断 页 面 显示 的 是 用 户 登 录 还 是 登录 后 的 状态 。MD5 加 密 是 通过 java.security Message 
Digest 类 实现 的 ， 可 以 使 用 MD5 或 SHA 字符 串 类 型 的 值 作为 参数 来 构造 一 个 MessageDigest 类 对 象 ， 并 使 用 
update0 方 法 更 新 该 对 象 ， 最 后 通过 digest0 方 法 完成 加 密 运 算 ， 代 码 如 下 : 


String pwd="123456"; 

MessageDigest md = MessageDigest.getInstance("MD5"); 。 // 创 建 具有 指定 算法 名 称 的 摘要 
md.update(pwd.getBytesO): // 使 用 指定 的 字 节 数组 更 新 摘要 
byte mdBytes[] = md.digestO: // 进 行 喻 希 计算 并 返回 一 个 字 节 数组 


Java Web 开发 实例 大 全 (基础 卷 ) 


图 设计 过 程 
(1) 新 建 名 为 MakeMD5 的 类 ， 该 类 实现 了 将 字符 串 转换 为 MD5 值 的 方法 ， 关 键 代码 如 下 : 
public class MakeMDS { 


Ppublic final static String getMDS(String str){ 
char hexDiagitArr[] ={"0","1""2",3",4"5",6""7",8',9" a b', 


ee 
MessageDigest digest = null 
try{ 
digest= MessageDigest.getInstance("MD5"); 。 // 创 建 MD5 算法 摘要 
digest.update(str.getBytesO); // 更 新 摘要 
byte mdBytes[] = digest.digestO; // 加 密 并 返回 字 节 数组 
/新 建 字符 数组 ， 长 度 为 myBytes 字 节 数组 的 2 倍 ， 用 于 保存 加 密 后 的 值 
char newWCArr[] = new char[mdBytes.length*2]; 
int k=0; 
for(int i=0:i<mdBytes.length:it+){ /循环 字 节 数组 
byte byte0 = mdBytes{i]; // 获 得 每 一 个 字 节 
newCArr[k++] = hexDiagitAn[byte0 >>> 4 &Oxf]; 
newCAr[k++] = hexDiagitArm[byte0 & Oxf]; 
} 
return String.valueOftnewCAr); /返回 加 密 后 的 字符 串 
}catch(Exception ex){ 
ex.printStackTrace(); 
} 
return null; 
1 


} 

(2) 新 建 用 户 登录 页 indexjsp， 该 页 中 包含 一 个 用 户 登录 表单 和 一 个 登录 之 后 状态 的 显示 信息 ， 如 果 用 户 
第 一 次 访问 该 页 会 显示 用 户 登 录 表单 ， 并 不 会 显示 登录 之 后 的 信息 ， 当 用 户 登 录 之 后 再 次 访问 用 户 登录 页 时 ， 
会 判断 Servlet 返回 的 Cookie 信息 ， 根 据 Cookie 信息 来 决定 是 否 显示 用 户 登 录 之 后 的 信息 ， 关 键 代码 如 下 : 

<b 

wm 

if(loginFlag){ 
%> 
<fieldset class="style1”><legend> 欢 迎 您 回来 </legend> 
<table align="center "> 
<t> 
<td><%=account %>， 欢 迎 您 登录 本 网 站 ! </td> 
<td align="center”> 
<a href="<%=basePath%>foreverlogin?action=logout"> 注 销 登录 </a> 
</td> 
</tr> 
‘</table> 
</fieldset> 
<%}else{ %> 
<fieldset class="style1"><legend> 用 户 登录 </legend> 
<form action="foreverlogin?action=login”" method="post”> 
<table align="center "> 
<b> 
<td> 账 号 : <ltd> 
<td><input type="text” name="account"></td> 


<td> 密 码 : </td> 
<td><input type="password” name="pwd"></td> 


<td> 有 效 期 </td> 
<td> 
<input type="radio" name="timeout” value="-1" checked="checked”> 
关闭 浏览 器 即 失效 <br> 
<input type= adio"name 一 "mieout” value="<%=30*24*60*60 %>"> 
30 天 内 有 效 <br/> 
<input type="radio" name="timeout” value="<%=Integer MAX_VALUE %>"~> 
永久 有 效 
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<htd> 
</tr> 
<h> 
<td colspan="2" align="center "><input type="submit” value=" 登 ”未 "></td> 
< 
</table> 
</form> 
</fieldset> 
<%} %> 
</body> 


(3) 新 建 名 为 ForeverLoginServlet 的 Servlet 类 ， 在 该 类 的 doPost0 方 法 中 根据 提交 过 来 的 action 参数 值 来 
判断 调用 用 户 登 录 方 法 或 用 户 注销 的 方法 ， 关 键 代码 如 下 : 
Ppublic void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); 
Tesponse.setCharacterEncoding("UTF-8"); 
String action = request.getParameter("action"): 
if("login".equals(action)){ 

this.login(request, response); 
}else if("logout".equals(action)){ 

this.logout(request, response); 


} 
} 
ee 
* 该 方法 处 理 用 户 登 录 


/设置 请 求 编码 格式 

/设置 响应 编码 格式 

/获得 action 参数 ， 主 要 判断 是 登录 还 是 注销 
// 调 用 login0 方 法 


// 调 用 logout0 方 法 


public void login(HttpServletRequest request,HttpServletResponse response) 


throws ServletException, IOException{ 
String account = request.getParameter("account"); 
String pwd = request.getParameter("pwd"): 
int timeout= Integer.parselnt(request.getParameter("timeout")); 
String md5Account = MakeMD5.getMD5(account); 
account = URLEncoder.encode(account,"UTF-8"); 
Cookie accountCookie = new Cookie("account",account); 
accountCookie.setMaxAge(timeout):; 


/获得 账号 

/获得 密码 

/获得 登录 保存 期 限 

/将 账号 加 密 

// 如 果 账 号 是 中 文 ， 需 要 转换 Unicode 才能 保存 在 Cookie 中 
// 将 账号 保存 在 Cookie 中 

// 设 置 账号 Cookie 的 最 大 保存 时 间 


Cookie md5AccountCookie = new Cookie("md5Account",md5Account);// 将 加 密 后 的 账号 保存 在 Cookie 中 


mdsAccountCookie.setMaxAge(timeout); 
Tesponse.addCookie(accountCookie); 
Tesponse.addCookie(mdsAccountCookie); 
try{ 
Thread.sleep(1000); 
} catch (InterruptedException e) { 
e.printStackTrace(); 
} 


response.sendRedirect("index.jsp?"+System.currentTimeMillisO): 


人 
* 该 方 法 处 理 用 户 注销 
村 


/设置 加 密 后 的 账号 最 大 保存 时 间 
// 写 到 客户 端的 Cookie 中 
// 写 到 客户 端的 Cookie 中 


// 将 此 线程 暂停 1 秒 后 继续 执行 


// 将 页 面 重 定向 到 用 户 登 录 页 


public void logout(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException{ 
Cookie accountCookie = new Cookie("account".""); 
accountCookie setMaxAge(0): 
Cookie mdsAccountCookie = new Cookie("mdsAccount".""): 
md5AccountCookie setMaxAge(0): 
Tesponse .addCookie(accountCookie): 
Tesponse addCookietmd5AccountCookie): 
try{ 
Thread.sleep(1000); 
} catch (InterruptedException e) { 
e.printStackTrace(): 


} 
// 将 页 面 重 定向 到 用 户 登录 页 


Tesponse.sendRedirect("index jsp?"+System.currentTimeMillis()): 


// 创 建 一 个 空 的 Cookie 

// 设 置 此 Cookie 保存 时 间 为 0 

1/ 创建 一 个 空 的 Cookie 

// 设 置 此 Cookie 保存 时 间 为 0 

// 写 到 客户 端 Cookie 中 ， 将 覆盖 名 为 account 的 Cookie 

// 写 到 客户 端 Cookie 中 ， 将 覆盖 名 为 md5AccountCookie 的 Cookie 值 


// 将 此 线程 暂停 1 秒 后 继续 执行 
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(4) 在 indexjsp 页 中 ， 设 置 一 个 保存 是 否 登录 的 标记 loginFlag 为 false， 通 过 request 内 置 对 象 获得 所 有 
Cookie 信息 的 数组 , 循环 该 数组 查找 账号 的 Cookie 信息 和 加 密 账 号 之 后 的 Cookie 信息 ， 然 后 通过 MD5 算法 将 
账号 加 密生 成 密 钥 ， 将 该 密 钥 值 与 Cookie 中 保存 的 加 密 账 号 比较 ， 如 果 两 值 匹配 则 将 loginFlag 标记 改 为 tue， 
然后 在 页 面 中 根据 loginFlag 的 值 来 判断 显示 用 户 登录 之 后 的 信息 ， 关 键 代 码 如 下 : 

<% 


boolean loginFlag = false: /1/ 设 置 一 个 变量 ， 用 于 保存 是 否 登录 
String account = null ; /声明 用 于 保存 从 Cookie 中 读 取 的 账号 
String md5Account = mall /声明 用 于 保存 从 Cookie 中 读 取 的 加 密 的 账号 
Cookie cookieArr[] = request.getCookies(); /获取 请 求 中 所 有 的 Cookie 
if(cookieArr!=nullé&:cookieArr length>0){ 
for(Cookie cookie : cookieAm){ // 循 环 Cookie 数组 
if(cookie.getName().equals("account"){ 
account = cookie.getValue(); // 找 到 账号 的 Cookie 值 
account = URLDecoder.decode(account."UTF-8"); // 解 码 ， 还 原 中 文字 符 串 的 值 


} 
if(cookie.getName().equals("md5Account")){ 
md5Account = cookie.getValue0: // 找 到 加 密 账 号 的 Cookie 值 

} 

p } 

if(account!=null&-&md5Account!=nulD) { 

loginFlag = md5Account.equals(MakeMDS.getMDS(account)); 
} 


%> 
图 秘笈 心 法 

当 Servlet 向 客户 端 写 Cookie 时 ， 关 键 是 要 通过 Cookie 类 的 setMaxAge(int expiry) 方 法 来 设置 Cookie 的 有 
效 期 。 参 数 expiry 以 秒 为 单位 ， 如 果 expiry 大 于 零 ， 就 指示 浏览 器 在 客户 端 硬盘 上 保持 Cookie 的 时 间 为 expriy 
秒 ; 如果 expiry 等 于 零 ， 就 指示 浏览 器 删除 当前 Cookie; 如 果 expiry 小 于 零 ， 就 指示 浏览 器 不 要 把 Cookie 保存 
到 客户 端 硬盘 ， 当 浏览 器 进程 关闭 时 ，Cookie 也 就 消失 。 
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过 滤器 与 监听 器 技术 


# Servlet 过 滤 路 
| 监听 路 的 应 用 


Java Web 开发 实例 大 全 (基础 卷 ) 


7.1 Servlet 过 滤器 


Servlet 过 滤器 从 表面 的 字 意 理解 为 经 过 一 层 层 的 过 滤 处 理 才 达到 使 用 的 要 求 , 而 其 实 Servlet 过 滤器 就 是 服 
务 器 与 客户 端 请 求 与 响应 的 中 间 层 组 件 ,在 实际 项 目 开发 中 Servlet 过 滤器 主要 用 于 对 浏览 器 的 请 求 进行 过 滤 处 
理 , 将 过 滤 后 的 请 求 再 转 给 下 一 个 资源 。 其 实 Servlet 过 滤器 与 Servlet 十 分 相似 , 只 是 多 了 一 个 具有 拦截 浏览 器 
请 求 的 功能 。 过 滤器 可 以 改变 请 求 的 内 容 来 满足 客户 的 需求 ， 对 开发 人 员 来 说 ， 这 点 在 Web 开发 中 具有 十 分 重 
要 的 作用 。 


实例 180 


图 实例 说 明 

本 实例 将 介绍 如 何 创建 一 个 过 滤器 ， 并 使 用 过 滤器 在 打开 页 SE 
面 的 同时 输出 信息 ， 此 功能 是 由 过 滤器 处 理 完成 的 ， 运 行 结果 如 放生 的 水色 纪 过 兴 时 
图 7.1 所 示 。 


图 关键 技术 


Servlet 过 滤器 实现 了 Filter 接口 ， 在 该 接口 中 定义 了 以 下 几 
个 方法 。 

口 init0: 程序 启动 时 调用 此 方法 ， 用 于 初始 化 该 Filter。 

口 doFilter0: 客户 请 求 服务 器 时 会 经 过 这 里 ， 是 具体 执行 过 滤器 代码 。 

口 destroy0: 程序 关闭 时 调用 此 方法 ， 用 于 销毁 一 些 资源 。 

以 上 3 个 方法 反映 了 Filter 的 生命 周期 ， 其 中 init0 和 rs A -次 ， 分 别 在 Web 程序 加 载 
和 印 载 时 调用 ， 而 doFilter0 方 法 每 次 有 客户 端 请 求 就 会 被 调用 一 


图 设计 过 程 


(1) 创建 过 滤器 类 FirstFilter， 主 要 代码 如 下 : 
package com.mr; 
public class FirstFilter implements Filter { 
Private FilterConfig filterConfig; 
// 初 始 化 方法 
public void init(FilterConfig filterConfig) throws ServletException { 
this.filterConfig = filterConfig; 


图 7.1 创建 过 滤器 


/具体 执行 的 方法 
Public void doFilter(ServletRequest request, ServletResponse response.FilterChain filterChain) throws IJOException{ 
try{ 
Systen.out.printin(" 客 户 端的 请 求 经 过 这 里 1111 "); 
filterChain.doFilter (request, response): 
System.out.printin(" ee 
} catch (ServletException e) 
System.out] eg 
}catch(IOException io){ 
System.outprintln(" 账 号 和 密码 请 求 失败 7): 
} 


} 
/销毁 过 滤器 
public void destroyO { 
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} 
(2) 在 web.xml 中 配置 过 滤器 ， 关 键 代 码 如 下 : 

<filter> 
<filter-name>FirstFilter</filter-name><!-- 过 滤器 名 称 --> 
<filter-class>com.mr.FirstFilter</filter-class><!-- 过 滤器 的 实现 类 --> 

</filter> 

<filter-mapping> 
<filter-name>firstFilter</filter-name> ”<!-- 映 射 过 滤器 名 称 --> 
<url-pattern>/*</url-pattern> <!-- 使 用 通配符 * 什 么 请 求 都 经 过 滤器 --> 

/filter-mapping> 


国 秘笈 心 法 
过 滤器 在 web.xml 配置 时 ，<filter> 元 素 用 来 定义 一 个 过 滤器 ，<filter-mapping> 元 素 用 于 为 过 滤器 映射 特定 
的 URL。 注意 在 配置 多 个 Filter 时 执行 有 先 有 后 ， 规 定 是 <filter-mapping> 配 置 在 前 面 的 Filter 执行 要 早 于 配置 在 
后 面 的 Filter， 另 外 要 注意 多 个 Filter 可 能 会 互相 影响 。 
初级 
实用 指数 : 食 食 


图 实例 说 明 


本 实例 将 介绍 如 何 使 用 过 滤器 技术 ， 防 止 通过 其 他 URL 地 址 直接 访问 本 站 资源 。 运 行 本 实例 ， 当 URL 地 
址 不 是 本 站 地 址 时 ， 在 网 页 中 将 显示 错误 提示 信息 ， 实 例 运行 效果 如 图 7.2 所 示 。 


TIRE | 
OTP -sxjPea 万 
Er TE 
| 2 em p/honcaon leseno 


| A 错 更 UR1 地 址 访问 图 片 


二 [ET ET 


图 7.2 防盗 链 过 滤器 


图 关键 技术 


本 实例 主要 应 用 request 对 象 的 getHeader0 方 法 获取 信息 头 来 源 地 址 ， 若 是 来 自 其 他 网 站 就 弹出 错误 图 片 。 
getHeader( 方 法 的 语法 结构 如 下 : 
public String getHeader(String headerName) 


参数 说 明 
headerName: 指定 字符 串 类 型 的 响应 头 名称 。 
图 设计 过 程 


(1) 创建 Filter 过 滤器 的 实现 类 ImageFilter， 在 doFilter0 方 法 中 对 request 进行 验证 ， 实 现 将 图 片 显示 在 页 


Java Web 开发 实例 大 全 (基础 卷 ) 
面 之 前 ， 验 证 客户 端 请 求 是 否 来 自 本 网 站 ， 主 要 代码 如 下 : 


Ppublic class ImageFilter implements Filter { 
public void init(FilterConfig config) throws ServletException { 
} 
public void doFilter(ServletRequest req. ServletResponse res、 
FilterChain chain) throws IOException. ServletException { 
HttpServletRequest request = (HttpServletRequest) req; Jrequest 对 象 


HttpServletResponse response = (HttpServletResponse) res; Jresponse 对 象 
String imurl = request.getHeader("imurl"); /| 链接 的 来 源 地 址 
if (imurl — null | !imurl.contains(request.getServerName(O)) { // 判 断 访问 来 源 
Tequest.getRequestDispatcher("/errorimage.gif") forward(request // 显 示 错误 图 片 
Tesponse); 
}else{ 
chain.doFilter(request, response): // 正 常 显示 图 片 
} 
} 
public void destroyO { 
} 
} 
(2) 在 web.xml 中 配置 Filter， 该 过 滤器 是 从 request 信息 头 中 获取 请 求 来 源 ， 主 要 代码 如 下 : 
<filter> 


<filter-name>imageFilter</filter-name> 
<filter-class>com.mr.filter.ImageFilter</filter-class> 
</filter> 

<filter-mapping> 

<filter-name>imageF ilter</filter-name> 
<url-pattern>/images/*</url-pattern> 
</filter-mapping> 


图 秘笈 心 法 


本 实例 的 Filter 是 对 images 下 所 有 的 资源 有 效 ， 如 果 是 “/*” 就 是 对 工程 包 下 所 有 的 资源 有 效 。 
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实用 指数 : 机 页 


图 实例 说 明 

在 实际 的 项 目 开 发 过 程 中 ， 经 常 需要 在 项 目 运行 时 记录 并 在 控制 台中 输出 运行 时 的 日 志 信息 ， 便 于 查看 项 
目的 运行 状况 。 本 实例 将 介绍 如 何 应 用 过 滤器 实现 日 志 记 录 。 运 行 本 实例 ， 将 在 控制 台中 输出 项 目 运行 时 的 日 
志 信息 ， 如 图 7.3 所 示 。 


加 


Jtomcat6Server [Remote Jave Applcatior] CAProgram Fles\Javedk1 .6.0_18\bin\e/aw.ewe (2010-9-16 上 | 


[INFO] 0:0:0:0:0:0:0:1 访问 了 /167/， 总 用 时 zi 
[INFO] 0:0:0:0:0:0:0:1 访问 了 /16?7/login.jsp,| 


图 7.3 控制 台 输出 日 志 信息 


图 关键 技术 


本 实例 主要 应 用 Apache 的 Log4j 组 件 输出 日 志 信 息 。 该 组 件 主要 用 于 日 志 管理 。Logger 是 Log4j 的 日 志 记 
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录 器 ， 它 是 Log4j 的 核心 组 件 。 
在 程序 中 可 以 使 用 Logger 类 的 不 同方 法 来 输出 各 种 级 别 的 日 志 信息 ，Log4j 会 根据 配置 的 当前 日 志 级 别 决 
定 输出 哪些 日 志 。 对 应 各 种 级 别 日 志 的 输出 方法 如 下 : 
(1) DEBUG 日 志 可 以 使 用 Logger 类 的 debug0 方 法 输出 日 志 消 息 ， 语 法 格式 如 下 : 
loggerdebug(Object message) 
message: 输出 的 日 志 消 息 ， 如 “logger.debug(" 调 试 日 志 ")”。 
(2) INFO 日 志 可 以 使 用 Logger 类 的 info0 方 法 输出 日 志 消 息 ， 语 法 格式 如 下 : 
loggerinfo(Object message) 
message: 输出 的 日 志 消 息 ， 如 “logger.info(" 消 息 日 志 ")”。 
(3) WARN 日 志 可 以 使 用 Logger 类 的 warmn0 方 法 输出 日 志 消息 ， 语 法 格式 如 下 : 
logger.warn(Object message) 
message: 输出 的 日 志 消 息 ， 如 “loggerwarn(" 警 告 日 志 ")”。 
(4) ERROR 日 志 可 以 使 用 Logger 类 的 error0 方 法 输出 日 志 消息 ， 语 法 格式 如 下 : 
logger.error(Object message) 
message: 输出 的 日 志 消 息 ， 如 “logger.error(" 数 据 库 连接 失败 ")”。 
(5) FATAL 日 志 可 以 使 用 Logger 类 的 fatal0 方 法 输出 日 志 消 息 ， 语 法 格式 如 下 : 
logger.fatal(Object message) 
message: 输出 的 日 志 消 息 ， 如 “logger.fatal(" 内 存 不 足 ")”。 
图 设计 过 程 
(1) 创建 日 志 Filter 实现 类 LogFilterjava， 主 要 是 在 初次 调用 时 开始 记录 ， 执 行 时 获取 访问 的 URI 和 执行 
前 的 时 间 ， 关 键 代 码 如 下 : 


Ppublic class LogFilter implements Filter { 
Private Log log = LogFactory.getLog(this.getClass()): 


Private String filterName; 

public void init(FilterConfig config) throws ServletException { 
filterName = config.getFilterName(); /获取 Filter 的 name 
log.info(" 启 动 Filter: " + filterName); /启动 Filter 


} 
Ppublic void doFilter(ServletRequest req, ServletResponse res.FilterChain chain) 
throws IOException, ServletException { 
HttpServletRequest request = (HttpServletRequest) req; 
HttpServletResponse response = (HttpServletResponse) res; 


long startTime = System.currentTimeMillis|: /运行 前 的 时 间 

String requestURI = request.getRequestURIO: // 获 取 访 问 的 URI 

TequestURI = request.getQueryString( 一 null ? requestURI /所 有 的 地 址 栏 参数 对 比 
: (requestURI + "?" + request.getQueryStringO); 

chain.doFilter(request response); 

long endTime = System.currentTimeMillis|: 

/消耗 的 总 时 间 


log.info(request.getRemoteAddr0 + "访问 了 "+requestURI+", 总 用 时 "+ (endTime - startTime) + ”毫秒 。"); 


} 
public void destroy0 { /销毁 时 记录 日 志 
1 
} 
(2) 使 用 日 志 记 录 需 要 commons-logging 的 Log4j 来 输出 日 志 ， 本 实例 输出 格式 如 下 : 
log4j.rootLogger=INFO.A1 
log4jappenderAl=org.apache log4j.ConsoleAppender 
log4j.appenderAlayout=org apache log4j PatternLayout 
1l0g4j.appender. A1.layout.ConversionPatterm—%-d {yyyy-MM-dd HH\:mmi\:ss.SSS} [96l]-[96p] 9om9in 


图 秘笈 心 法 
Filter 日 志 最 大 的 优点 在 于 可 拆 印 性 ， 当 不 需要 记录 日 志 功 能 时 ， 只 需要 将 Filter 配置 注释 掉 即 可 。 
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实例 183 


实用 指数 : 依依 食 


力 实例 说 明 

有 了 时 对 网 站 内 容 进行 控制 是 用 来 防止 输出 非法 内 容 或 者 敏感 内 容 的 ， 常 规 的 办 法 是 保存 数据 库 之 前 对 非法 
内 容 进 行 蔡 换 ， 但 这 种 办 法 具有 局 限 性 ， 工 作 量 大 并 且 掉 合 性 比较 高 。 本 实例 将 介绍 如 何 使 用 过 滤器 ， 对 非法 
字符 和 关键 字 进 行 过 滤 处 理 ， 实 例 运行 结果 如 图 7.4 所 示 。 


| 
GO aon lolx en | 
HD MD) EW WA IRO Nd 
从 0。 国 


网 阁 编程 词典 您 的 建议 有 哪些 


增 学 习 内 容 丰 富 度 ， 如 添加 居 *， 技 术 与 
技术 的 实用 性 网 络 浏览 响应 时 间 ， 以 后 
周全 的 客服 云 振 


国 nemnet | 全 PE 区 有 而” 太 129% 


7.4 运行 结果 


图 关键 技术 


实现 本 实例 ， 可 以 在 服务 器 端 使 用 过 滤器 技术 。 在 Web 服务 器 获得 用 户 的 请 求 之 前 ， 过 滤器 可 以 访问 该 请 
求 。 在 Web 服务 器 将 输出 响应 发 送 给 用 户 之 前 ， 过 滤器 还 可 以 访问 该 响应 。 所 以 在 过 滤器 中 访问 该 响应 信息 ， 
然后 将 该 响应 转换 为 自 定 义 的 响应 ， 最 后 将 过 滤 后 的 自 定 义 响应 内 容 返 回 给 客户 端 。 

在 java.servlethttp 包 中 ， 包 含 了 一 个 名 为 HttpServletResponseWrapper 的 类 ， 该 类 的 对 象 表示 一 个 自 定义 的 
响应 对 象 ， 它 实现 了 HttpServletResponse 接口 ， 其 构造 方法 通过 传 入 的 HttpServletResponse 类 型 的 参数 ， 将 响 
应 转换 为 自 定义 的 响应 。 构 造 方法 的 语法 结构 如 下 : 

public HttpServletResponseWrapper(HttpServletResponse response) 

图 设计 过 程 
(1) 创建 Crjava 类 文件 ， 作 用 是 处 理 对 页 面 响应 的 内 容 ， 用 toString0 方 法 进行 重 载 ， 然 后 将 页 面 中 的 内 
容 转换 成 字符 串 ， 关 键 代 码 如 下 : 
public class Cr extends HttpServletResponse Wrapper { 


Private CharArrayWriter output: 
public String toStringO { 


ee 
return new PrintWriter(output): 
} 
} 
(2) 创建 过 滤器 实现 类 CtFilterjava， 在 doFilter0 方 法 中 获取 页 面 的 响应 ， 然 后 对 这 个 响应 内 容 进 行 处 理 
并 生成 自 定义 的 响应 ， 把 敏感 字 去 掉 并 蔡 换 成 “***”， 再 返回 给 客户 端 ， 关 键 代码 如 下 : 
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public class CtFilter extends HttpServlet implements Filter { 
public void init(FilterConfig filterConfig) throws ServletException { 


} 
Ppublic void doFilter(ServletRequest request ServletResponse response.FilterChain filterChain) 
throws ServletException.IOException { 

Tesponse.setCharacterEncoding("gb2312"); 

PrintWriter out = response. getWriter(); 

Cr wrapper = new Cr((HttpServletResponse)response); 

filterChain.doFilter(request, wrapper); 

String resstr = wrappertoStringO).trim0; 

String newStr = 

if (resStr indexOf(" 混蛋 "> 0) { 

newStr = resStrreplace(" 混 蛋 ","***"); 
} 
‘out.printIn(newStr); 
} 

} 


(3) 在 web.xml 文件 中 配置 过 滤器 ， 关 键 代码 如 下 : 
ns 
<filter-class>com.mr.CtFilter</filter-class> 
<filter-mapping> 
< 全 


ter-name>cr</filter-name> 
<url-pattern>/+</url-pattern> 
</filter-mapping> 


国 秘笈 心 法 
如 果 响 应 response 输出 的 内 容 为 字符 类 内 容 ， 则 调用 getWriter0 方 法 ， 如 果 为 二 进 制 内 容 或 图 像 数 据 等 ， 
就 需要 调用 getOutputStream() 方 法 ， 本 实例 只 覆盖 了 getWriter0 方 法 。 
买 例 184 
实例 1 实用 指数 : 会 食 


国 实例 说 明 


本 实例 将 介绍 如 何 实现 异常 捕获 过 滤器 。 运 行 本 实例 ， 单 击 异常 超 链 接 ， 会 弹出 相应 的 处 理 页 面 ， 运 行 结 
果 如 图 7.5 所 示 。 
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(a) (b) (c) 


7.5 运行 结果 
图 关键 技术 


本 实例 主要 是 在 过 滤器 Filter 的 doFilter0 方 法 中 对 执行 过 滤器 链 的 chain 的 doFilter0 语 句 处 添加 try…catch 
异常 捕获 语句 ， 然 后 在 catch 语句 中 循环 异常 对 象 ， 直 到 找 出 根 异 常 为 止 。 
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图 设计 过 程 


(1) 创建 Filter 实现 类 ExceptionFilterjava, 利用 throwable 抛 出 异常 去 捕捉 异常 原因 并 转 到 相应 的 页 面 中 ， 


主要 代码 如 下 : 
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public class ExceptionFilter implements Filter { 
public void destroyO { 


public void doFilter(ServletRequest request, ServletResponse response.FilterChain chain) throws IOException. ServletException { 
try{ 
chain.doFilter(request, response); 
} catch (Exception e) { /如 果 有 异常 则 捕捉 
Throwable rootCause = e; 
while (rootCause.getCause() ‘= null) { 
TootCause =rootCause.getCause(); 
| 


String errormessage = rootCause.getMessage(): 1/ 返回 此 异常 的 详细 消息 字符 串 
errormessage = errormessage 一 null ? "异常 : " + TootCause.getClass(O.getNi 
: errormessage; 1/ 中 止 传递 异常 的 原因 


Tequest.setAttribute("errormessage", errormessage); 

Tequest.setAttribute("e", e); 

if (rootCause instanceof LoginException) { // 转 到 登录 页 面 
Tequest.getRequestDispatcher("/LoginException.jsp").forward(request, response); 

} else if (rootCause instanceof OperationException) { 


// 转 到 操作 页 面 
Tequest.getRequestDispatcher("/OperationException.jsp").forward(request, response); 
}else{ 
Tequest.getRequestDispatcher("/exception.jsp").forward(request， ” // 其 他 异常 


Tesponse); 
} 


. 
public void init(FilterConfig arg0) throws ServletException { 
} 
} 

(2) 创建 LoginException.jsp 登录 异常 页 面 ， 主 要 代码 如 下 : 
<div align="center" style="font-size: large; "> 后 台 操 作 </div> 
<form action=""> 
<table align="center "> 

<t> 
<td> 账 号 </td> 
<td><input type= "text" name="account" /></td> 


<td> 密 码 </td> 
<td><input type="password” name="password" /></td> 


<tr> 
<td align="center” colspan="2"><input type="submit” value=” 和 登录“" 亡 
<input type="submit” value=" 记 1"/></td> 
</tr> 
</table> 
</form> 
<div class="error" align="center’> 
S${ errormessage } 
</div> 
(3) 创建 OperationException 操作 异常 页 面 ， 主 要 代码 如 下 : 
<div class="error" align="center"> 
${ errormessage } <a href=“avascript:history.go(-1); > 返回 上 一 级 操作 </a> 
</div> 
(4) 创建 Exceptionmain.jsp 页 面 ， 关 键 代码 如 下 : 
<% 
String action = request.getParameter("action"); 
if("OperationException".equals(action)){ 
throw new OperationException(" 此 操作 失败 "); 
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} 
else if("LoginException".equals(action)){ 
throw new LoginException(" 请 您 登录 后 再 进行 此 项 操作 . "); 


} 
else if("exception".equals(action)){ 
IntegerparseInt("null 空 传递 参数 "); 
3 
%> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title> 异 常 捕捉 过 滤器 </title> 
</head> 


<body> 

<table align="1eft" cellpadding="2" cellspacing="2"> 

<Tr><td><a href="${ pageContext.request.requestURI } ?action=OperationException "> 过 滤 操 作 </a></td></Tr> 
<tr><td><a href="${ pageContext.request.requestURI } ?action=LoginException”> 过 滤 登 录 </a></td></tr> 
<Tr><td><a href="${ pageContext.request.requestURI } ?action=exception"> 过 滤 异 常 </a></td></Tr> 

</table> 


图 秘笈 心 法 
Throwable 类 是 Java 语言 中 所 有 错误 或 异常 的 超 类 ， 只 有 当 对 象 是 此 类 的 实例 时 ， 才 能 通过 Java 虚拟 机 或 
者 Java throw 语句 抛 出 ， 类 似 的 只 有 此 类 或 其 子 类 之 一 才 可 以 是 catch 子 句 中 的 参数 类 型 。 


实例 185 


图 实例 说 明 

在 进行 用 户 的 首次 身份 认证 后 都 会 在 session 中 留 下 相应 的 用 户 对 
象 作为 标识 , 在 以 后 的 操作 中 , 只 需要 在 进行 身份 验证 的 页 面 或 Servlet 
中 查看 相应 的 session 即 可 。 最 有 效 的 验证 方法 就 是 通过 过 滤器 对 一 批 
页 面 或 Servlet 统一 进行 身份 验证 ， 这 样 在 设计 页 面 或 Servlet 时 就 不 需 
要 考虑 身份 验证 的 问题 ， 避免 出 现代 码 宛 余 等 问题 。 本 实例 将 介绍 如 何 
通过 过 滤器 来 进行 用 户 身份 验证 。 运行 本 实例 , 填写 用 户 名 和 密码 进行 _ = 
正常 登录 ， 则 可 以 登录 成 功 ， 当 用 户 没有 登录 时 ， 直 接 在 URL 地 址 栏 ”图 76 未 进行 登录 时 显示 提示 信息 
输入 loginsuccee.jsp 页 面 ， 则 会 弹出 提示 信息 ， 如 图 7.6 所 示 。 


图 关键 技术 


实现 本 实例 , 主要 是 判断 session 域 中 是 否 存 在 用 户 名 。 首先 , 用 户 在 登录 时 , 系统 会 将 用 户 名 保存 在 session 
i 在 Filter 过 滤器 的 doFilter0 方 法 中 , 会 判断 session 域 中 是 否 包 含 当 前 这 个 用 户 名 ,如 果 存 在 则 允许 登录 ; 
否则 会 弹出 提示 信息 ， 并 将 当前 的 请 求 地 址 转向 用 户 登 录 页 。 


图 设计 过 程 
(1) 创建 过 滤器 的 实现 类 FilterLogin java， | init(FilterConfig filterConfig) 方 法 ， 再 在 执行 体 中 判断 
Session 是 否 有 user 对 象 ， 如 果 没 有 则 输出 提示 语句 ， 否 则 继续 执行 ， 主 要 代码 如 下 : 


public class FilterLogin extends HttpServlet implements Filter { 
Private FilterConfig filterConfig: 
Public void init(FilterConfig filterConfig) throws ServletException { 
this.filterConfig = filterConfig: 
} 
Public void doFilter(ServietRequest request ServletResponse response FilterChain filterChain) 


HttpSession session=((HttpServletRequest)request).getSession(); 
response.setCharacterEncoding("gb2312"); “// 响 应 客户 端 类 型 
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if(session.getAttribute(“user")—null) { 1/ 判断 session 中 是 否 有 user 这 个 对 象 

PrintWiiter out-response.getWriter0: 。 // 创 建 一 个 输出 流 

/如 果 为 空 则 通过 Javascript 脚本 输出 提示 并 跳 转 到 indexjsp 页 面 

out.print("<script language=javascript>alert(' 您 还 没有 登录 !!! ):window-location .href~"../index.jsp':</script>"): 
Jelse{ 

filterChain.doFilter(request, response): /否则 继续 执行 
} 


F 
public void destroyO { 


} 
(2) 创建 loginresultjsp 页 面 ， 用 于 在 user 对 象 的 session 中 执行 跳 转 到 下 一 页 面 ， 代 码 如 下 : 
<% 


Tequest.setCharacterEncoding("gb2312"); 
String name=request.getParameter("name"); 

String .getParameter("password"): 
User user=new User(); 
user.setUsername(name); 
user.setPassword(password); 
session.setAttribute("user",user); 
Tesponse.sendRedirect("filter/loginsuccee.jsp"); 
%> 


(3) 创建 JavaBean 类 User， 存 放 登 录 名 称 与 密码 ， 并 设置 getter 与 setter 方法 。 


(4) 创建 用 户 登录 页 面 ， 关 键 代码 如 下 : 
<body><div align="center"> 使 用 过 滤器 身份 验证 
<form name="form" method="post" action="loginresultjsp" onSubmit="return checkEmptyO"> 
<table width="220” border="0" align="center"> 
<tr> 
<td > 用 户 名 : </td> 
<td ><input name= mame" type="text"></td> 
</tr> 
<tr> 
<td > 密 &nbsp;&nbsp: 码 : </td> 
<td><input name="password” type="password"></td> 
</tr> 
</table><br> 
<input type="submit” name="Submit” value=" 嫩 如 > 
<input type="submit”" value=" 施 从"/> 
</form> 
(5) 在 web.xml 文件 中 配置 如 下 : 
<filter> 
<filter-name>filterUser</filter-name> 
<filter-class>com.mr.filter.FilterLogin</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>filterUser</filter-name> 
<url-pattern>/filter/*</url-pattern> 
</filter-mapping> 


图 秘笈 心 法 
在 设置 需要 进行 身份 验证 的 页 面 时 ， 应 该 把 登录 页 面 排除 在 外 ; 否则， 如 果 登 录 页 面 无 法 通过 身份 验证 ， 
用 户 将 无 法 进行 登录 ， 所 有 进行 身份 验证 的 页 面 都 将 无 法 访问 。 
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图 实例 说 明 
初学 者 在 编写 Web 程序 时 ， 经 常 出 现 页 面 编码 混乱 的 问题 ， 也 就 是 中 文字 符 显示 成 乱码 。 这 类 问题 经 常 困 
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扰 初 学 者 ， 本 实例 使 用 Servlet 过 滤器 解决 编码 导致 的 页 面 乱码 问题 。 本 实例 使 用 GBK 编码 格式 ， 如 果 不 进行 
编码 转换 ， 将 在 页 面 中 输出 乱码 ;而 通过 过 滤器 自动 将 所 有 数据 都 转换 为 GBK 编码 就 不 会 出 现 乱 码 ， 如 图 7.7 
所 示 。 
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图 7.7 字符 编码 过 滤器 


图 关键 技术 

本 实例 主要 在 web.xml 中 配置 默认 的 字符 编码 ， 并 在 Filter 过 滤器 的 初始 化 init0 方 法 中 加 载 这 个 参数 ， 然 
后 在 执行 doFilter0 方 法 中 获取 这 个 编码 的 配置 参数 ， 将 它 设置 为 request 和 response 的 默认 编码 。 
图 设计 过 程 

(1) 创建 过 滤器 的 实现 类 Encoding.java, 用 于 处 理 页 面 的 字符 编码 格式 。 在 初始 化 方法 init0 中 ， 加 载 web. 
xml 配置 的 编码 方式 , 并 启用 enabled 编码 , 然后 在 doFilter0 方 法 中 设置 请 求 以 及 相应 的 编码 格式 , 关键 代码 如 下 : 


public class EncodingFilter implements Filter { 


Private String Encoding; /配置 web.xml 编码 
Private boolean enabled: // 是 否 启用 Filter 
public void init(FilterConfig config) throws ServletException { 


Encoding = config.getInitParameter("Encoding"); /| 编码 方式 
enabled = "true".equalsIgnoreCase(Encoding.trim())|| "1".equalsIgnoreCase(Encoding.trim()); 


} 
public void doFilter(ServletRequest request, ServletResponse response. 
FilterChain chain) throws IJOException. ServletException { 


if (enabled || Encoding !'= null) { 1/ 如果 启 用 了 此 Filter 
request setCharacterEncoding(Encoding): //request 的 编码 
response.setCharacterEncoding(Encoding); Jresponse 的 编码 
} 
chain.doFilter(request, response): /继续 执行 下 一 个 Filter 
} 
public void destroyO { 
Encoding = null: 
入 
(2) 在 webxml 中 配置 初始 化 编码 格式 ， 主 要 代码 如 下 : 
<filter> 


<filter-name>encodingFilter</filter-name> 
<filter-class>com.mr.encoding. EncodingFilter</filter-class> 
<init-param> 
<param-name>Encodi 
<param-value>UTF-8</param-value> 
init-param> 
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<param-value>true</param-value> 
</init-param> 
</filter> 
<filter-mapping> 
<filter-name>encodingFilter</filter-name> 
<url-pattem>/+</url-pattern> 
</filter-mapping> 
(3) 创建 Encodingjsp 页 面 ， 应 用 EL 表达 式 输出 编码 后 的 内 容 ， 关 键 代码 如 下 : 
<form action="${ param request.requestURL} “method-—‘post”> 
<table align="Ieft” bgcolor= "ghtbine” cellpadding="3" 
cellspacing="7" 


<tr><td> 


<textarea name="text” rows="8" cols="40">${ param text }</textarea> 
<ltd> 
<tr><td align="center" col =—"4~> 
<input type="submit" value=" 起 交 认 区"/> 
<tr><Td> 您 输入 的 是 :<br> 

<div><font size="6" >${ param text }</font></div></Td></tr> 
</table> 
</form> 

国 秘笈 心 法 


如 果 表 单 请 求 方式 为 GET, 还 需要 在 Tomeat 的 文件 夹 下 的 confyserver.xml 配置 文件 中 修改 URIEncoding 参 
数 ， 因 为 默认 的 编码 为 ISO-8859-1， 否 则 依然 会 出 现 乱 码 。 


初级 
实用 指数 : 食 食 


实例 187 


图 实例 说 明 
Servlet 过 滤器 可 以 对 用 户 提交 的 数据 或 服务 器 返回 的 数据 进行 更 改 。 任 何 到 达 服 务 器 的 请 求 都 会 首先 经 过 
过 滤器 的 处 理 。 本 实例 应 用 过 滤器 的 这 个 特点 编写 一 个 专门 用 于 流量 统计 的 过 滤器 ， 运 行 结果 如 图 7.8 所 示 。 
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图 关键 技术 

首先 ， 需 要 一 个 整 型 变量 来 记录 当前 的 流量 ， 它 需要 在 这 个 服务 器 中 一 直 存 在 ， 可 以 用 一 个 整 型 的 静态 私 
有 变量 来 存放 这 个 值 ， 它 的 初 值 为 0， 设置 代码 如 下 : 

private static int flux = 0: 

其 次 ， 在 每 次 有 用 户 访问 页 面 时 ， 必 须 对 统计 变量 进行 相应 的 修改 。 但 是 对 于 Web 系统 中 多 用 户 访问 的 系 
统 ， 修 改变 量 时 必须 考虑 到 同步 的 问题 ， 即 同一 时 间 只 能 有 一 个 用 户 修改 这 个 整 型 变量 ， 否 则 将 会 产生 共享 冲 
突 ， 引 起 统计 数据 的 不 准确 〈 得 到 的 值 比 实际 值 小 )。 


250 


第 7 章 ， 过 滤器 与 监听 器 技术 


在 Java 中 可 以 通过 关键 字 synchronized 来 解决 这 个 问题 。 被 synchronized 关键 字 修 饰 的 方法 在 执行 过 程 中 
不 会 中 断 ， 也 就 是 说 线程 一 旦 进入 synchronized 修饰 的 方法 ， 其 他 线程 就 不 会 被 阻塞 ， 直 到 当前 线程 执行 完 这 
个 方法 为 止 。 在 本 实例 中 就 可 以 使 用 关键 字 synchronized 来 解决 上 述 问题 。 

最 后 ， 把 统计 变量 放 入 request 中 ， 以 便 任何 页 面 都 可 以 随时 访问 到 网 站 当前 的 流量 值 ， 执 行 代码 如 下 : 

Tequest.setAttribute("flux",String.valueOf(flux)): 

图 设计 过 程 
(1) 创建 过 滤器 的 实现 类 FilterNum.java， 通过 Servlet 中 的 过 滤器 技术 统计 网 站 的 访问 量 ， 关键 代 码 如 下 : 


public class FilterNum extends HttpServlet implements Filter { 
private static int num = 0; /定义 全 局 变量 
Public void init(FilterConfig filterConfig) throws ServletException { 


} 
public synchronized void doFilter(ServletRequest request, ServletResponse response,FilterChain filterChain) 


throwsServletException, IOException { 
this.numt+; /1/ 自 增长 
Tequest.setAttribute("num",String.valueOf num)):; 
filterChain.doFilter(request, response); 
} 
public void destroyO { 
} 
} 
(2) 创建 index.jsp 页 面 ， 主 要 代码 如 下 : 
<table width="300" height="100" border="0" cellpadding="0" cellspacing="0" > 
<tr align="center" bgcolor="lightblue"><Td> 目 前 在 线 访问 流量 是 : </Td></tr> 
<tr align="center”> 
<td><%=request.getAttribute("num")%> 人 访问 过 </td> 
</tr> 
</table> 
(3) 在 web.xml 中 配置 FilterNum 过 滤器 ， 关 键 代 码 如 下 : 
<filter> 


<filter-name>filterNum</filter-name> 
<filter-class>com.mr.filter.FilterNum</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>filterNum</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 


国 秘笈 心 法 
为 了 避免 多 个 用 户 并 发 访问 而 导致 数据 的 不 准确 ， 可 以 使 用 synchronized 关键 字 修 饰 方法 。 
初级 
实用 指数 : 直 丰 


图 实例 说 明 


正 缓存 虽然 能 够 提高 已 存储 网 站 的 访问 速度 , 但 是 过 度 的 正 缓存 会 影响 浏览 器 的 响应 速度 。 同 时 还 可 能 为 
网 站 的 运行 带 来 一 些 不 必要 的 麻烦 。 例 如 ， 可 能 会 因为 浏览 器 缓存 的 应 用 ， 而 导致 Web 服务 器 不 能 准确 地 计算 
-个 页 面 或 广告 被 阅览 的 次 数 ， 在 论坛 或 者 网 上 商城 系统 中 由 于 浏览 器 缓存 的 使 用 ， 导 致 更 新 的 图 片 信息 不 能 
得 到 及 时 的 显示 。 这 些 都 是 浏览 器 缓存 带 来 的 负面 影响 。 本 实例 主要 介绍 浏览 网 页 时 不 自动 缓存 ， 这 样 下 次 访 
问 能 及 时 更 新 图 片 或 者 相关 信息 ， 和 运行 结 果 如 图 7.9 所 示 。 
图 关键 技术 


本 实例 主要 应 用 过 滤器 (Filter) 防止 页 面 缓存 。 关键 是 应 用 javax.servlet Filter 接口 中 提供 的 doFilter0 方 法 。 
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在 doFilter0 方 法 中 设置 HTML 中 meta 标签 的 http-equiv 属性 ， 实 现 禁止 浏览 器 缓存 的 功能 。 
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图 7.9 缓存 文件 夹 为 空 


(1) 设置 http-equiv 属性 的 参数 expires， 控 制 网 页 的 过 期 时 间 。 
(2) 设置 http-equiv 属性 的 参数 Pragma， 禁 止 浏 览 器 从 本 地 计算 机 的 缓存 中 访问 页 面 内 容 。 
(3) 设置 HTTP 消息 头 中 的 Cache-control 参数 ， 控 制 页 面 的 缓存 。Cache-control 的 常见 值 有 private、no- 
cache、max-age 和 must-revalidate 等 ， 默 认 值 为 private。 
Cache-control 的 作用 根据 浏览 方法 的 不 同 可 以 分 为 以 下 几 种 情况 : 
(1) 以 打开 新 窗口 的 方式 进行 浏览 
如 果 指 定 Cache-control 的 值 为 private、no-cache 或 者 must-revalidate， 那么 打开 新 窗口 访问 时 就 会 重新 访问 
服务 器 ; 如 果 指 定 的 值 为 max-age， 那 么 在 此 值 规定 的 时 间 中 就 不 会 重新 访问 服务 器 ， 如 Cache-control: 
max-age=10 表示 当 访 问 此 网 页 后 的 10 秒 内 不 会 再 次 访问 服务 器 。 
(2) 在 地 址 栏 中 按 Enter 键 进行 浏览 
如 果 值 为 private 或 must-revalidate, 则 只 有 第 一 次 访问 时 会 访问 服务 器 , 以 后 就 不 再 访问 ;如 果 值 为 no-cache， 
那么 每 次 都 会 访问 ;如 果 值 为 max-age， 则 在 过 期 之 前 不 会 重复 访问 。 
(3) 按 后 退 键 进行 浏览 
如 果 值 为 private、must-revalidate 或 max-age， 则 不 会 重复 访问 ; 如 果 值 为 n0-cache， 则 每 次 都 重复 访问 。 
(4) 按 刷新 键 
无 论 为 何 值 ， 都 会 重复 访问 。 如 果 指 定 Cache-control 值 为 no-cache 时 ， 访 问 此 页 面 不 会 在 ntemet 临时 文 
件 夹 中 留 下 页 面 备份 。 


图 设计 过 程 
(1) 创建 过 滤器 的 实现 类 NoCacheFilterjava, 设 置 HTTP 信 息 头 禁 止 浏 览 器 从 缓存 中 读 取 页 面 .在 doFilter0 
方法 中 通过 设置 响应 头 信息 防止 页 面 缓存 ， 关 键 代码 如 下 : 


public class NoCacheFilter implements Filter { 
public void doFilter(ServletRequest request, ServletResponse response. FilterChain filterchain) throws IOException, ServletException { 
WHTTP 消息 头 控制 网 页 的 缓存 
((HttpServletResponse) response).setHeader("Cache-Control"."no-cache"): 
/禁止 浏览 器 从 本 机 的 缓存 中 读 取 页 面 
((HttpServletResponse)response).setHeader("Pragma"."no-cache”): 
((HttpServletResponse) response).setHeader("Expires". "-1"); 。“ // 缓 存 中 的 有 效 期 
filterchain.doFilter(request, response): 


} 
public void destroyO { 
} 
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(2) 在 web.xml 中 配置 NoCacheFilterjava 过 滤器 ， 关 键 代码 如 下 : 
<filter> 

<filter-name>BrowserNoCacheFilter</filter-npame> 

<filterclass>commrnocache NoCacheFilter</filter-class> 

<init-param> 
<param-name>Ca 
<param-value>no-cac] 

</initparam> 

<init-param> 
<param-name>Pragma</param-name> 
<param-value>no-cache</param-value> 

/init-param> 

<initparam> 


<url-pattern>/*</url-pattern> 

<dispatcher>REQUEST</dispatcher> 

<dispatcher>FORWARD</dispatcher> 
</filter-mapping> 


多 提示 : Session-timeout 为 缓存 有 效 期 30 秒 。 
图 秘笈 心 法 
缓存 文件 夹 的 打开 方式 是 ， 选 择 正 浏览 器 ， 单 击 鼠 标 右键 ， 并 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ， 弹 


出 mntemet 属性 对 话 框 ， 选 择 “常规 ”选项 卡 ， 在 Internet 监 时 文件 中 单 击 “ 设 置 ”按钮 ， 在 弹出 的 设置 对 话 框 
中 单 击 “ 查 看 文件 ”按钮 ， 将 看 到 浏览 器 缓存 中 存储 的 文件 ， 而 此 时 该 文件 夹 下 没有 任何 文件 。 


图 实例 说 明 

在 开发 程序 的 过 程 中 ， 很 多 程序 员 都 实现 过 在 打开 的 页 面 中 弹出 一 个 对 话 框 的 功能 ， 通 过 该 对 话 框 来 输出 
- 些 广告 或 者 公告 信息 。 如 果 想 将 这 个 功能 应 用 到 多 个 页 面 中 ， 就 需要 在 多 个 页 面 中 添加 调用 弹出 对 话 框 功能 
的 代码 来 完成 ， 这 样 做 虽然 能 够 实现 此 功能 ， 但 是 却 增加 了 代码 的 元 余 。 

本 实例 将 介绍 一 种 不 必 在 多 个 页 面 中 编写 代码 而 实现 弹出 对 话 框 的 方法 ， 即 通过 过 滤器 来 控制 页 面 输出 的 
内 容 ， 进 而 实现 在 每 个 响应 的 页 面 中 都 弹出 一 个 对 话 框 的 功能 。 运 行 本 实例 ， 单 击 页 面 中 的 任何 超 链接 ， 都 会 
弹出 一 个 新 的 对 话 框 ， 如 图 7.10 所 示 。 


图 关键 技术 

本 实例 的 关键 在 于 在 完成 过 滤 任 务 时 ， 将 请 求 的 对 象 返回 到 自 定义 的 应 答对 象 中 ， 通 过 自 定义 应 答对 象 对 
请 求 的 数据 进行 编译 ， 编 译 完成 后 通过 自 定义 的 方法 返回 响应 数据 ， 并 通过 replace0 方 法 向 响应 的 数据 中 添加 
调用 弹出 对 话 框 的 代码 。 完 成 通过 过 滤器 控制 页 面 输出 的 操作 。 

replace0 方 法 的 语法 结构 如 下 : 


public String replace(char oldChar char newChar) 


将 该 方法 中 的 newChar 蔡 换 指定 字符 串 中 出 现 的 所 有 oldChar， 返 回 一 个 新 的 字符 串 。 
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参数 说 明 
@ oldChar: 要 蔡 换 的 子 字符 串 或 者 字符 。 
@ newChar: 新 的 字符 串 或 字符 ， 用 于 蔡 换 原 有 字符 串 的 内 容 。 


ms] tf 好 


要 们 的 目标 是 写 中 国 最 好 的 图 节 
ET 


7.10 转换 后 的 效果 
图 设计 过 程 
(1) 创建 OutputStream.java 文件 并 且 继承 ServletOutputStream 类 ， 蔡 换 父 类 的 输出 流 ， 关 键 代码 如 下 : 


ByteArrayOutputStream stream:; /1/ 创 建 字 节 数组 输出 流 
public OutputStream(ByteArrayOutputStream stream) { 
this.stream = stream; /构造 方法 初始 化 输出 流 


public void write(int b throws IOException { 
stream. write(b): // 使 用 此 类 的 输出 流 普 换 父 类 的 输出 方法 
} 
} 
(2) 创建 ResponseWrapper.java 文件 并 且 继 承 HttpServletResponseWrapper， 使 响应 对 象 进行 重新 编译 并 返 
回响 应 的 数据 ， 关 键 代 码 如 下 : 
public class ResponseWrapper 3 HttpServletResponseWrapper { 


Private OutputStream stream: /声明 一 个 输出 流 
private ByteArrayOutputStream byteStream:; /声明 字 节 数组 输出 流 
Private PrintWiiter pw: /声明 打印 输出 流 
public ResponseWrapper(HttpServletResponse response) { 

super(response):; 

byteStream = new ByteArrayOutputStream0: // 数 据 流 初始 化 


[OException { 
return stream: // 返 回 字 节 输出 流 并 重 写 父 类 方法 


public PrintWriter getWriter() throws IOException { 
Teturn pw; // 返 回 打印 输出 流 重 写 父 类 方法 
} 
Ppublic String getContentO throws UnsupportedEncodingException { 
return byteStream.toStringO): /返回 响应 数据 
} 


了 
(3) 创建 过 滤器 的 实现 类 OutFilterjava， 在 doFilter0 方 法 中 完成 对 过 滤器 的 操作 ， 并 用 getContent0 获 取 
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到 响应 的 数据 ， 用 replace0 方 法 将 弹出 对 话 框 的 代码 层 加 到 response 响应 的 数据 中 去 ， 关 键 代码 如 下 : 


public class OutFilter implements Filter { 


Private boolean variable=true: // 如 果 variable 为 真 ， 每 次 都 生成 HTML 首页 


Private FilterConfig filterConfig = null; 


public void init(FilterConfig filterConfig) { 
this.filterConfig = filterConfig: 


} 
public void doFilter(ServletRequest request, ServletResponse response. 
FilterChain chain) 
throws IOException, ServletException { 
HttpServletResponse httpResp = (HttpServletResponse) response; 


ResponseWrapper response Wrapper = new ResponseWrapper(httpResp); 
chain.doFilter(request, responseWrapper); 。 // 过 滤器 的 操作 


PrintWriter out = response.getWriter(); // 创 建 输出 流 
responseWrapper.get Writer() .flhushO: /获取 输出 流 并 强制 刷新 
String str=responseWrapper getContentO: 

String 


stres="</head><script>window.open('message.htm',","width="+300+".height="+180+",top="+"+window:.screen.width-300+"+",left="+"+window.screen.heigh 


t+180+");</script>"; 
out.printin(str replace("</head>",stres)); 


} 
public void destroyO { 


} 

public void log(String msg) { 
filterConfig.getServletContext(.log(msg); 

; 


} 
(4) 在 web.xml 中 配置 过 滤器 ， 关 键 代码 如 下 : 
<filter> 
<filter-name>CharacterEncodingFilter</filter-name> 
<filter-class>com.mr.filter.CharacterEncodingFilter</filter-class> 
<init-param> 
<param-name>encoding</param-name> 
<param-value>GBK</param-value> 
/init-param> 
</filter> 
<filter> 
<filter-name>outFilter</filter-name> 
‘<filter-class>com.mr.filter.OutFilter</filter-class> 
</filter> 
<filter-mapping> 
<filter-name>CharacterEncodingFilter</filter-name> 
<url-patterm>/*</url-pattern> 
<dispatcher>REQUEST</dispatcher> 
<dispatcher>FORWARD</dispatcher> 
</filter-mapping> 
<filter-mapping> 
<filter-name>outFilter</filter-name> 
<url-pattern>/index.jsp</url-pattern> 
<dispatcher>REQUEST</dispatcher> 
<dispatcher>FORWARD</dispatcher> 
</filter-mapping> 
<filter-mapping> 
<filter-name>outFilter</filter-name> 
<url-pattern>/indexsure.jsp</url-pattern> 
<dispatcher>REQUEST</dispatcher> 
<dispatcher>FORWARD</dispatcher> 
</filter-mapping> 


国 秘笈 心 法 


在 开发 Web 工程 时 ， 网 页 中 弹出 一 个 对 话 框 是 很 常见 的 ， 如 果 想 在 多 个 页 面 中 添加 此 功能 ， 则 每 个 页 面 都 


添加 对 话 框 功能 的 代码 会 带 来 大 量 代 码 的 元 余 ， 本 实例 正 是 解决 此 办 法 之 一 。 
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国 实例 说 明 


在 开发 程序 的 过 程 中 ， 创 建 的 几乎 都 是 动态 页 面 ， 因 为 在 每 个 页 面 中 都 要 使 用 或 者 传递 一 些 数据 ， 所 以 在 
浏览 网 页 时 速度 就 不 是 很 理想 ， 总 是 因为 数据 的 处 理 而 影响 网 页 打开 的 速度 。 然 而 ， 如 果 都 是 静态 网 页 ， 网 页 
的 打开 速度 就 不 会 受到 影响 ， 同 样 还 可 以 更 改 网 页 文件 的 后 级 名 ， 从 而 隐藏 程序 开发 使 用 的 语言 。 本 实例 将 介 
绍 一 种 生成 静态 网 页 的 方法 ， 即 通过 过 滤器 将 动态 页 面 生成 静态 页 ， 运 行 结果 如 图 7.11 所 示 。 
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图 7.11 自动 生成 静态 页 面 


图 关键 技术 

通过 过 滤器 生成 静态 页 面 主要 应 用 过 滤器 接受 请 求 ， 然 后 通过 自 定义 的 响应 对 象 对 请 求 的 数据 进行 处 理 ， 
生成 一 个 静态 页 面 ， 最 后 将 经 过 处 理 的 响应 数据 返回 到 客户 端 。 

首先 实现 Filter 接口 ， 然 后 定义 doFilter0 方 法 ， 在 该 方法 中 获取 到 请 求 的 数据 ， 应 用 自 定义 的 响应 对 象 
ResponseWrapper 对 请 求 数据 进行 过 滤 ， 过 滤 业 务 完成 后 生成 静态 页 面 。 
图 设计 过 程 

(1) 创建 OutputStream 类 ， 在 构造 方法 中 初始 化 输出 流 ， 定 义 writer0 方 法 并 替换 父 类 的 输出 方法 ， 关 键 


ByteArrayOutputStream ostream: // 创 建 字 节 数组 输出 流 
this.ostream = ostream:; // 在 构造 方法 中 初始 化 输出 流 


public void write(int b) throws IOException { 
ostream write(b); /使 用 此 类 输出 流 普 换 父 类 的 输出 方法 
} 


} 
(2) 创建 ResponseWrapper 类 文件 ， 该 类 继承 HttpServletResponseWrapper 类 ， 使 用 它 对 请 求 的 数据 进行 


处 理 ， 关 键 代码 如 下 : 
public class ResponseWrapper extends HttpServletResponseWrapper { 
Private OutputStream ostream:; // 自 定义 输出 流 


@ 
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Private ByteArrayOutputStream byteStream:; 

Private PrintWiiter pw: 

public ResponseWrapper(HttpServletResponse response) { 
super(response); 
byteStream = new ByteArrayOutputStream(); 
ostream = new OutputStream(byteStream); 
pw = new PrintWriter(byteStream); 

} 
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// 字 节 数 组 输出 流 
// 打 印 输出 流 


/数据 流 初始 化 


public ServletOutputStream getOutputStream() throws IOException { 


return ostream:; 

} 

public PrintWriter getWriter() throws IOException { 
return pw; 

} 


// 返 回 字 节 输出 流 并 重 写 父 类 方法 


/返回 打印 输出 流 重 写 分 类 方法 


public String getContentO throws UnsupportedEncodingException { 


return byteStream toStringO: 
} 
} 


// 自 定义 方法 返回 响应 的 数据 


(3) 创建 过 滤器 的 实现 类 StaticHtmlFilter， 将 定义 的 对 象 为 响应 对 象 来 完成 过 滤 操 作 ， 在 定义 的 响应 对 象 


Ppublic class StaticHtmlFilter implements Filter { 
Pprivate boolean variable = true; 
String strs =""; 
Private FilterConfig filterConfig = null; 
public void init(FilterConfig filterConfig) { 
this.filterConfig = filterConfig; 
} 


中 获取 请 求 的 数据 ， 并 对 其 进行 修改 生成 静态 页 面 ， 最 后 将 修改 后 的 响应 返回 到 客户 端 ， 关键 代 码 如 下 : 


// 定 义 一 个 变量 variable 时 ， 每 次 都 生成 HTML 首页 


Ppublic void doFilter(ServletRequest request, ServletResponse response.FilterChain chain) 


throws IOException, ServletException { 


HttpServletResponse httpRes = (HttpServletResponse) response; 
String path = ((HttpServletRequest) request).getServletPath(); 


strs = path.substring(1); 


ResponseWrapper response Wrapper = new ResponseWrapper(httpRes): 


chain.doFilter(request, response Wrapper): 
responseWrapper.get Writer().flush(); 
int len = strs.length(); 
String str = strs.substring(0, len - 4) + ".html"; 
String jspPath = request.getRealPath(str); 
File jspFile = new File(jspPath); 
String static_path = jspFile.getParent( + "\"; 
File htmlFile = new File(static_path., str); 
Date htmlDate = noll: 
Date now = new DateO: 
证 (htmlFile existsO) { 

htmlDate = new Date(htmlFile.lastModifiedO): 
}else { 

htmlFile.createNewFileO; 


/获取 文件 名 
/创建 定义 的 应 答对 象 
/完成 过 滤 的 操作 


/获取 文件 名 长 度 
/定义 静态 页 文件 的 名 称 
/获取 文件 的 真实 存储 路 径 
// 创 建 页 面 文件 对 象 

/定义 静态 页 文件 存储 的 位 置 
1/ 创建 静态 页 文件 对 象 


L 
1/ 如果 已 生成 的 HTML 文件 不 是 当前 的 ， 就 重新 生成 一 个 
if (variable | htmlDate — null || htmlDate.getDateO != now:getDateO) { 


} 


System.out.printin("/"+str+™"): 


FileOutputStream fileStream = new FileOutputStream(htmlFile); 
DataOutputStream fout = new DataOutputStream(fileStream); 


/创建 HTML 文件 的 输出 流 
// 创 建 数据 输出 流 


DateFormat dateFormat = DateFormat.getDateTimeInstance(FULL, FULL);// 创 建 日 期 格式 器 


fout writeChars(" "); 


fout writeUTF(" 生 成 时 间 : "+ dateFormat.format(new DateO)): 


fout.writeUTF(responseWrappergetContentO): 
foutclose0: 


request.getRequestDispatcher("/"+str+"") forward(request.response); 


} 
public void destroyO { 


} 


Ppublic void log(String msg) { 


// 输 出 一 个 空 字符 
/使 用 UTF 格式 输出 注释 信息 , 标注 HTML 文档 生成 事件 
/使 用 UTF 格式 输出 HTML 内 容 ， 保 存 到 HIML 文件 中 


// 如 果 当天 已 经 生成 过 HTML 文件 ， 直 接 把 请 求 转发 给 HTML 文件 
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filterConfig. getServietContext|.log(msg); 


} 
} 


图 秘笈 心 法 


本 实例 使 用 的 ResponseWrapper 对 象 是 自 定义 Java 类 文件 ， 用 于 对 请 求 的 数据 流 进行 处 理 ， 其 中 还 应 用 了 
自 定义 的 OutputStreamjava 类 对 父 类 的 输出 方法 进行 替换 。 
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力 实例 说 明 
本 实例 主要 把 上 传 的 文件 保存 到 系统 文件 夹 中 , 然后 通过 自 定义 的 request 传 入 Filter, 再 使 用 getAttributeO 
方法 直接 获取 上 传 的 文件 ， 运 行 效 果 如 图 7.12 所 示 。 
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图 7.12 上 传 结 果 


图 关键 技术 


实现 本 实例 时 ， 在 上 传 文件 时 需要 把 <form> 标 签 的 enctype 属性 设置 为 multipart/form-data， 然 后 创建 一 个 
继承 自 HttpServletRequestWrapper 类 的 自 定义 请 求 ， 在 该 自 定义 请 求 中 ， 转 换 由 过 滤器 的 doFilter0 方 法 传递 过 
来 的 原始 请 求 ， 然 后 在 这 个 自 定义 的 请 求 中 应 用 Apache 的 文件 上 传 组 件 对 原始 请 求 进行 解析 ,判断 是 否 为 上 传 
文件 的 请 求 ， 如 果 是 文件 则 保存 到 服务 器 的 指定 目录 ， 并 将 解析 出 的 上 传 文件 对 象 保存 到 Map 中 。 


国 设计 过 程 


(1) 创建 实现 类 UploadFilterjava， 自 定义 一 个 request 处 理 文件 上 传 ， 主 要 代码 如 下 : 
public class UploadFilter implements Filter { 
Public void destroyO { 


} 
public void doFilter(ServletRequest request, Servi 
FilterChain chain) throws IOException, Serv] ion { 
// 自 定义 上 传 的 类 型 
UploadRw uploadRequest = new UploadRw( 
(HttpServletRequest) request); 


过 滤器 与 监听 器 技术 
chain.doFilter(uploadRequest. response): 1/ 继续 执行 下 一 个 Filter 
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} 
Public void init(FilterConfig filterConfig) throws ServletException { 
} 
} 


(2) 创建 UploadRw.java 类 文件 来 处 理 文件 读 取 以 及 通过 apache 工具 来 解析 文件 ， 然 后 通过 map 取 值 输 
出 到 文件 中 去 ， 主 要 代码 如 下 : 


public class UploadRw extends HttpServletRequestWrapper { 


Private static final String MULTIPART_ HEADER = "Content-type": /文件 类 型 
Pprivate boolean multipart; /确认 上 传 文件 
/保存 提交 的 数据 


Pprivate Map<String, Object> param = new HashMap<String, Object>0: 
@SuppressWarnings("all") 
Ppublic UploadRw(HttpServletRequest request) { 


super(request); 
1/ 判断 是 否 为 上 传 文件 
multipart = request.getHeader(MULTIPART_HEADER)!= null 
&& request.getHeader(MULTIPART HEADER).startsWith( 
"multipart/form-data"); 
if (multipart){ 
try{ 
/使 用 apache 自 带 的 工具 解析 
DiskFileUpload upload = new DiskFileUpload0; 
upload.setHeaderEncoding("utf8"); 
/获得 所 有 的 文本 域 与 文件 域 
List<FileItem> fileItems = upload.parseRequest(request); 
for (Iterator<FileItem> it = fileItems.iterator(; 让 hasNextO:) { 
/使 用 遍历 
FileItem item = it.nextO; 
这 (item.isFormFieldO) { 
1/ 如 果 是 文本 域 直接 放 到 Map 中 
param.put(item.getFieldName(), item.getString("utf8")); 
}else{ 
// 否 则 为 文件 先 获取 文件 名 称 
String filename = item. getName( replace(™\" 
// 普 换 特 殊 字符 或 字符 串 
filename = filename.substring(filename.lastIndexOf("/") + 1); 
/保存 到 系统 监 时 文件 夹 中 
File file = new File(System.getProperty("java.io.tmpdir”), filename): 
/保存 文件 内 容 
OutputStream ous = new FileOutputStream(file); 
ous.write(item. getO); 
ous.closeO: 
/1/ 放 入 map 中 
param.put(item.getFieldName(). file): 
} 
} 
} catch (Exception e) { 
e.printStack Trace(): 
} 
} 
public Object getAttribute(String name) { 
1/ 如果 是 上 传 文件 就 到 map 中 取 值 
if (multipart &é& param.containsKey(name)) { 
return param.get(name); 
} 
return super.getAttribute(name); 


(3) 创建 upload.jsp 页 面 ， 主 要 代码 如 下 : 


<div align="center"> 
信息 头 是 = ${ header['Content-type] } 
</div> 
<br 亡 
<form action="" method="Ppostr enctype="multipart/form-data"> 
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<table align="center”" cellpadding="0" cellspacing="0" background="images/upload jpg” height="400" width="500"> 
<tr height="50" align="center”> 
<td width="250> 
<input type="file” name="file1" border="2" value=" 济 菠 "> 
<ltd> 


<% 
File filel = (File) request.getAttribute("file1"): 
if (filel ‘= nul) 

out.printin("<br/> 文 件 : "+ filel +", <br> 大 小 字 节 : "+ filel.length0); 
%> 
A> 
<Tr align="center" height="50"> 

<td width="250> 

<input type="submit”" value=”_ 人 上 人 夏 净 碎 ~ 
<ltd> 


<m> 

<Trheight="200 心 

<td>&nbsp:</td> 
AT> 
</table> 

/form> 

< 注意 : 本 实例 中 自 定义 了 request 方 法， 需要 添加 apache 的 common-fileuploadin.jar 的 架 包 (在 本 实例 Web 
工程 包 的 WebRoot\web-INF\lib 目录 下 可 以 找到 )。 


图 秘笈 心 法 


本 实例 为 简单 起 见 ， 自 定义 的 request 并 没有 覆盖 getParameterNames 等 方法 ， 也 没有 处 理 多 选 框 提交 相同 
数据 的 情况 。 


实例 192 


图 实例 说 明 


本 实例 实现 对 session 的 校 验 ， 如 果 没 有 相对 应 的 处 理 就 抛 出 一 个 LoginException 异常 。 本 实例 添加 一 个 
URI 与 权限 role 角色 检查 ， 这 个 配置 文件 存放 在 properties 配置 文件 中 ， 和 运行 结果 如 图 7.13 所 示 。 
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图 7.13 左 为 允许 访问 ( 右 为 无 权限 访问 ) 

图 关键 技术 
本 实例 主要 用 到 properties 配置 文件 来 保存 所 有 的 权限 ， 然 后 应 用 Properties 类 来 操作 properties 文件 。 
Properties 类 表示 了 一 个 持久 的 属性 集 。 配置 文件 properties 可 保存 在 流 中 或 从 流 中 加 载 。 属 性 列表 中 每 个 键 及 
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其 对 应 值 都 是 一 个 字符 串 ， 在 设置 访问 路 径 时 用 到 RequestURI 方法 获取 路 径 ， 再 获取 相应 的 参数 ， 本 实例 为 
action， 这 两 个 组 合 在 一 起 形成 一 个 新 的 URI。 
图 设计 过 程 

(1) 创建 过 滤器 的 实现 类 PriorityFilterjava， 在 该 类 中 创建 一 个 Properties 对 象 ， 使 它 可 以 保存 在 流 中 或 从 
流 中 加 载 ， 作 用 是 保存 所 有 的 权限 ， 并 在 初始 化 方法 中 获取 这 个 权限 文件 的 位 置 与 配置 ， 在 doFilter0 中 设置 访 
问 的 路 径 与 后 级 的 参数 ， 并 组 成 一 个 新 的 URI， 主 要 代码 如 下 : 


public class PriorityFilter implements Filter { 
Private Properties pts = new Properties(); 
public void init(FilterConfig config) throws ServletException { 
/从 初始 化 参数 中 获取 权限 配置 文件 的 位 置 
String file = config.getInitParameter("file"): 
String realPath = config.getServletContextO.getRealPath(file); 
by{ 
pts.load(new FileInputStream(realPath)); 
} catch (Exception e) { 
config.getServletContext0.log(" 读 取 权限 文件 错误 ", 6); 
} 


8 
public void doFilter(ServletRequest req, ServletResponse res, 

FilterChain chain) throws IOException, ServletException { 
HttpServletRequest request = (HttpServletRequest) req; 
/获取 访问 的 路 径 
String requestURI = request.getRequestURIO replace(request.getContextPath() + "/", ""); 
/获取 action 的 参数 
String action = req.getParameter("action"); 
action = action 一 null ? "" : action; 
/组 合成 新 的 URI 
String uri = requestURI + "?action=" + action; 
/在 session 中 获取 用 户 权限 
String role = (String) request.getSession(true).getAttribute("role"): 
Tole =role — null ? "guest" : role; 
boolean authentificated = false; 
/审核 用 户 是 否 有 权限 登录 访问 
for (Object obj : ptskeySetO) { 

String key = ((String) obj); 

/使 用 正则 表达 式 验证 ， 需 要 将 ? 蔡 换 ， 并 通过 通配符 * 处 理 

if (uri.matches(key.replace("?", "\?") .replace(".", "\.").replace(™*", ".+"))) { 

1/ 如果 role 角色 匹配 
if (role.equals(pts.get(key))) { 
authentificated = true: 
break: 


1 


} 
if (!authentificated) { 
throw new RuntimeException(new LoginException(" 您 无 权 访 问 该 页 面 。 请 以 合适 的 身份 登录 后 查看 。")); 


} 
/下 一 个 过 滤器 或 者 Servlet 
chain.doFilter(req, res); 


Ppublic void destroyO { 
pts= null: 

} 

¥ 


(2) 创建 priorityproperties 配置 文件 ， 如 果 只 有 key-value 属性 值 ， 其 中 key 键 为 访问 的 地 址 ，value 为 控 
制 访问 的 权限 名 称 ， 主 要 代码 如 下 : 


# Privilege Settings 


admin.do?action\=*=administrators 
login.do?action\—*=administrators 
method.do?action\=add=system 
method.do?action\—delete= system 
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method.do?action\=save = system 
method.do?action\—view = guest 
method.do?action\=list = guest 


(3) 配置 web.xml 文件 ， 其 中 捕捉 异常 要 用 到 上 个 异常 过 滤器 的 范例 ， 这 样 拿 过 来 直接 调用 即 可 ， 主 要 代 
码 如 下 : 


<display-name>filter</display-name> 

<servlet> 
<servlet-name>dispatcherServlet</servlet-name> 
<jsp-file>/outputjsp</jsp-file> 

</servlet> 

<servlet-mapping> 
<servlet-name>dispatcherServlet</servlet-name> 


<filter-name>exceptionFilter</filter-name> 
<filter-class> 
com.mr.filter. ExceptionFilter 
</filter-class> 
</filter> 
<filter> 
<filter-name>priorityFilter</filter-name> 
<filter-class> 
com.mr.filter.PriorityFilter 
</filter-class> 
<init-param> 
<param-name>file</param-name> 
<param-value>/WEB-INF/priority.properties</param-value> 
</init-param> 
</filter> 
<filter-mapping> 
<filter-name>exceptionFilter</filter-name> 
<url-pattern>/*</url-pattern> 
</filter-mapping> 
<filter-mapping> 
<filter-name>priorityFilter</filter-name> 
<url-pattem>+.do</url-pattern> 
/filter-mapping> 


图 秘笈 心 法 

正则 表达 式 是 一 个 描述 字符 模式 的 对 象 ， 在 Web 开发 中 正则 表达 式 应 用 相当 广泛 ， 使 用 正则 表达 式 可 以 检 
查 一 个 字符 串 中 是 否 含有 指定 的 子 字符 串 、 蔡 换 匹 配 的 子 字符 串 为 指定 的 内 容 或 者 从 某 个 字符 串 中 取出 符合 条 
件 的 子 字符 串 等 。 


7.2 监听 器 的 应 用 


Servlet 规范 的 另 一 个 高 级 特性 就 是 监听 器 , 用 于 监听 Java Web 程序 并 触发 相应 的 事件 。 监听 器 也 是 Servlet 2.3 
规范 中 加 入 的 ， 事 件 发 生 时 会 自动 触发 对 应 的 Listener。 主 要 用 于 监听 的 对 象 有 session、request、context 等 
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图 实例 说 明 
监听 器 的 作用 是 监听 Web 容器 的 有 效 事件 ， 它 由 Servlet 容器 管理 ， 应 用 Listener 接口 监听 某 个 执行 程序 ， 
并 根据 该 程序 的 需求 做 出 适当 的 响应 。 本 实例 将 通过 监听 器 查看 用 户 的 在 线 情况 , 实例 运行 效果 如 图 7.14 所 示 。 
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息 此 听 林 各 汪 用 户 -Windows Internet Explorer x] 
P = 
用 户 在 线 列表 
无 请 忆 本 好 在 结 
返回 
@ Intermnet | 保 六 楼 开拍 用 鸽 - 所 100% ~ 
图 7.14 在 线 用户 


图 关键 技术 


本 实例 中 应 用 HttpBindingListener 监听 接口 ， 它 监听 HTTP 会 话 中 对 象 的 绑 定 信息 。 它 是 唯一 不 需要 在 
web.xml 中 设 定 的 监听 。HttpBindingListener 接口 提供 以 下 两 个 方法 。 

口 “valueBound(HttpSessionBindingEvent arg0): 当 有 对 象 加 入 session 的 范围 时 会 被 自动 调用 。 

口 “valueUnbound(HttpSessionBindingEvent arg0): 当 有 对 象 从 session 的 范围 内 移 除 时 会 被 自动 调用 。 


图 设计 过 程 
(1) 创建 LoginListjava 类 来 存放 用 户 和 在 线 用 户 的 具体 操作 ， 主 要 代码 如 下 : 


public class LoginList { 
private static LoginList user = new LoginListO: 
Private Vector vector = null; 


public LoginListO { 
this.vector = new VectorO; 


} 
public static LoginList getInstanceO { 
return user; 
} 
public boolean addLoginList(String user) { 1/ 用户 登录 
if (user ‘= nulD) { 
this.vector.add(user); 
return true; 
} else{ 
return false: 
Ul 
public Vector getListO { /获取 用 户 列表 
return Vector 
} 
public void removeLoginList(String user) { /删除 用 户 


证 (user ‘= nulD) { 
vector.removeElement(user): 
} 
} 


(2) 创建 LoginNote.java 类 ， 实 现 HttpSessionBindingListener 类 ， 关 键 代 码 如 下 : 
public class LoginNote implements javax.servlet.http. HttpSessionBindingListener { 

Private String user: 

Private LoginList container = LoginList.getInstance(); 

Ppublic LoginNoteO { 


和 

public void setUser(String user) { 
this.user = user: 

} 

public String getUserO { 
return this.user: 
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Public void valueBound(HttpSessionBindingEvent arg0) { 
System_.outprintin(this .user+" 该 用 户 已 经 上 线 " ); 

Ppublic void valueUnbound(HttpSessionBindingEvent arg0) { 
System.out.printin(this.user+" 该 用 户 已 经 下 线 "); 
if (user =") { 
containerremoveLoginList(user); 
} 

" 

} 


(3) 创建 LoginListjsp 在 线 用 户 页 面 ， 关 键 代码 如 下 : 


<% 
LoginList list=LoginList.getInstance(); 
LoginNote ut=new LoginNote0: 
String name=request.getParameter("user"); 
ut.setUser(name); 
session.setAttribute("list",ut); 
list.addLoginList(ut.getUserO); 
session.setMaxInactiveInterval(10); 
%> 
<body> 
<div align="center "> 
<table width="400" height="150" border="0" cellpadding="0" cellspacing="0" bgcolor="ightblue”> 
<tr align="center"><td> 用 户 在 线 列表 </td></tr> 
<tr> 
<td align="center"><br> 

<textarea rows="5" cols="22"> 
<% 
Vector Vector=list.getListO; 
if(vector!=null&c&cvectorsizeO>0){ 
for(int i=0;i<vector.sizeO;it+) 

out.printin(vector.elementAt(i)+" 已 登录 在 线 "); 
} 
} 
%> 
</textarea><br><br> 

<a hre 合 "ioginOutjsp 必 返回 </a> 


当 调用 valueBound 和 valueUnbound 时 控制 监听 到 用 户 的 动作 ， 如 图 7.15 所 示 。 


图 7.15 用 户 在 线 情况 
图 秘笈 心 法 


HttpBindingListener 接口 ， 它 监听 HTTP 会 话 中 对 象 绑 定 的 信息 ， 也 是 唯一 不 需要 在 web.xml 容器 中 设 定 的 
监听 器 。 


实例 194 


力 实例 说 明 
对 请 求 的 监听 是 在 Servlet 2.4 规范 中 新 增加 的 一 个 技术 ， 当 用 户 在 监听 程序 中 获得 请 求 时 ， 就 可 以 对 请 求 
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进行 统一 的 处 理 。 本 实例 对 指定 的 他 实现 免 登录 的 操作 ， 如 果 是 第 一 次 登录 ， 需 要 添加 了 P 地 址 才能 进入 主页 ; 
如 果 不 是 第 一 次 登录 ， 说 明 该 他 地 址 已 经 被 添加 到 免 登 录 IP 数据 库 中 ， 则 可 以 直接 进入 到 主页 面 ， 运 行 效果 
如 图 7.16 所 示 。 


pr Wrdom cnet bmi ni 
加» 回 rpwecanossoeonsor -| 


rioixPeas 5 


您 是 远程 访问 请 先 登录 ! ! 


[本 而 。 甩 123% 


图 7.16 访问 结果 


图 关键 技术 
在 本 实例 中 实现 客户 端的 请 求 和 请 求 参 数 设置 的 监听 需要 实现 以 下 两 个 接口 。 
(1) ServletRequestListener 接口 
该 接口 提供 了 以 下 两 个 方法 。 
口 requestInitialized(ServletRequestEvent sre) 方 法 : 通知 正在 收听 的 对 象 ，ServletRequest 已 经 加 载 及 初始 化 。 
口 requestDestroyed(ServletRequestEvent sre) 方 法 : 通知 正在 使 用 收听 的 对 象 ，ServletRequest 已 经 被 载 出 。 
(2) ServletRequestAttributeListener 接口 
该 接口 提供 了 以 下 3 个 方法 。 
口 attributeAdded(ServletRequestAttributeEvent srae) 方 法 : 车 有 对 象 加 入 Request 的 范围 时 ， 通 知 正在 收听 
的 对 象 。 
口 attributeRemoved(ServletRequestAttributeEvent srae) 方 法 : 若 在 Request 的 范围 内 有 对 象 取代 另 一 个 对 象 
时 ， 通 知 正在 收听 的 对 象 。 
口 attributeReplaced(ServletRequestAttributeEvent srae) 方 法 : 若 有 对 象 从 Request 的 范围 移 除 时 ， 通 知 正在 
收听 的 对 象 。 


设计 过 程 
(1) 创建 监听 器 类 LoginListenerjava， 使 用 requestInitialized0) 方 法 获取 请 求 的 也 地址 ， 根 据 Login 对 象 的 
值 ， 判 断 是 否 是 服务 器 访问 ， 此 方法 会 向 请 求 中 增加 login 对 象 ， 再 依据 对 象 赋予 不 同 的 值 ， 主 要 代码 如 下 : 
public class LoginListener extends HttpServlet implements 
ServletRequestListener, ServletRequestAttributeListener { 
public void requestInitialized(ServletRequestEvent sre) { 

System.out.printin(" 已 经 初始 化 "); 

ServletRequest sr = sre.getServletRequest|: 

System.out.printin(" 远 程 访 问 机 器 的 人 P:" + srgetRemoteAddrO): 

System.out.printin(" 本 地 访问 机 器 的 IP:" + sr.getLocalAddr0); 

(srgetRemoteHostO .equals(srgetLocalAddrO)) { 
sr.setAttribute("login", "tmue"): 

jelse 
sr.setAttribute("login", "false"); 

} 


} 
Ppublic void requestDestroyed(ServletRequestEvent sre) { 
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System.outprintin(" 正 在 销毁 "): 


} 

public void attributeAdded(ServletRequestAttributeEvent srae) { 
System.out:print("request 范围 内 接收 时 ---"): 
System.out.printin(srae.gefName()+"=—"+srae.getValue()); 


} 

public void attributeRemoved(ServletRequestAttributeEvent srae) { 
System.out.print("request 范围 内 取代 另 一 个 对 象 时 ---"); 
System.out.printin(srae.getName()+"="+srae.getValue()); 


public void attributeReplaced(ServietRequestAttributeEvent srae) { 
System.out.print("request 范围 内 移 除 时 ---"); 
System_outprintin(srae.getNameO+"="+srae.getValueO): 
(2) 创建 index.jsp 页 面 ， 在 页 面 的 添加 请 求 中 加 入 login 的 值 为 tue 的 对 象 ， 就 可 以 直接 进入 telnet.htm， 


如 果 不 是 true 或 者 请 求 作用 域 中 没有 此 对 象 ， 则 显示 当前 页 面 ， 主 要 代码 如 下 : 


<% 
String login=(String)request.getAttribute("login"); 
if(login.equals("true")){ 
Tesponse.sendRedirect("telnet.htm"): 
} 
%> 
<body><div align="center"> 
<table width="335" height="225"> 
<tr> 
<td bgcolor="lightblue" align="center”> 
<form name="form1" method="post" action="teinet. htm"> 
<div> 用 户 请 登录 : 
<input type="submit” name="Submit”" value=" 滞 录 ~ 
</div> 


了 统一 处 理 ， 从 而 实现 了 监听 服务 器 端 免 登录 的 功能 。 


~ 
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8.1 JSTL Core 标签 库 


Core 标签 库 是 JSTL 的 核心 标签 库 ， 包 括 一 般 用 途 的 标签 、 条 件 标签 、 返 代 标 签 和 URL 相关 的 标签 。 下 面 
通过 几 个 实例 介绍 一 些 Core 标签 库 的 用 法 。 
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实用 指数 : 信人 福全 


图 实例 说 明 
本 实例 主要 通过 JSTL 的 <c:set> 标 签 来 实现 * 写 入 ”的 功能 , 自 定义 两 个 变量 的 作用 域 , 分 别 定义 为 application 

和 session， 运 行 结果 如 图 8.1 所 示 。 
区 jem ei Wcdows nierret Elorr er x) 
OO em | 


文件 昌吉 可 吾 看 V) 要 关 A) 工具 TD 再 动 H) 
突 收 而 夫 。_ 加 ja 关山 网 站 寺 允 旺 功 能 


今天 访问 本 网 站 总 人 数 为 : 76 
今天 您 访问 了 此 网 站 次 数 为 : 102 


国 Imernet | 保 扩 模式 启用 桓 - 有 碟 125% ~ 


图 8.1 运行 结果 


图 关键 技术 


<c:sef> 标 签 的 value 值 可 以 写 在 value 属性 中 ,也 可 以 写 在 <c:sef> 标 签 体内 ， 也 就 是 说 ，set 标签 还 支持 标签 
体 ， 代 码 如 下 : 


<ciset Var="iest" value="by property"></c:set> 
<c:set var="test">by body</c:set> 


<c:set> 标 签 只 有 5 个 属性 ， 分 别 为 var、value、scope、target 和 property。 其 中 var 是 set 的 对 象 名 ， 如 果 此 对 
象 不 存在 则 自动 生成 ， 如 果 存 在 则 将 其 修改 ， 其 中 scope 的 作用 范围 有 session、request、page 和 application 4 种 。 


图 设计 过 程 
创建 count.jsp 页 面 ， 使 用 <c:se 亿 标签 定义 两 个 变量 allCount 和 count， 其 中 allCount 作用 域 为 application， 
而 count 作用 域 为 Session， 并 且 页 面 被 浏览 累加 两 个 变量 实现 计数 器 的 功能 ， 主 要 代码 如 下 : 


<table align="center” cellpadding="0" cellspacing="0" bgcolor="lightblue”> 
<c:set var="allCount”" value="${ allCount + 1 }" scope="application"></c:set> 
<c:set var="count" value="${ count + 1 }" scope="session"></c:set> 


<Tr><td> 
今天 访问 本 网 站 总 人 数 为 : ${ allCount } <br> 
今天 您 访问 了 此 网 站 次 数 为 : ${ count } <br> 
<td></T> 

<c:set var="test” value="by value property"></c:set> 
<c:set var="test">by body</c:set> 

</table> 

<br> 

<br> 
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Tequest setAttribute("user" new com mrbean UserO): 
Tequest setAttribute("map", new java.util. HashMap()): 

%> 

<c:set target="$ { user }" property="name” value="${ param name }"></c:set> 
S${ username } 

<c:set target="$ { map }" property="name" value="${ param name }" /> 

S${ map.name } 


< 负 注意 : set 标签 只 能 设置 Interger Float Double 等 数据 类 型 ， 而 不 能 直接 操作 Java Bean 等 复杂 数据 类 型 。 
国 秘笈 心 法 
target 作用 和 var 有 些 相似 ， 唯 一 不 同 的 地 方 就 是 target 只 能 操作 Java Bean 和 Map， 它 们 的 功能 是 相 辅 的 ， 


两 者 不 能 同时 使 用 , target 只 接受 EL 表达 式 , 而 var 不 能 接受 EL 表达 式 。 通常 target 一 般 与 property 一 起 使 用 ， 
如 果 target 为 Java Bean， 则 property 为 Java Bean 的 一 个 属性 。 
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图 实例 说 明 
本 实例 将 介绍 如 何 应 用 <c:i 从 标签 实现 根据 参数 请 求 显示 不 同 页 面 的 功能 。 运 行 本 实例 ， 在 页 面 中 将 根据 
<c:i 从 标签 判断 并 显示 出 不 同 提示 信息 ， 如 图 8.2 所 示 。 


一】 


ET 一 于] 给 - 下 100% ~ 


图 8.2 周二 提示 信息 


图 关键 技术 


<cii 亿 标签 能 够 实现 Java 语言 中 的 站 语句 及 址 else 语句 的 功能 ， 语 法 格式 如 下 : 

<c:if test=" 逻 辑 表达 式 "var=" 代 表 有 逻辑 表达 式 的 值 的 命名 变量 的 名 字 "scope="(pagelrequestlsessionlapplication) " /> 

<c:i 人 > 标签 会 把 逻辑 表达 式 的 值 存放 在 var 属性 指定 的 命名 变量 中 , scope 属性 则 指定 命名 变量 的 范围 , scope 
属性 的 默认 值 是 page 页面 范 围 )。 


国 设计 过 程 


创建 fjsp 页 面 ， 把 判断 的 条 件 (param.action 一 “星期 几 ?，) 写 在 test 的 属性 中 ， 主 要 代码 如 下 : 
1 a 
周一 了 : 工作 的 第 一 天 ， 要 加 油 哦 


<ci> 
<c:if test="${ Ee Fe 

周二 了 : 工作 了 两 天 了 ， 要 适当 补充 体力 哦 
<c:if> 


es on 一 'wed' }"> 

周三 全权 的 生活 要 学 会 调节 
<ci> 
<c:if test="${ param_action — ‘thu' } 

周 四 了 : 偶尔 从 下 寡 不 算 过 分 哦 
<cif> 
<c:if test="${ param action — fri }"> 
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周 五 了 ; 加油 明天 就 要 休息 了 ，HOHO 
<ci> 
<c:if test="${ param.action 一 'sat }"> 

周 六 了 : 和 死党 们 出 去 HAPPY 吧 
<cif> 
<c:if test="${ param ac 

周 日 : 要 收 八 二 下 活动 时 个 要 上 班 呢 
<ci> 

</fieldset> 


方法 是 根据 action 参数 的 值 来 达到 不 同 星期 的 提示 信息 。action 为 sn 〈 周 日 ) 时 ， 在 URL 地 址 栏 添加 表 
达 式 “?action=sun” 为 周 日 的 提示 信息 。 


图 秘笈 心 法 


<c:i 从 标签 只 是 类 似 于 单个 的 让 语句 ， 如 果 想 实现 类 似 下 else 语句 的 功能 ， 可 以 结合 <c:choose>、<c:when> 
和 <c:otherwise> 标 签 使 用 。 
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实用 指 数 : 让 让 席 


图 实例 说 明 
本 实例 主要 应 用 <c:forTokens> 标 签 ， 实现 遍历 以 特定 分 隔 符 分 隔 的 字符 串 。 运 行 本 实例 ,使 用 <c:forTokens> 

循环 标签 ， 按 “* ”字符 分 隔 其 集合 中 所 有 的 数据 ， 如 图 8.3 所 示 。 

局 全 用 orTokcenr 通 万 本 示 分 后 税率 - Windowsinte [EC 


GO s/h. -Bo[x [Pen 
TFT 
入 《要 关 。 国 本 BiorTakens 天 条 二 介子 


泽 ， Hibernate 
和 en 和 < 本 全 下 
4 视频 学 JavaWeb 
4 Je 实战 宝 


6 JavaWeb 束 合 之 王者 
归来 


7 JSP 荡 例 宝 由 
8 精通 JSP 编 程 


国 internet | 抽 P 楼 式 :启用 全 -有 100% ~ 
J 


图 8.3 运行 结果 


图 关键 技术 


<c:forTokens> 标 签 与 <c:forEach> 标 签 很 相似 ，<c:forTokens> 也 有 begin、end、step、items 等 属性 ， 也 可 以 
遍历 itmes 属性 的 值 。 不 同 之 处 是 ，<c:forEach> 标 签 中 的 itmes 属性 值 为 集合 或 数组 ， 而 <c:forTokens> 标 签 中 的 
items 属性 值 是 带 分 隔 符 的 字符 串 。<c:forTokens> 标 签 的 属性 如 表 8.1 所 示 。 

表 8.1 <c:forTokens> 标 签 的 属性 


属 性 描述 


begi 返回 forTokens 标签 begin 属性 的 值 
end 返回 forTokens 标签 end 属性 的 值 
step | 返回 forTokens 标签 step 属性 的 值 
items 返回 forTokens 标签 items 属性 的 值 
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varStatus 为 当前 遍历 对 象 的 信息 被 记录 在 varStatus 中 ， 通 过 varStatus 即 可 获取 当前 被 遍历 对 象 的 信息 。 
图 设计 过 程 
创建 forTokens.jsp 页 面 ，<c:forTokens> 标 签 的 items 属性 有 很 多 字符 串 ， 分 别 以 “*” 隔 开 ， 从 第 一 个 “*” 


字符 开始 分 隔 ， 直 到 第 8 个 为 止 ， 主 要 代码 如 下 : 
<table> 
<tr bgcolor=#CCCCCC"> 
<td> 分 隔 号 </td> 
<td> 其 值 <td> 
<t> 
<c:forTokens 
items="JSP 开发 王 *Spring 技术 内 幕 * 深 入 浅 出 Hibernate* 精 通 JavaWeb 整合 开发 * 视 频 学 JavaWeb*JavaWeb 开发 实战 宝典 *JavaWeb 整合 
之 王者 归来 *JSP 范例 宝典 * 精 通 JSP 编程 
delims="*" var="item" varStatus="varSiatus" begin="]" end="8"> 
<t> 
<td>${ varStatus.index }</td> 
<td>${ item }</td> 
<t> 
</c:forTokens> 
</table> 


图 秘笈 心 法 


<c:forTokens> 标 签 类 似 于 Java 中 的 java.util.StringTokenizer 类 的 用 法 。 
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图 实例 说 明 
本 实例 将 介绍 如 何 利用 JSTL 标签 实现 选取 随机 数 并 给 予 不 同 的 提示 信息 。 运行 本 实例 , 效果 如 图 8.4 所 示 。 
OB Mak Windows Iniormet Erploror |e: | 


Gece -| |x)Per 3 
文件 昌 ” 妨 名 眉 。 查 看 MV) 。 收 项 次 A) 工具 中 帮助 (H) 
这 收 训 关 国语 机 炽 小 六 戏 


随机 数 为 : 3 中 大 奖 了 移动 速度 加 50% 


imemet|B 术 区 BB 用 全 所 125% ~ 


8.4 随机 数 为 3 


图 关键 技术 


本 实例 主要 通过 应 用 <c:choose>、<c:when> 和 <c:otherwise> 标 签 来 实现 。 这 几 个 标签 在 一 起 连用 ， 可 以 实现 
Java 语言 的 felse 语句 的 功能 。 
图 设计 过 程 
创建 Random.jsp 页 面 ， 先 将 随机 数 保存 在 num 变量 中 ， 然 后 再 使 用 <c:choose> 标 签 和 <c:otherwise> 标 签 根 
据 随 机 数 提示 不 同 信息 ， 主 要 代码 如 下 : 
bo 


dy> 
<%Random rd = new Random0: %> 
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<c:set Var="mum"> 
<9%6=rdnextint(5)96> 

<e:set> 

<c:choose> 
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<c:when test="$ {nune 一 1}"> 随 机 数 为 :1 恭喜 你 前 进 5 格 </cwhen> 

<c:when test="${num 一 2}"> 随 机 数 为 : 2 十 分 降 气 原 地 不 动 </c:when> 
<c:when test="${nune=3}"> 随 机 数 为 3 中 大 奖 了 移动 速度 加 50%</c:when> 
<c:when test="${num 一 4}"> 随 机 数 为 :4 舟 车 疲劳 倒退 3 格 </c:when> 


<c:otherwise> 快 去 充电 吧 !! </c:otherwise> 


</c:choose> 
<body> 


图 秘笈 心 法 


使 用 <c:choose>、<c:when> 和 <c:otherwise> 标 签 时 ， 必 须 遵循 以 下 语法 规则 : 


OOOO 


<c:when> 标 签 之 后 。 
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图 实例 说 明 


在 <c:choose> 标 签 中 可 
在 <c:choose> 标 签 中 如 果 同 时 包含 <c:when> 和 <c:otherwise> 标 签 ， 那 么 <c:otherwise> 标 签 必须 位 于 


<c:when> 和 <c:otherwise> 不 能 单独 使 用 ， 它 们 必须 位 于 <c:choose> 父 标签 中 。 
在 <c:choose> 标 签 中 可 


以 包含 一 个 或 多 个 <c:when> 标 签 。 
以 不 包含 <c:otherwise> 标 签 。 


在 JSP 页 面 中 ， 经 常 需 要 遍历 保存 数据 的 List 集合 ， 当 然 ， 可 以 应 用 Java 脚本 代码 来 实现 ， 但 是 在 JSP 中 
插入 大 量 的 Java 脚本 是 我 们 不 希望 看 到 的 。 针 对 这 一 问题 ， 可 以 使 用 JSTL 标签 中 的 <c:forEach> 标 签 。 本 实例 
将 介绍 如 何 应 用 <c:forEach> 标 签 遍历 List 集合 中 的 元 素 ， 运 行 结果 如 图 8.5 所 示 。 


图 关键 技术 


短 使 用 cforEach 刘 历 Lict 中 所 有 的 集合 - Windowe Internet Explorer 


鲍 鲍 > 回 repyloahossosolsandej [4 [x NP eng 只 "有 


文件 四 ”编辑 (E) 章 看 V) 收藏 赤 A)。 工具 中 帮助 (H) 
襄 收 茂 夫 。 因 他 用 cforEach 记 万 Hjst 所 有 六 集合 


Pe 


知 处 
遍历 List 中 所 有 的 元 素 输出 第 ”个 和 最 后 句 : 


0 松下 问 童子 
3 云 深 不 知 处 


图 Internet | 保护 模式: 局 用 -szs% 用 


图 8.5 运行 结果 


<c:forEach> 标 签 用 于 遍历 集合 中 的 对 象 ， 并 且 能 重复 执行 标签 主体 。<c:forEach> 标 签 的 基本 语法 如 下 : 
<c:forEach var=" 代 表 集合 中 的 一 个 元 素 的 命名 变量 的 名 字 " items-" 集 合 "> 


<c:forEach> 标 签 每 次 从 集合 中 取出 一 


个 元 素 ， 并 且 把 它 存放 在 NESTED 范围 内 的 命名 变量 中 ,在 标签 主体 


中 可 以 访问 这 个 命名 变量 。NESTED 范围 是 指 当前 标签 主体 构成 的 范围 ， 只 有 当前 标签 主体 才能 够 访问 


NESTED 范围 内 的 命名 变量 。 
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<c:forEach> 标 签 的 varStatus 属性 用 于 设置 一 个 javax.servletjsp.jstLcore .LoopTagStatus 类 型 的 命名 变量 ， 它 
位 于 NESTED 范围 ， 这 个 命名 变量 包含 了 从 集合 中 取出 的 当前 元 素 的 状态 信息 ， 如 表 8.2 所 示 。 


表 8.2 varStatus 属性 的 状态 


属 性 描述 

index 当前 元 素 在 集合 中 的 索引 ， 从 0 开始 计数 
count 当前 元 素 在 集合 中 的 序号 ， 从 1 开始 计数 
first 当前 元 素 是 否 为 集合 中 的 第 一 个 元 素 


last 


图 设计 过 程 

创建 indexjsp 页 面 , 首先 声明 一 个 List 集 合 ,其 下 有 4 个 元 素 并 保存 在 request 作 用 域 中 。 下 面 使 用 <c:forEach> 
标签 遍历 所 有 的 元 素 ， 并 且 只 筛选 出 第 一 条 和 最 后 一 条 元 素 ， 主 要 代码 如 下 : 

bo 


当前 元 素 是 否 为 集合 中 的 最 后 一 个 元 素 


<% 
List<String> list = new ArrayList<String>0; /创建 List 集合 对 象 
list.add(" 松 下 间 童 子 "); // 添 加 List 中 的 元 素 
list.add(" 云 深 不 知 处 "); 
request.setAttribute("list", list); // 将 List 集 合 保存 到 request 对象 中 
%> 
<table align="center" cellpadding="0" cellspacing="0" border="2" 
bgcolor="lightbiue”> 
<Tr> 


<Td><b> 遍 历 List 集合 的 全 部 元 素 : </b><br> 
<c:forEach items="${requestScopeJlist}" var="keyvalue” 


varStatus="id"> 
Stidindex }&nbsp:S$ {keyvalue}<br> 
</c:forEach> 
</Td> 
</Tr> 
<Tr> 


<td><b> 遍 历 List 中 所 有 的 元 素 输出 第 一 个 和 最 后 一 句 : </b><br> 
<c:forEach items="$ {requestScope.list}" var="keyvalue” 
varStatus="id" begin="0" step="3"> 
S{id index } &nbsp:$ {keyvalue} <br> 
</c:forEach> 
<t> 


| 
图 秘笈 心 法 


当 使 用 forEach 遍历 集合 ， 既 不 知道 遍历 对 象 是 所 有 对 象 中 的 第 几 个 ， 也 不 知道 谁 是 第 一 个 和 最 后 一 个 时 ， 
想 知道 类 似 的 信息 就 需要 借助 forEach 的 varStatus 属性 ， 此 属性 为 javax.servlet.jsp.jstl.core.LoopTagStatus 类 的 
对 象 。 
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图 实例 说 明 
在 网 站 开发 过 程 中， 在 用 户 注册 或 者 其 他 注册 时 ， 在 注册 之 前 ， 需 要 展示 给 用 户 注册 协议 信息 ， 只 有 同意 
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了 协议 才 可 以 继续 完成 注册 。 本 实例 将 应 用 JSTL 标签 中 的 <c:import> 标 签 , 实现 导入 注册 协议 的 文本 资源 文件 ， 
运行 结果 如 图 8.6 所 示 。 


M0 
GO ts/ecors0s0ns 

use “se sav gay IRD a 
人 


“Bl [xp sn 5 


可 次 出 
EE 


3 @ emt| Bt BR 而 -二 100w ， 


8.6 用 户 注册 协议 


关键 技术 


<c:import> 标 签 用 于 包含 其 他 Web 资源 ， 它 与 <jsp:include> 指 令 的 作用 有 些 类 似 。<c:import> 标 签 与 
<jsp:include> 标 签 的 区 别 在 于 ， 前 者 不 仅 可 以 包含 同一 个 Web 应 用 中 的 资源 ， 还 可 以 包含 其 他 Web 应 用 中 的 资 
源 ， 甚 至 是 其 他 网 站 的 资源 。<c:import> 标 签 的 基本 语法 格式 如 下 : 

<c:import url="Web 资源 的 URL"> 

<c:import> 标 签 的 属性 如 表 8.3 所 示 。 


表 8.3 ”<cimport> 标 签 的 属性 


属 性 EL 
ul 可 以 
要 访问 到 同一 个 服务 器 的 其 他 Web 工程 ， 其 值 必须 以 “/” 开 头 ， 如 果 指定 了 该 属性 ， 其 
context ae 可 以 
属性 值 也 必须 以 “/” 开 头 
Var 不 可 以 
scope 不 可 以 
varReader 以 Reader 类 型 存储 要 包含 文件 的 内 容 不 可 以 
charEncodin! 要 导入 文件 的 编码 格式 可 以 
设计 过 程 


创建 Registerjsp 页 面 ， 使 用 <c:import> 的 url 属性 把 注册 协议 的 文本 资源 文件 agreement.txt 导入 到 页 面 中 的 
文本 域 ， 关 键 代 码 如 下 : 
<body><div align="center"> 用 户 注册 协议 </div> 
<table align="center” border="2"> 
<tr bgcolor=#CCCCCC”> 
<Td align="cenier> 注 册 协 议 </Td> 


<Td><textarea rows="15" cols="80"> 
<c-import url="agreement. txt” charEncoding="gbk"/> 
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</textarea></Td> 
</r> 
<Tr 
<tdalign="center" colspan="2"><input type="submit” value=" 我 同意 "> 
<input type="submit”" value=" 我 不 局 蕊 "><ftd> 
Tr> 
</table> 
/oody> 


图 秘笈 心 法 
类 似 于 JSP 的 <%file include%> 与 <jsp:include>,JSTL 也 提供 了 实现 include 功能 的 标签 <c:import>, 不 过 JSTL 


标签 功能 强大 ， 可 以 把 Intemet 的 网 页 包含 进来 ， 例 如 : 
<c:import url="htip:/rww.sina.com.cn” charEncoding="gb2312"></c:import> 


8.2 JSTL I18N 标签 库 


I18N 是 mntemationalization 的 简称 , 因为 该 单词 的 首 字母 I 与 尾 字 母 n 中 间隔 着 18 个 字符 , 由 此 得 名 。 I18N 
标签 库 主 要 用 于 编写 国际 化 的 Web 应 用 。I18N 标签 库 中 的 标签 可 以 分 为 两 部 分 : 一 部 分 用 于 国际 化 ， 另 一 部 分 
用 于 对 时 间 、 日 期 和 数字 进行 格式 化 。 


请 求 的 字符 编码 


实例 201 


实用 指数 : 广 食 食 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JSTL 标签 设置 请 求 的 字符 编码 。 运 行 本 实例 ， 在 页 面 中 单 击 “ 验 证 ”按钮 ， 转 换 预 
设 的 编码 格式 ， 运 行 结果 如 图 8.7 所 示 。 


| 
GO r/oen- 5 |x dP are 
EC Te) 
室 % 基 关 。 因 利 用 JSTL 怎 设置 六 到 从 式 


关键 字 : JSTL 设 置 编 码 相 式 
【了 三 ” 二 100% ~ 中 
图 8.7 运行 结果 


图 关键 技术 


本 实例 主要 应 用 JSTL 标签 库 的 I18N 标签 中 的 <fimt:requestEncoding> 标 签 ， 该 标签 用 于 设置 HTTP 请 求 正 
文 使 用 的 字符 编码 ， 基 本 语法 如 下 : 
<fimt:requestEncoding 


value—"GB2312"> 
该 标签 设置 的 请 求 编码 , 等 价 于 应 用 request 对 象 的 setCharacterEncoding() 方 法 设置 的 请 求 编码 , 代码 如 下 : 
<% request.setCharacterEncoding("GB2312")%6> 


力 设计 过 程 


创建 Encoding.jsp 页 面 ， 使 用 requestEncoding 的 value 设置 编码 格式 为 UTF-8， 主 要 代码 如 下 : 


275 


Java Web 开发 实例 大 全 (基础 卷 ) 


<fint:requestEncoding value="UTF-8" /> 
<form action="${ pageContextTequestrequestURI }” method="post”> 
<table height="50" width="300" cellpadding="0" cellspacing="0” 


align="center” bgcolor="lightblue ”> 
<> 
<Td> 关 键 字 : <input name="key" 亡 
<c:out value="${ param key }" default=" 广 闪 和 ”></c:out> 
</Td> 


</form> 


如 果 去 掉 requestEncoding 标签 ， 运 行 时 就 会 出 现 乱 码 。 


图 秘笈 心 法 


如 果 使 用 get 方法 提交 , 还 要 修改 tomcat 的 server.xml, 将 URIEncoding 设置 为 UTF-8, 否则 一 样 会 出 现 乱 码 。 


图 实例 说 明 


实用 指数 : 让 廊 丰 


本 实例 使 用 <fmtbundle>、<fmtmessage> 和 <fmt:param> 标 签 来 实现 资源 国际 化 ， 把 所 有 中 文 的 提示 信息 放 


在 message_zh_CN.properties 文件 中 ， 所 有 英文 的 放 在 message_en_US.properties 文件 中 ， 系 统 以 虽 
时 ， 就 以 哪 种 语言 显示 ， 运 行 结果 如 图 8.8 所 示 。 
六 Ta | PT 四 加 一 zj 
> hpiecat.. -IBIs Ix Pe P GO r/ccan.. -Bio[xj|P sn 万 
文件 日。 问 狂 E) 下 看 (V) 收 茂 次 地) 工具 中 颖 幼 人 H) [E23 生硬 日 宣 看 (收藏 交 (A) 工具 中 都 功 (H) | 
六 k 而 灾 。| 回 <ST 的 关上 际 化 六 二 二 辐 )5TL 的 和 尖 国标 化 
JS 工 的 资源 国际 化 5 的 次 源 国 际 化 
路 , Mingri 你 多 大 了 ti, Mingri How old ac you. 
国 Internet | 全 PP 本 局 用 三 成 100% @ temet | WR: SE 从 ” 护 100% = 中 
(a) (b) 


图 8.8 运行 结果 


图 关键 技术 


口 “<fmt:bundle> 标 签 


该 标签 用 于 设置 标签 主要 使 用 的 ResourceBundle， 基 本 语法 如 下 : 


<fmtbundle basename="" 前 缀 =" 消 息 key 的 前 组 "> 
标签 主体 

</fint:bundle> 

口 “<fmtmessage> 标 签 


种 语言 登录 


该 标签 根据 属性 key 返回 ResourceBundle 中 匹配 的 消息 文本 。 假 定 在 message.properties 资源 文件 中 包含 如 


下 内 容 : 
myword-message from message properties 
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然后 在 JSP 中 可 以 应 用 <fimt:message> 标 签 从 资源 文件 中 读 取 消息 文本 ， 代 码 如 下 : 
<fimt:bundle basename="resource"> 

<fimt:message key=" myword" /><br> 
/fimt:bundle> 


口 “<fmtparam> 标 签 

该 标签 嵌 套 在 <fmtmessage> 父 标签 中 ， 用 于 为 消息 文本 中 的 消息 参数 设置 值 。 假 定 在 message.properties 
文件 中 包含 如 下 内 容 : 

usemame=My nameis {0} ,I'm {1} yesrs old. 


在 消息 文本 中 的 {0} 和 也 } 分 别 表 示 两 个 消息 参数 。 在 JSP 中 ， 以 下 代码 演示 了 <fimt:param> 标 签 的 用 法 : 
es 
<fimt:param value=" John" /> 
<fimt:param value="nineteen"> 
</fimt:message> 
以 上 代码 中 的 两 个 <fmt:param> 标 签 用 于 蔡 换 消息 文本 中 的 两 个 参数 ， 输 出 结果 如 下 ; 


My my is John.Tm nineteen years old. 

图 设计 过 程 
(1) 首先 创建 message_zh_CN.properties 中 文 资源 文件 和 message_en_US.properties 英文 资源 文件 ， 并 存放 

在 src 包 下 ， 其 内 容 如 下 所 示 : 

Imessage_zh_CN.properties: 

prompthi = \u55ES, {0}. 

prompt.greeting =\u4f60\u591a\u5927\u4e86. 

message_en_US.properties: 


Pprompt.hi = i. {0}. 
Pprompt.greeting =How old are you. 

(2) 创建 fmtjsp 页 面 文件 ， 这 里 引用 <fimt:bundle>、<fimt:message> 和 <fimt:param> 标 签 ， 主 要 代码 如 下 : 
<div align="center">JSTL 的 资源 国际 化 </div> 
<table align="center”" cellpadding="0" cellspacing="0" height="80" width="300" border="2" bordercolor="blue’> 
<fimt:bundle basename="messages "> 
<Tr> 
<Td align="center’> 
<fimt:message key="prompt.hi’> 

<fimt:param value="Mingri"></fmt:param> 

</fimt:message> 
<fimt:message key="prompt.greeting"></fmt:message></Td> 
<Tr> 


</fimt:bundle> 
</table> 


图 秘笈 心 法 


<fimt:message> 标 签 有 一 个 var 属性 和 scope 属性 ， 用 于 把 消息 文本 保存 在 特定 范围 内 。var 属性 指定 命名 变 
量 的 名 字 ; scope 属性 指定 消息 文本 的 存放 范围 ， 该 属性 的 默认 值 为 page。 如 果 没有 设 定 var 和 scope 属性 ， 那 
么 <fmtmessage> 标 签 直接 输出 消息 文本 ， 否 则 将 把 消息 文本 作为 命名 变量 存放 在 特定 范围 内 。 


ie> 显 示 所 有 地 区 的 数据 格式 ”初级 
实用 指数 : 相让 页 | 
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力 实例 说 明 


如 果 一 个 应 用 程序 被 跨 地 区 的 用 户 使 用 , 那么 肯定 会 有 地 区 间 的 文化 差异 , 本 实例 使 用 <fmt:setLocale> 标 签 
设置 本 地 化 的 日 期 格式 、 货 币 格式 来 解决 本 地 化 的 问题 ， 运 行 结果 如 图 8.9 所 示 。 
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图 8.9 运行 结果 
图 关键 技术 


<fimt:setLocale> 标 签 用 于 设置 Locale， 把 Locale 保存 在 特定 范围 内 ， 其 基本 语法 如 下 : 
<fmt:setLocale value="Local" scope=" {pagelrequestlsessionlapplication}" /> 
<fmt:setLocale> 标 签 的 scope 属性 默认 值 为 page。 以 下 代码 在 会 话 范围 内 存放 了 一 个 表示 中 文 的 Locale: 
<fimt:selLocal value="zh_CN" scope="session"> 
以 上 <fimt:setLocale> 标 签 和 以 下 Java 代码 片段 的 作用 是 等 价 的 : 
Locale locale=new Locale("zh", " CN"); 
Session.setAttribute("javax.servlet.jsp.jstl.fimt.locale.session",locale); 
%> 


多 提示 : Locale (本 地 ) 指 的 是 一 个 具有 相同 风俗 、 文 化 和 语言 的 区 域 ， 如 果 一 个 应 用 没有 事先 把 I18N 作为 内 
谈 的 功能 ， 那 么 当 这 个 应 用 需要 支持 新 的 Locale 时 ,开发 人 员 必 须 将 嵌入 在 源 代码 中 的 文本 、 图 片 和 
消息 进行 修改 ， 然 后 重新 编译 源 代 码 。Locale 类 的 实例 代表 一 种 特定 的 语言 和 地 区 。 如 果 Java 类 库 中 
某 个 类 在 运行 时 需要 根据 Locale 对 象 来 调整 其 功能 ， 那 么 就 策划 这 个 类 是 本 地 敏感 的 (Locale- 


Sensitive )。 
图 设计 过 程 
创建 localejsp 页 面 ， 使 用 <fmt:setLocale> 标 签 输出 Locale， 再 把 所 有 的 Locale 存储 到 request 作用 域 中 ， 利 


用 JSTL 的 <e:forEach> 标 签 循 环 过 代 出 所 有 的 Locale 的 日 期 、 数 字 、 货 币 格式 ， 主 要 代码 如 下 : 
<body> 
<% // 把 所 有 的 Locale 存储 到 request 作用 域 中 
Tequest.setAttribute("localeList", Locale .getAvailableLocalesO): 
%> 
<div> 
本 地 区 为 :<%=Locale.getDefault0.getDisplayNameO 〇 %> 
</div> 
<table> 
<tr class="title’> 
<th> 地 区 </th> 
<th> 语 言 </th> 
<th> 日 期 时 间 格 式 </th> 
<th> 数 字 格 式 </th> 
<th> 货 币 格 式 </th> 
</tr> 
<jsp:useBean id="date" class="java.util Date”></isp:useBean> 
<c:forEach var="locale” items—"${ localeList }"> 
<fimt:setLocale value="${ locale }" /> 
<t> 
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<td align="left">${ locale.displayName }</td> 


<td><fimt:formatNumber value="100900.9" type="currency” /> </td> 
</r> 
</c:forEach> 
</table> 


图 秘笈 心 法 

需要 注意 的 是 ， 中 文 的 资源 文件 中 的 中 文 信息 ， 需 要 进行 字符 编码 转换 ， 转 换 为 “wxxxx” 模 式 的 ， 需 要 
利用 JDK 提供 的 native2ascii.exe 可 执行 程序 进行 转换 。 在 DOS 下 执行 以 下 命令 , 将 生成 按 GB2312 编码 的 中 文 
资源 文件 message_ zh_CN.properties: 

native2ascii -encoding gb2312 message_temp.properties message zh CN.properties 

以 上 命令 生成 的 messsage_zh_CN.properties 文件 的 内 容 如 下 : 


login.user = \u7528\u6237\u540d 
login.pwd=\u53e3\n4ee4 


3> 显 示 不 同 地 区 的 时 间 


实例 204 


图 实例 说 明 
本 实例 使 用 <fmttimeZone> 标 签 获取 所 有 地 区 时 区 并 保存 在 map0 对 象 中 ， 再 使 用 <c:forEach> 迁 代 标 签 遍 历 
所 有 的 地 区 时 间 ， 运 行 结果 如 图 8.10 所 示 。 
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8.10 ”运行 结果 


转 关键 技术 


<fimt:timeZone> 标 签 用 于 设置 当前 标签 主体 使 用 的 时 区 ， 其 基本 语法 如 下 : 
<fimt:timeZone value=" 时 区 "> 
标签 主体 
</fimt:timeZone> 
例如 ， 以 下 代码 输出 采用 GMT 时 区 的 日 期 和 时 间 : 
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<fimt:timeZone value—"GMT"> 
<fimt:formatDate value="<9b=new Date096>" type=" both"/> 

/int:timeZone> 

假定 当前 上 下 文 使 用 的 Locale 为 en_US， 以 上 代码 的 输出 结果 为 : 

Aug 17.2010 2:15:48 AM 
图 设计 过 程 

创建 time.jsp 页 面 文件 ， 声 明 一 个 Map 对 象 ， 并 使 用 for 循环 把 所 有 的 地 区 时 间 保 存在 Map 对 象 中 ， 并 存 
储 到 request 范围 内 ， 然 后 用 <fimt:timeZone> 标 签 获取 地 区 时 间 ， 最 后 使 用 <c:forEach> 把 所 有 的 数据 显示 在 页 面 
中 ， 主 要 代码 如 下 : 


只 align="center"> 


a TimeZone> hashMap = new HashMap<String, TimeZone>(); 
for(String ID : TimeZone.getAvailableIDsO){ 
hashMap.put(ID, TimeZone.getTimeZone(ID)); 


} 
Tequest.setAttribute("timeZoneIds", TimeZone.getAvailableIDs()); 
request.setAttribute("timeZone”, hashMap); 

%> 

<isp:useBean id="date" class="java.util.Date"></isp:useBean> 
<fimt:setLocale value="zh_CN"/> 

北京 时 间 : <%= TimeZone.getDefault0.getDisplayName0 %> 
<fimt:formatDate value="${ date }" type="both" /> <br/> 

</div> 

<table align="center”> 

<t> 


<th> 时 区 编号 </th> 
<th> 时 区 </th> 
<th> 当 地 时 间 </th> 
<th> 本 地 时 差 </th> 
<t> 
<c:forEach var="ID" items="$ { timeZonelds }" varStatus="status "> 
<tr> 
<td>${ ID }</td> 
<td>${ timeZone[ID].displayName }</td> 
<td> 
<fimt:timeZone value="${ ID }" > 
<fimt:formatDate value="${ date }" type="both" timeZone="${ ID }"/> 
</fmt:timeZone> 
</td> 
<td>${ timeZone[ID].rawOffset / 60 / 60 / 1000 }</td> 
<t> 


</c:forEach> 
</table> 


图 秘笈 心 法 
在 JSTL 标签 的 118N 标签 库 中 ， 还 包含 一 个 <fmtsetTimeZone> 标 签 ， 用 于 设置 时 区 ， 把 时 区 保存 到 特定 范 


围 内 ， 其 基本 语法 如 下 : 
<fimt:setTimeZone value=" 时 区 " var=" 命 名 变量 的 名 字 " scope=" {pagelrequestlsession|application}" /> 


te> 标 签 对 日 期 格式 化 初级 | 
实用 指数 : 银 博 二 | 


图 实例 说 明 
本 实例 使 用 <fmtformmatDate> 标 签 对 日 期 格式 化 ,将 实现 对 所 有 地 区 的 日 期 时 间 进行 转换 ,运行 结果 如 图 8.11 
所 示 。 
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图 8.11 运行 结果 


关键 技术 


<fimt:formatDate> 标 签 用 于 对 日 期 和 时 间 进 行 格式 化 ， 它 的 属性 介绍 如 下 。 

@ value 属性 : 需要 格式 化 的 日 期 或 时 间 。 

@ type 属性 : 指定 格式 化 日 期 或 时 间或 日 期 和 时 间 。 可 选 值 包括 date、time 和 both。 默 认 值 为 date。 

@ dateStyle 属性 : 日 期 的 格式 化 样式 。 默 认 值 为 default。 

@timeStyle 属性 : 时 间 的 格式 化 样式 。 默 认 值 为 default。 

@ pattem 属性 : 指定 自 定义 的 格式 化 日 期 和 时 间 的 样式 。 

@ timeZone 属性 : 指定 使 用 的 时 区 。 

@ var 属性 : 指定 命名 变量 的 名 字 。 

@ scope 属性 ， 指定 经 过 格式 化 的 时 间 和 日 期 的 存放 范围 。 默 认 值 为 page。 
用 设计 过 各 

创建 DataFormat.jsp 页 面 ， 首 先 获取 所 有 的 field 和 Locale， 并 进行 遍历 所 有 的 field， 如 果 类 型 为 Locale， 
则 将 其 添加 到 localeList 中 ,创建 一 个 double[] 数 组 保存 到 request 中 。 使 用 <fimt:formatDate> 标 签 的 value 属性 设 
置 要 格式 化 的 日 期 ， 最 后 用 <c:forEach> 把 所 有 信息 迭代 到 页 面 中 ， 主 要 代码 如 下 : 

<div align="center > 日 期 格式 化 标签 </div> 

Ea field = Locale.class.getFields():; 

List<Locale> localeList = new ArrayList<Locale>0); 

for(int i=0; i<field length; i { 


if(field[i].getTypeOQ.equals(Locale.class)){ 
localeList.add((Locale)field[i].get(nulD)): 
: 


Tequest.setAttribute("localeList", localeList): 
%> 


<table align="center”> 
<t> 
<td> 地 区 缩写 </td> 
<td> 日 期 与 时 间 </td> 
<td> 数 字 </td> 
<td> 货 币 </td> 
</t> 
<jsp:useBean id="date" class="java.util. Date”></isp-useBean> 
<c:forEach var="locale” items—"${ localeList }"> 
<fimt:setLocale value="${ locale }"/> 
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<t> 
<td>${ locale }<td> 
<td><fimt-formatDate value="${ date }" type="both"”/></td> 
<td><fimt:formatNumber value="430000.52" /></td> 
<td><fimt:formatNumber value="430000.52" type="currency” /> </td> 
</> 
<J/c:forEach> 
/table> 


图 秘笈 心 法 
对 于 <fmtformatDate> 标 签 的 dateStyle 属性 和 timeStyle 属性 的 详细 用 法 ， 可 参考 java.text.DateFormat 类 的 
API 文档 ; 对 于 pattem 属性 的 用 法 ， 可 参考 java.text.SimpleDateFormat 类 的 API 文档 。 
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使 用 JavaScript 控制 DOM 


JavaScript 技术 
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9.1 数据 验证 


在 Web 应 用 开发 过 程 中 ， 为 了 保证 提交 的 表单 数据 的 有 效 性 和 准确 性 ， 需 要 对 表单 数据 进行 验证 。 本 节 将 
介绍 一 些 常 用 的 数据 验证 的 JavaScript 函数 。 


图 实例 说 明 
本 实例 将 介绍 在 JavaSeript 中 , 如 何 利用 正则 表达 式 来 验证 表单 中 输入 的 日 期 类 型 的 值 是 否 有 效 , 运行 结果 
如 图 9.1 所 示 。 


请 输入 日 期 : 2010-6-31 或 为 : 2010/06/17 胡 re 


来 自 网 页 的 消息 


2， 从 R 入 的 日 期 正确 ， 尖 主意 日 期 格式 ! 


Cm ] 


9.1 使 用 正则 表达 式 验 证 日 期 


图 关键 技术 


在 JavaScript 中 使 用 正则 表达 式 主要 是 通过 正则 表达 式 对 象 实现 的 ， 使 用 正则 表达 式 的 语法 格式 如 下 : 

1e=/pattem/[flags] 

参数 说 明 

@ re: 必 选 参数 。 将 要 赋值 为 正则 表达 式 模式 的 变量 名 。 

@ pattem: 必 选 参数 。 要 使 用 的 正则 表达 式 模 式 ， 以 “/” 开 头 和 结尾 。 

@ flags: 可 选 参数 。 用 于 指定 匹配 的 标记 ， 常 用 的 标记 有 g (全文 查 找 出 现 的 所 有 pattem)、I (忽略 大 小 
写 ) 和 m (多 行 查找 )。 

验证 日 期 格式 是 否 正 确 时 ， 需 要 注意 以 下 几 点 : 

(1) 年 份 由 4 位 数字 组 成 。 

(2) 月 份 由 1 一 12 的 数字 组 成 。 

(3) 第 1、3、5、7、8、10、12 月 份 为 31 天 ，4、6、9、11 月 份 为 30 天 。 

(4) 图 年 的 2 月 份 为 29 天 ， 非 半年 的 2 月 份 为 28 天 。 
图 设计 过 程 

(1) 新 建 indexjsp 页 ， 在 该 页 的 <scrip 亿 标签 中 利用 正则 表达 式 编写 验证 日 期 的 JavaScript 函数 ， 如 果 验 证 
成 功 返回 tue， 和 否则 返回 false， 关 键 代码 如 下 : 

function CheckDate(str){ 
Var Expression =/A((((1[6-9][2-9]wvd{2))CVI-)(0?[13578]1[02])CVI-)0?[I-9]I[12]dls[ol))| 


(QIG-9]2-9]dd2))CVI)X(0?[13456789]I1[o12D)(VI-Xo?[1-9]III2dBODICGI[6-9]2-9Jd)d23CVND0?2CVI-)o?[1-9]ivdpIo-sJDDKCGI[G-9]I2-9Jd)o 
[48]I[2468][048]I[13579][26DI((16I[2468][048]I[3579][261)00))-0?2-29-))S/; 
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(2) 编写 按钮 的 onClick 事件 调用 的 JavaScript 方法 ， 在 方法 中 验证 用 户 输入 的 日 期 是 否 合法 ， 如 果 验 证 
失败 则 弹出 提示 信息 ， 否 则 提交 表单 ， 关 键 代码 如 下 : 
function checkO{ 


var mydate = document.getElementById("mydate"); ”// 获 得 日 期 文本 框 对 象 
if(mydate.value—""){ /1/ 判 断 输入 的 日 期 是 否 为 空 
alert(" 请 输入 日 期 ! "); 
mydate focusO; /使 文本 框 获得 焦点 
Teturn; 
} 
if(!CheckDate(mydate.value)){ // 验 证 日 期 格式 是 否 正确 
alert(" 您 输入 的 日 期 不 正确 ， 请 注意 日 期 格式 !"); 
mydate focusO; 
return; 


} 
document.getElementById("dataForm").submit(); 
document.forms.dataForm. submit(); 

} 


图 秘笈 心 法 
由 于 验证 日 期 的 正则 表达 式 比较 繁琐 ， 并 且 不 容易 理解 ， 因 此 笔者 不 建议 用 此 方法 来 验证 日 期 是 否 合 
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实用 指数 : 让 杰 刘 


图 实例 说 明 

实例 206 已 经 介绍 了 如 何 通过 正则 表达 式 来 验证 日 期 的 合法 性 ， 验 证 日 期 的 正则 表达 式 编写 时 很 繁琐 ， 且 
很 容易 出 现 错误 。 本 实例 将 介绍 如 何 通过 普通 的 JavaScript 业务 迎 辑 方法 来 验证 日 期 的 合法 性 ， 运 行 结果 如 图 9.2 
所 示 。 


请 输入 日 期 : 2010-6-31 为: 2010/0e717 攻 2010-06-17 


来 自 网 页 的 消息 


| 拘捕 入 的 日 期 格式 不 正确 ! 
A 


9.2 ”验证 输入 的 日 期 是 否 合法 


图 关键 技术 


(1) 日 期 中 的 年 份 、 月 份 、 日 都 必须 是 大 于 0 的 数字 。 
(2) 判断 输入 的 年 份 是 否 为 头 年 ， 并 判断 2 月 份 的 天 数 ， 间 年 的 2 月 份 为 29 天 ， 非 闽 年 的 2 月 份 为 28 天 。 
(3) 1、3、5、7、8、10、12 月 份 为 31 天 ，4、6、9、11 月 份 为 30 天 。 


Java Web 开发 实例 大 全 (基础 卷 ) 
设计 过 程 


(1) 新 建 index.jsp 页 ， 在 该 页 的 <scrip 人 标签 中 编写 验证 日 期 是 否 合法 的 JavaScript 方法 ， 关 键 代码 如 下 : 
function checkDate(dateStr) { 
if(dateStr—""||dateStr—null) { 
return false: 
het 
if(dateStr indexOf("-")!=-D){ 
var dateArr = dateStrsplit("-"): 
varyear=dateAn[0]; /提取 年 份 
varmonth = dateArm[1]; /提取 月 份 
varday= dateArr[2}: /提取 日 
// 如 果 年份 、 月 份 、 日 期 不 是 数字 或 者 <=0， 则 返回 false 
if(isNaN(year)llyear<=0){ 
return false; 
} 
if(isNaN(month)lImonth<=0|lmonth>12){ 
return false; 
} 
if(isNaN(day)llday<=0llday>3D{ 
return false: 


} 
/年 份 能 被 4 整除 并 且 不 能 被 100 整除 ， 或 者 能 被 400 整除 ， 则 为 关 年 
if((year964 一 0&c&year9%6100!=0)|(year9e400 一 0)){ 
if(month 一 2){// 国 年 的 2 月 
if(day>29){ 
return false; 
} 


} 
j}else{/ 不 是 半年 的 2 月 
这 month 一 2){ 
if(day>28){ 
return false; 
} 


} 
} 
/1、3、5、7、8、10、12 月 份 为 31 天 


var ml = new Array(1,3,5,7,8,10,12); 
for(var i=0:i<ml.length:i++H){f 


这 parseInt(month) 一 ml[i){ 
这 day>31){ 
return false: 
} 
} 


} 

/4、6、9、11 月 份 为 30 天 
Var m2 = new ArTay(4.6.9.11): 
for(var j=0:j<m2.length:j++){ 


if(parseInt(month)—nm2 [0D){ 
if(day>30){ 
return false: 
} 
} 
3 
yelse{ 
return false: 
} 
} 
return true: 


} 
(2) 编写 表单 提交 按钮 的 onClick 事件 调用 的 JavaScript 方法 , 在 该 方法 中 调用 验证 日 期 的 方法 checkDate0， 
验证 成 功 则 提交 表单 ， 否 则 弹出 验证 失败 的 提示 信息 ， 关 键 代码 如 下 : 


function checkO{ 
var mydate = document.getElementById("mydate"): 
if(checkDate(mydate.value)){ 
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document getElementById("dateForm").submitO: 
Jelse{ 
if(mydate.value—""|imydate.value—nul) { 
alert(" 请 输入 日 期 ! "); 
mydatefocus0: /日 期 文本 框 获得 焦点 
Teturn : 


} 
mydate.focus(); 
alert(" 您 输入 的 日 期 格式 不 正确 ! "); 


} 
. 


图 秘笈 心 法 


根据 本 实例 ， 读 者 可 以 在 会 员 或 用 户 注册 页 面 中 判断 输入 的 生日 是 否 正 确 ， 也 可 以 在 日 期 型 数据 查询 页 面 
中 判断 输入 的 日 期 是 否 正确 。 


图 实例 说 明 
在 实际 的 开发 过 程 中 ， 经 常 需要 判断 用 户 提交 的 表单 中 某 个 元 素 的 值 是 否 为 空 ， 还 有 一 种 情况 是 表单 中 所 
有 元 素 的 值 都 不 多 许 为 空 。 本 实例 将 介绍 一 种 简单 有 效 的 判断 表单 中 所 有 元 素 是 否 为 空 的 方法 。 运 行 本 实例 ， 
如 图 9.3 所 示 ， 如 果 在 表单 中 没有 输入 信息 ， 单 击 “提交 ”按钮 将 弹出 提示 信息 。 
留言 湾 


留言 人 : 
留言 标题 : 


留言 内 容 : 


图 93 检查 表单 元 素 的 值 是 否 为 空 
图 关键 技术 


本 实例 主要 是 在 JavaScript 中 通过 循环 form 对 象 的 elements 属性 来 实现 的 。 form 对 象 的 elements 属性 也 就 
是 页 面 中 form 表单 的 所 有 元 素 的 数组 ， 例 如 ，form.elements[0] 表 示 表 单 第 一 个 元 素 对 象 ，form.elements[n] 表 示 
表单 第 n 个 元 素 对 象 。 
图 设计 过 程 
(1) 新 建 index.jsp 表单 页 ， 该 页 的 表单 中 包含 3 个 不 允许 为 空 的 元 素 和 一 个 “提交 ”按钮 ， 并 且 需 要 定义 
一 个 表单 的 id 属性 值 ， 关 键 代码 如 下 : 
<form action="" id="myform’> 
<table align—"center > 
<tr> 
<td> 留 言 人 : </td> 
<td> 
<input type="text"name= "lessageUser"title=" 廊 齐 人 必 
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<ftd> 


<td> 留 言 标题 : </td> 
<td> 


<input type="tert"name= "messageTitle"title=" 房 齐 灰 是 > 
<htd> 


4 


<td> 留 言 内 容 : </td> 
<td> 


<textarea rows="8" cols="4"title=" 房 高 内 蓉 "></textarea> 


<htd> 
< 
<t> 
<td align="center" colspan="2"> 
<input type="button”" value=" 臣 区" onclick="check0"> 
<ltd> 
<ltr> 
</table> 
</form> 
(2) 在 该 页 的 <script> 标 签 中 编写 验证 表单 元 素 的 值 不 允许 为 空 的 方法 ， 关 键 代码 如 下 : 
function checkO{ 
var myform = document.getElementById("myform"); // 获 得 form 表单 对 象 
for(var i=0;i<myform.length:i++){ /循环 form 表单 
if(myform.elements[i].value—""){ // 判 断 每 一 个 元 素 是 否 为 空 
alert(myform.elements[i].title+" 不 能 为 空 ! "); 
myform.elements[i].focusO: // 元 素 获得 焦点 
return ; 
; } 
myform.submitO; 
} 
图 秘笈 心 法 


在 JavaScript 中 ，form 表单 对 象 的 elements 属性 的 value 属性 表示 指定 元 素 的 值 ，name 属性 表示 指定 表单 
元 素 的 名 称 ，title 属性 表示 表单 元 素 的 标题 。 


初级 
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坟 实用 指数 ， 庚 朗 友 去， 


图 实例 说 明 


在 网 站 中 填写 注册 信息 时 ， 有 时 可 能 会 将 数字 类 型 的 数据 填写 错误 。 本 实例 将 介绍 如 何 验证 表单 中 某 个 元 
素 的 值 是 否 为 数字 ， 实 例 运行 效果 如 图 9.4 所 示 。 
用 户 注册 


9.4 ”验证 是 否 为 数字 
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图 关键 技术 


验证 是 否 为 数字 主要 使 用 的 是 JavaScript 的 内 置 函数 isNaNO。 该 函数 接收 一 个 字符 串 类 型 的 参数 ， 如 果 该 
参数 不 是 数字 ， 则 isNaN0 方 法 返回 tue， 和 否则 返回 false。 


图 设计 过 程 
(1) 新 建 用 户 注册 表单 页 indexjsp， 该 页 中 包含 一 个 用 户 注册 信息 的 表单 ， 关 键 代码 如 下 : 


<form action=""id="myform’> 
<table align="center ”> 
<t> 
<td> 用 户 名 : <ftd> 
<td><input type="text” id="name"></td> 
<t> 
<tr> 
<td> 密 码 : </td> 
<td><input type="password” id="pwd"></td> 
<t> 
<t> 
<td> 确 认 密码 : </td> 
<td><input type="password” id="pwd1"></td> 
</tr> 
<t> 
<td> 性 别 : <td> 
<td> 


<input type="radio” name="sex” id="man" value="m"/> 男 
<input type="radio" name="sex"” id="woman”" value="7" /> 女 
</td> 
<t> 
<t> 
<td> 年 龄 ，</td> 
<td><input type="text" id="age”></td> 
<t> 
<t> 
<td align="center" colspan="2"> 
<input type="button" value=" 趣 交 " onclick="check0"> 
</td> 
<t> 
</table> 
form> 


(2) 在 index.jsp 页 的 <script> 标 签 中 编写 表单 提交 按钮 的 onClick 事件 所 调用 的 JavaScript 方法 。 在 Java 
Script 方法 中 获得 表单 中 的 年 龄 文本 框 的 值 ， 然 后 判断 年 龄 是 否 为 数字 ， 如 果 是 数字 则 提交 表单 ， 否 则 弹出 提示 
信息 ， 关 键 代码 如 下 : 

function checkO{ 
Var age = document.getElementById("age"): 
if(age.value—nullllage.value—""){ 
alert(" 请 输入 年 龄 !"); 
age.focus(); 
return: 


} 

if(isNaN(age.value)){ 
alert(" 年 龄 必须 为 数字 ! "); 
age.focus0; 
Teturn: 


} 
document.getElementById("myform").submit|: 


图 秘笈 心 法 
在 JavaScript 中 ， 常 常 需要 通过 isNaNO 函 数 来 验证 表单 元 素 的 值 是 否 为 数字 ， 因 此 读者 应 该 掌握 该 函数 的 
含义 和 用 法 。 
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实用 指数 : 去 丰 二 太 


图 实例 说 明 

在 一 些 网 站 的 用 户 注册 的 表单 或 其 他 表单 中 ， 经 常会 包含 一 个 输入 E-mail 地 址 的 文本 框 。 如 果 用 户 将 注册 
密码 丢失 或 忘记 时 ， 需 要 提交 密 保 问题 来 找 回 密码 ， 如 果 密 保 问题 正确 ， 网 站 服务 器 会 发 一 份 带 有 用 户 密码 的 
E-mail 给 用 户 ， 因 此 一 个 正确 的 E-mail 地 址 非常 重要 。 本 实例 将 介绍 如 何 通过 JavaScript 的 正则 表达 式 来 验证 
E-mail 地 址 是 否 正确 。 运 行 本 实例 ， 如 图 9.5 所 示 ， 输 入 用 户 注册 信息 ， 在 最 后 的 E-mail 地 址 中 输入 一 个 错误 
的 地 址 ， 会 弹出 E-mail 地 址 错误 的 提示 信息 。 


用 户 注册 
用 户 首 : Tenenbor 
者 码 ; Oo 
顽 认 窗 玛 ; [LL 
竹 州 ; ER A 
年 芥 : 26 


密码 提示 问题 ; 你 喜欢 吃 的 水 果 是 人 
密码 提示 营 这 : 甘 采 桂子 
E-mail: test 


区 加 


rm 


图 9.5 验证 E-mail 是 否 正确 

图 关键 技术 

本 实例 主要 是 应 用 JavaScript 的 正则 表达 式 来 实现 的 ， 验 证 E-mail 地 址 的 正则 表达 式 如 下 : 

var regExpression = Aw+([-+-]\w+)*@\Wwt([- wt)*\ wt J wt) +/; 

正则 表达 式 的 结构 以 正 斜 线 “/” 开 头 和 结尾 ， 一 个 正则 表达 式 就 是 由 普通 字符 (如 字符 a 一 z) 以 及 特殊 字 
符 〈 称 为 元 字符 ) 组 成 的 文字 模式 。 该 模式 描述 在 查找 文字 主体 时 待 匹 配 的 一 个 或 多 个 字符 串 。 正 则 表达 式 作 
为 一 个 模板 ， 将 某 个 字符 模式 与 所 搜索 的 字符 串 进行 匹配 。 常 用 的 元 字符 及 其 在 正则 表达 式 上 下 文中 的 行为 的 
说 明 如 表 9.1 所 示 。 

表 9.1 常用 的 元 字符 及 其 在 正则 表达 式 上 下 文中 的 行为 的 说 明 
说 明 

将 下 一 个 字符 标记 为 一 个 特殊 字符 ， 或 一 个 原 义 字符 ， 或 一 个 后 向 引用 ， 或 一 个 八进制 转 义 符 。 例 如 ，m' 
匹配 字符 和 "。'' 匹配 一 个 换行 符 。 序 列 \ 匹配 ， 而 \"” 则 匹配 "( 
匹配 输入 字符 串 的 开始 位 置 。 如 果 设 置 了 RegExp 对 象 的 Multiline 属性 , ^ 也 匹配 \' 或 \r' 之 后 的 位 置 
匹配 输入 字符 串 的 结束 位 置 。 如 果 设 置 了 RegExp 对 象 的 Multiline 属性 ，$ 也 匹配 "nm' 或 \r' 之 前 的 位 置 
匹配 前 面 的 子 表达 式 零 次 或 多 次 。 例 如 ，zo* 能 匹配 "z" 以 及 "zoo"。 * 等 价 于 {0,} 
匹配 前 面 的 子 表达 式 一 次 或 多 次 。 例 如 ，'zot' 能 匹配 "zo” 以 及 "zoo"， 但 不 能 匹配 "z"。+ 等 价 于 {1,} 
匹配 前 面 的 子 表达 式 零 次 或 一 次 。 例 如 ，"do(es)?” 可 以 匹配 "do" 或 "does” 中 的 "do”。? 等 价 于 {0.1} 
nn 是 一 个 非 负 整数 。 匹 配 确定 的 n 次 。 例 如 ，'o{2}' 不 能 匹配 "Bob" 中 的 'o', 但 是 能 匹配 "food" 中 的 两 个 
于是 一 个 非 负 整数 。 至 少 匹 配 次。 例如 , 'o{2.}' 不 能 匹配 "Bob” 中 的 '0', 但 能 匹配 "foooood" 中 的 所 有 o。 
"ofl.} 等 价 于 'ot'。'o{f0.}" 则 等 价 于 'o* 
m 和 7 均 为 非 负 整数 ， 其 中 <=m。 最 少 匹配 次 且 最 多 匹配 m 次 。"o{1.3}" 将 匹配 "fooooood" 中 的 
前 3 个 o。'o{0.1}' 等 价 于 'o?'， 请 注意 在 逗号 和 两 个 数 之 间 不 能 有 空格 
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续 表 
字符 说 明 
匹配 除 "\n" 之 外 的 任何 单个 字符 。 要 匹配 包括 "wm 在 内 的 任何 字符 ， 请 使 用 像 [.\n]' 的 模式 
匹配 一 个 单词 边界 , 也 就 是 指 单词 和 空格 间 的 位 置 。 例如, 'er\b' 可 以 匹配 "never" 中 的 'er', 但 不 能 匹配 "verb" 


\b 
中 的 'er' 
B 匹配 非 单 词 边界 。'erB' 能 匹配 "verb" 中 的 'er， 但 不 能 匹配 "never" 中 的 'er 
Yd 匹配 一 个 数字 字符 。 等 价 于 [0-9] 
D 匹配 一 个 非 数 字 字符 。 等 价 于 [^0-9] 
¥f 匹配 一 个 换 页 符 。 等 价 于 \x0c 和 \cL 
\n 匹配 一 个 换行 符 。 等 价 于 \x0a 和 \cJ 
Yr 匹配 一 个 回 车 符 。 等 价 于 \x0d 和 \eM 
's 匹配 任何 空白 字符 ， 包 括 空 格 、 制 表 符 、 换 页 符 等 。 等 价 于 [ fn\ntv] 
\S 匹配 任何 非 空白 字符 。 等 价 于 [^ \fnrvtvv] 
上 匹配 一 个 制 表 符 。 等 价 于 \x09 和 \cI 
My 匹配 一 个 垂直 制 表 符 。 等 价 于 \x0b 和 \cK 


Ww 匹配 包括 下 划 线 的 任何 单词 字符 。 等 价 于 '[A-Za-z0-9 】 

\W 匹配 任何 非 单词 字符 。 等 价 于 '[^A-Za-z0-9 了 
匹配 n, 其 中 n 为 十 六 进 制 转 义 值 。 十 六 进 制 转 义 值 必 须 为 确定 的 两 个 数字 长 。 例如, \x41' 匹 配 "A"。\x041" 
则 等 价 于 "x04' & "1"。 正 则 表达 式 中 可 以 使 用 ASCII 编码 
标识 一 个 八进制 转 义 值 或 一 个 后 向 引用 。 如果 \n 之 前 至 少 有 n 个 获取 的 子 表达 式 , 则 n 为 后 向 引用 ; 否则 ， 
如 果 n 为 八进制 数字 (0~7) ， 则 1n 为 一 个 八进制 转 义 值 


图 设计 过 程 
新 建 用 户 注 册 表 单 页 indexjsp， 在 该 页 中 添加 <scripf> 标 签 ， 然 后 在 <script> 中 编写 验证 E-mail 地 址 是 否 正 
确 的 JavaScript 函数 , 在 该 函数 中 使 用 了 JavaScript 内 置 函数 test0, 该 函数 会 测试 字符 串 的 模式 是 否 与 正则 表达 
式 的 模式 相 匹 配 ， 如 果 匹 配 ，test0 函 数 返 回 tme， 否 则 返回 false， 关 键 代码 如 下 : 
function checkEmailO{ 
Var email = document. getElementById("email"); 
if(email.value—nullllemail.value—""){ 1/ 判断 文本 框 是 否 为 空 
alert(" 请 输入 E-mail 地 址 ! ");: 
email.focus(); 


return: 


regExpression =/\w+([-+.] w+)*@\w+([-.J wt)*\ w+([-. wt)*/; 

if(!regExpression.test(email.value)){ /1/ 通 过 test0 函 数 测试 字符 串 是 否 与 表达 式 的 模式 匹配 
alert(" 您 输入 的 E-mail 地 址 不 正确 ! "); 
emailfocusO: /使 文本 框 获得 焦点 
return; 

} 

document.getElementById("myform").submitO: 


} 
在 验证 字符 串 是 否 与 正则 表达 式 的 模式 匹配 时 ， 除 了 以 上 方法 中 使 用 的 test0 函 数 ， 还 可 以 使 用 search0 函 
数 ，search0 函 数 指明 是 否 存 在 相应 的 匹配 。 如 果 找 到 一 个 匹配 ，search0 函 数 将 返回 一 个 整数 值 ， 指 明 这 个 匹配 
距离 字符 串 开 始 的 偏 移 位 置 ， 如 果 没 有 找到 匹配 ， 则 返回 -1， 关 键 代码 如 下 : 
function checkEmailO{ 
var email = document. getElementById("email"): 
if(email.value—nullllemail. value—""){ 1/ 判断 文本 框 是 否 为 空 
alert(" 请 输入 E-mail 地 址 ! "); 
emailfocus0: 


return; 
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} 
Var regExpression =/\w+([-+.J w+)*@\Ww+([-.J wt)* w+ (Jw )*/: 
var flag = email.value.search(regExpression); 
if(flag—-D{ 
alert(" 您 输入 的 E-mail 地 址 不 正确 ! "); 
email focus(); 
return; 
} 
document.getElementById("“myform").submitO); 


} 
图 秘笈 心 法 


在 实际 应 用 中 ， 经 常 需要 通过 正则 表达 式 来 验证 表单 数据 ， 因 此 ， 笔 者 希望 读者 能 够 掌握 常用 的 元 字符 在 
正则 表达 式 中 表示 的 含义 。 


实例 211 


国 实例 说 明 


本 实例 将 介绍 如 何 通过 JavaScript 的 正则 表达 式 来 验证 输入 的 电话 号 码 是 否 正 确 。 运 行 本 实例 ， 如 图 9.6 所 
示 ， 在 “固定 电话 ”文本 框 中 输入 一 个 错误 的 电话 号 码 ， 会 弹出 提示 信息 。 


添加 通讯 信息 
本 
性 败 : Ok 
4 
电 于 邮箱 : 
国志 电 活 0331-B876543211111 A rnin 
联系 地 直 ; er- 
玉 到 
图 9.6 验证 电话 号 码 是 否 正确 
图 关键 技术 
验证 电话 号 码 的 正则 表达 式 如 下 : 


var regExpression =/^(0\d{2.3}-)?(\d{7.8})(-(\d{3.}))?s/: 

该 表达 式 验 证 的 主要 是 国内 的 固定 电话 号 码 。 验 证 模式 为 :区 号 + 座机 电话 号 码 + 分 机 号 ,表达 式 中 的 “\d{2,3}” 
表示 2 位 或 3 位 的 0 一 9 的 数字 ， 所 以 前 面 加 “0” 表 示 3 位 或 4 位 的 区 号 (如 0431、010、0451),“\d{7,8}” 
表示 7 位 或 8 位 的 数字 。 有 关 元 字符 在 正则 表达 式 中 的 表示 行为 请 参考 实例 210 中 的 表 9.1 的 说 明 。 


图 设计 过 程 
(1) 新 建 添加 通讯 信息 的 表单 页 indexjsp， 关 键 代码 如 下 : 


<form action="" id="myform"> 
<table align="center ”> 
<t> 
<td> 姓 名 :</td> 
<td><input type="tfext” id="name’></td> 
<t> 


<td> 性 别 : </td> 
<td> 


<input type="radio” name="sex” id="man” value="m" /> 男 
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<input type="7adio" name="sex” id="woman” value=""/> 女 
<htd> 
< 
<t> 
<td> 年 龄 : </td><td><input type="text”"id="age”></td> 
<lt> 
<t> 
<td> 电 子 邮 箱 : </td><td><input type="text"id="email”></td> 
</t> 
<tr> 
<td> 固 定 电话 : </td><td><input type="text"id="telephone"></td> 


<td> 联 系 地 址 : </td><td><textarea rows="5" cols="30"></textarea></td> 


<t> 
<td align="center" col "2 
<input type="button" value=" 丰 交 " onclick="checkPhone0"> 
<td> 
<t> 
</table> 
</form> 
(2) 在 该 页 的 <serip 人 > 标签 中 编写 验证 电话 号 码 的 JavaSeript 函数 ， 如 果 验 证 成 功 则 提交 表单 ， 否 则 弹出 提 
示人 信息， 关键 代码 如 下 : 
function checkPhoneO{ 
Var telephone = document.getElementById("telephone"); 
var regExpression =/^(0\d{2,3}-)?0d{7.,8})(-Qd{3,}))?$/; 
if(!regExpression.test(telephone.value)){ 
alert(" 您 输入 的 固定 电话 有 误 !"); 
telephone.focus0: 
return; 


} 
document.getElementById("myform").submitO|; 
. 


图 秘笈 心 法 
根据 本 实例 的 实现 ， 读 者 可 以 实现 在 企业 客户 管理 系统 中 添加 客户 信息 时 验证 输入 的 联系 电话 是 否 合法 ， 
以 及 在 通讯 录 管 理 系统 中 添加 讯 友信 息 时 验证 输入 的 电话 号 码 。 


实用 指数 : 信友 廊 究 : 
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图 实例 说 明 
在 网 站 中 注册 账号 或 其 他 操作 时 ， 可 能 需要 填写 个 人 的 手机 号 码 ， 为 了 数据 的 有 效 性 ， 需 要 对 填写 的 手机 
号 码 进行 验证 。 本 实例 将 介绍 如 何 通过 正则 表达 式 来 验证 手机 号 码 是 否 正 确 ， 运 行 结 果 如 图 9.7 所 示 。 


添加 通讯 信息 


手机 导 码 。 1391234567 


凌云 


9.7 ”验证 手机 号 码 是 否 正确 
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图 关键 技术 


验证 手机 号 码 的 JavaScript 正则 表达 式 如 下 : 

86)?((L3vdf9)115[0.1.2.3.5.6.7.8.9]df8))K18[0.5.6.7.8.9]vdfSD)SA 

该 正则 表达 式 是 根据 目前 的 手机 号 段 定义 的 , 目前 的 手机 号 段 包括 : 130 一 139、150 一 159 (除了 154 之 外 )、 
180、185 一 189。 


图 设计 过 程 


新 建 添加 通讯 信息 的 表单 页 ndexjsp， 在 该 页 中 编写 验证 手机 号 码 是 否 正确 的 正则 表达 式 ， 关 键 代码 如 下 : 
function checkPhoneO{ 
var mobileNo = document.getElementById("mobileNo"); 
var exp =/^(86)?((13\d{9)I(15[0,1,2,3,5,6,7,8.9]\d{8})|(18[0.5.6.7,8.9Nd{8}))S/:; 
if(!exp.test(mobileNo.value)) { 
alert(" 您 输入 的 手机 号 码 有 误 !"); 
ImobileNo.focus0: 
return; 


} 
document.getElementById("myform'").submitO: 


} 
国 秘笈 心 法 

在 验证 字符 串 是 否 符合 指定 的 正则 表达 式 模式 时 ， 除 了 使 用 test0 方 法 ， 还 可 以 使 用 search0 方 法 判断 字符 
串 是 否 匹 配 正 则 表达 式 模式 。 如 果 找到 一 个 字符 串 匹配 正则 表达 式 ，search0 方 法 将 返回 一 个 整数 值 ， 指 明 这 个 
匹配 距离 字符 串 开始 的 偏 移 位 置 ， 如 果 没 有 找到 匹配 ，search0 方 法 返回 -1。search0 方 法 的 语法 结构 如 下 : 

stringObj.search(rgExp) 

参数 说 明 

@ stringObj: 必 选 参数 。 要 被 判断 的 字符 串 文字 或 String 对 象 。 

@ rgExp: 必 选 参数 。 包 含 正则 表达 式 模式 和 可 用 标志 的 正则 表达 式 对 象 。 


图 实例 说 明 


在 Web 应 用 开发 过 程 中 ， 有 些 表单 元 素 中 限制 用 户 输入 的 数据 必须 为 汉字 ， 如 用 户 的 真实 姓名 。 本 实例 将 
介绍 如 何 验证 用 户 输入 的 字符 串 是 否 为 汉字 ， 和 运行 结果 如 图 9.8 所 示 。 


用 户 注册 


亲自 网 页 的 湛 生 


A citeTIEN ,2 汉字 ! 


CJ 


9.8 ”验证 字符 串 是 否 为 汉字 
图 关键 技术 


验证 字符 串 是 否 为 汉字 的 正则 表达 式 如 下 : 
var regExpression = /[\u4E00-\u9FASY/: 
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在 该 表达 式 中 “4E00” 和 “9FA5” 代 表 汉 字 的 Unicode 编码 ， 常 用 汉字 的 Unicode 编码 范围 在 “4E00” 和 
“9FA5” 之 间 。 


力 设计 过 程 
新 建 用 户 注 册页 indexjsp， 在 该 页 的 <scripP> 标 签 中 编写 验证 字符 串 是 否 为 汉字 的 JavaScript 函数 ， 关 键 代 
码 如 下 : 


function checkRealNameO{ 
Var realName = document.getElementById("realName"); 
Var regExpression = ee 
if(!'regExpression.test(realName.value,) 
at 你 输入 的 黄 实 从 名 不 正确 ， 必须 为 汉字 ! "); 
TealName.focus0O: 
return; 


} 
i document.getElementById("myform").submitO: 


图 秘笈 心 法 


根据 本 实例 ， 读 者 可 以 实现 限制 在 线 订 单 中 的 联系 人 姓名 必须 为 汉字 ， 限 制 进 销 存 管理 系统 中 的 经 手 人 、 
联系 人 字段 必须 为 汉字 。 


图 实例 说 明 
在 一 些 网 站 的 会 员 注册 或 其 他 需要 填写 身份 证 号 码 的 表单 中 ， 需 要 对 身份 证 号 码 进行 有 效 性 验证 。 本 实例 
将 介绍 如 何 通过 正则 表达 式 来 验证 身份 证 号 是 否 有 效 ， 运 行 结 果 如 图 9.9 所 示 。 


添加 通讯 信息 


A stsnia! 
电 千 邮箱: 


身份 证 号 大; 22012319861250201 


民 下 地 地: 


图 9.9 验证 身份 证 号 码 是 否 有 效 


图 关键 技术 


目前 有 效 的 身份 证 号 有 两 种 编码 规则 , 分 别 是 15 位 的 编码 和 18 位 的 编码 ,15 位 的 身份 证 号 码 的 规则 是 1985 
年 制订 的 ， 在 1999 年 国家 对 新 发 行 的 身份 证 号 码 规则 进行 了 修改 ,由 15 位 改 为 18 位 ， 主 要 是 把 号 码 中 的 出 生 
日 期 的 两 位 年 份 (yy) 改 为 4 位 年 份 (yyyy)。 下 面 分 别 介绍 这 两 种 身份 证 号 码 的 编码 规则 。 

(1) 15 位 的 身份 证 号 。 如 220122850912213， 需 要 遵循 以 下 规则 : 

口 1~6 位 为 地 区 代码 ，1、2 位 数字 为 各 省 级 政府 的 代码 ，3、4 位 数字 为 地 市 级 政府 的 代码 ，5、6 位 数 

字 为 县 、 区 级 政府 的 代码 。 
口 7 一 12 位 为 身份 证 持 有 人 的 出 生年 月 日 (yymmdd)。 
口 ”13 一 15 位 为 顺序 号 ， 并 能 够 判断 性 别 。 
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(2) 18 位 的 身份 证 号 码 。 如 220122198410222218， 需 要 遵循 以 下 规则 : 
1 一 6 位 为 地 区 代码 ， 与 15 位 的 身份 证 号 码 前 6 位 含义 相同 。 
7 一 14 位 为 出 生年 月 日 (yyyymmdd)。 
15 一 17 位 为 顺序 码 ， 为 县 、 区 级 政府 所 辖 派 出 所 的 分 配 码 。 
第 18 位 为 校 验 码 ， 通 过 复杂 的 公式 算出 。 校 验 码 是 1 一 10 之 间 的 数字 ， 由 于 不 能 用 10 作为 校 验 码 ， 
所 以 用 义 代 替 。 


图 设计 过 程 
(1) 新 建 index.jsp 页 ， 在 该 页 中 编写 验证 身份 证 号 码 是 否 有 效 的 JavaScript 函数 ， 关 键 代码 如 下 : 


function checkIDCardO{ 
var IDCard = document.getElementById("IDCard"); 
/验证 15 a 
varregIDCard_15 一 人 [1-9Jdf7J((O)IGI[O-2D)([ollI2Jd3[o-1DMd3}S/; 
/验证 18 位 身 从 证 号 码 
VarregIDCard_ 18 = 人 [1- OO 2DXAoN PIIo Da Dds 
if(IDCard.value.length!=15&&:IDCard.value.length!=1: 
alert(" 您 输入 的 身份 证 号 码 长 度 不 对 ， 吕 给 入， 15 位 或 18 位 的 身份 证 号 码 ! "); 
IDCard .focusO; 
return; 
jelsef 
ifIDCard ,valuelength 一 15){ /验证 15 位 的 身份 证 号 码 
if(!regIDCard_15.test(IDCard.value)){ 
alert(" 您 输入 的 身份 证 号 码 有 误 ! "); 
IDCard.focus0; 


OOO DO 


return; 
; } 
if(IDCard.value.length—18){ i i eh 


if(!regIDCard_18.test(IDCard.value) 
cy 全 输入 的 身份 证 号 码 有 名 "); 
IDCard focus0: 


return: 
} 
和 
document.getElementById("myform'").submitO: 
(2) 在 web.xml 中 配置 CounterServlet 类 ， 关 键 代码 如 下 : 
<servlet> 
<servlet-name>CounterServlet</servlet-name> 
<servlet-class>com.lh.servlet.CounterServlet</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>CounterServlet</servlet-name> 
<url-pattern>/counter</url-pattern> 
</servlet-mapping> 


国 秘笈 心 法 

本 实例 在 验证 身份 证 号 码 时 ， 只 是 验证 其 基本 逻辑 规则 ， 并 没有 具体 验证 身份 证 号 码 中 的 前 6 位 的 地 区 代 

码 是 否 正确 ， 以 及 表示 出 生日 期 的 号 码 是 否 符合 日 期 规则 。 读 者 可 以 在 本 实例 实现 的 基础 上 ， 实 现 验证 身份 证 
号 码 的 前 6 位 是 否 符合 地 区 代码 的 规则 以 及 出 生日 期 的 规则 。 具 体 的 地 区 代码 可 以 查找 相关 资料 。 

初级 | 

实用 指数 : 食 雪 让 他 : 


图 实例 说 明 
在 Web 应 用 的 车 辆 管理 的 功能 模块 中 ， 在 添加 车 辆 信息 时 ， 需 要 对 车 牌号 码 进行 有 效 性 验证 。 本 实例 将 介 
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绍 如 何 通过 JavaScript 正则 表达 式 来 验证 车 牌号 码 是 否 有 效 ， 程 序 运 行 结 果 如 图 9.10 所 示 。 
添加 牛 辆 信息 


车 有 号码; 有 A-1234A 

车 欧 贡 剖 ;重庆 择 

证 多 品牌- | 人 有 SEE 
| 

备注 : 


rT 


: 


9.10 ”验证 车 牌号 码 是 否 有 效 


图 关键 技术 


本 实例 实现 验证 的 是 国内 的 非 军用 车 的 车 牌号 码 ， 验 证 规则 如 下 : 
(1) 第 一 个 字符 必须 为 汉字 。 这 个 汉字 代表 全 国 各 省 、 自 治 区 、 直 辖 市 名 称 的 简写 。 
(2) 第 二 个 字符 必须 为 英文 字母 。 代 表 各 省 、 自 治 区 、 直 辖 市 内 的 不 同 的 市 级 编号 ， 如 吉林 省 的 长 春 市 字 
母 为 A、 吉 林 市 为 B、 松 原市 为 J 等 。 
(3) 第 3 个 字符 为 分 隔 符 “-”。 
(4) 4 一 8 位 为 数字 和 字母 的 组 合 。 第 4 位 和 第 5 位 可 能 为 数字 或 字母 ， 例 如 ， 吉 A-E5678、 吉 A-ER123、 
吉 A-6A789、 吉 A-66A78、 吉 A-888888 等 。 第 8 位 可 能 为 字母 ， 如 吉 A-1001A。 
图 设计 过 程 
新 建 添加 车 辆 信息 的 表单 页 index:jsp， 在 该 页 的 <scrip 人 标签 中 编写 验证 车 牌号 码 是 否 有 效 的 JavaScript 函 
数 ， 该 函数 主要 验证 非 军用 车 牌号 码 ， 并 且 验 证 车 牌号 sa 关键 代码 如 下 : 
function checkNumberPlateO{ 
var numberPlate = document.getElementById("numberPlate"); 
Var shortProvince = new Array (" 京 "," 沪 "" 津 "" 渝 "" 寓 "," 亚 "," 蒙 " 
"这 "" 吉 "" 黑 "" 苏 "," 浙 "," 皖 "." 国 "," 六 "," 重 "," 殊 湘 "" 粤 "…," 桂 ", 
" 琼 "" 川 "" 贵 "" 云 "," 藏 "" 陕 "," 甘 "," 青 "" 宁 "" 新 "); 
ifnumberPlate value 一 ""|InumberPlate value 一 nulD){ // 验 证 是 否 为 空 
alert(" 请 输入 车 牌号 码 !"); 


numberPlate.focus(); 
return; 
} 
var str = nnmberPlate value.substring(0.1): /截取 车 牌号 的 首 字符 
var res = false; 
for(var i=0:i<shortProvince.length:i++){ /循环 判断 输入 的 车 牌号 首 字符 是 否 在 指定 的 省 份 内 
if(str—shortProvince[i] .toStringO){ 
res=true; // 在 指定 简写 省 份 名 称 范围 内 


} 


} 
/验证 普通 的 车 牌号 码 ， 如 吉 A-E1234、 吉 A-EE123、 吉 A-12345、 吉 A-6A123 
varTegExpressionl = /^[\u4e00-\u9fas][a-zA-Z]-[0-9A-Za-z]{3}\d{2}$/; 
/验证 车 牌号 尾 号 为 字母 的 表达 式 
var regExpression2 = /^[\u4e00-\n9fas][a-zA-Z]-\d{4} [a-zA-Z]$/: 
1/ 判断 用 户 输入 的 车 牌号 是 否 符合 指定 表达 式 的 规则 
if(!regExpressionl .test(numberPlate.value)&-&- 
!regExpression2.test(numberPlate.value)){ 
alert(" 您 输入 的 车 牌号 码 有 误 !"); 
Washes focus0: 


Jaue/ 果 符合 规则 判断 首 字符 是 否 为 各 省 级 名 称 的 简写 
if(!res){ 
alert(" 您 输入 的 车 牌号 码 有 误 ， 首 字符 无 效 ! "): 
numberPlate focusO; 


return: 
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} 
document.getElementById("myform").submitO: 


和 
国 秘笈 心 法 
于 车 辆 不 断 增多 ， 车 牌号 码 规则 可 能 也 会 随 之 改变 ， 本 实例 实现 的 只 是 车 牌号 码 的 暂时 规则 ， 而 并 非 最 
终 的 车 牌号 码 规则 ， 读 者 可 以 根据 具体 情况 来 修改 车 牌号 码 的 正则 表达 式 规则 。 


实例 216 


图 实例 说 明 
在 有 些 网 站 的 提交 表单 中 可 能 会 包含 用 户 输入 网 站 地 址 的 文本 框 ， 为 了 保证 数据 的 有 效 性 ， 需 要 对 网 站 地 
址 进行 合法 验证 。 本 实例 将 介绍 如 何 验 证 用 户 输 入 的 网 站 地 址 是 否 有 效 ， 运 行 效果 如 图 9.11 所 示 。 


用 户 注册 
开户 
窗 三 
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E-mail 
确定 
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9.11 ”验证 网 站 地 址 是 否 有 效 


图 关键 技术 


验证 网 站 域名 地 址 是 否 合法 是 通过 JavaScript 的 正则 表达 式 实 现 的 。 一 般 的 网 站 URL 地 址 可 能 是 一 个 中 地 
址 (如 192.168.10.16)、 域 名 (如 www.sina.com)、 域 名 的 简写 形式 (如 www.baidu.com， 可 以 写成 baidu) 等 。 
有 关 元 字符 在 正则 表达 式 中 的 表示 行为 请 参考 实例 210 中 的 表 9.1 的 说 明 ， 此 处 不 再 资 述 。 


图 设计 过 程 
新 建 indexjsp 表单 页 ,在 表单 中 包含 一 个 输入 网 站 URL 地 址 的 文本 框 , 然后 表单 的 “提交 ”按钮 的 onClick 
事件 会 调用 验证 输入 的 网 站 URL 是 否 有 效 的 JavaScript 函数 ， 该 函数 的 关键 代码 如 下 : 


function checkNetURLO{ 
var netURL = document.getElementById("netURL"): 
Var regStr = "^((httpslhttplfipirtsplmms)?://)" 
+ "(([0-9a-zA-Z_!~*0.&=+$9%-]+: )?[0-9a-zA-Z_!~*0.&=+$90-]H@)?" /ftp 的 user@ 


+ "(([0-9]{1.3}\.){3}[0-9]{1.3}" // 验 证 下 形式 的 URL， 如 192.168.10.16 
+ // 输 入 的 可 以 是 他 或 域名 
+ "([0-9a-zA-Z_!~*"0-]H\)*" /验证 域名 www. 
+ "([0-9a-zA-Z][0-9a-zA-Z-]{0.61))?[0-9a-zA-ZJ\” /验证 二 级 域名 
+ "[a-zA-2Z]{2,.6})(:[0-9]{1.4})?" /域名 中 可 能 包含 端口 
+ "((/? 
+" eg 0.:2:@R 一 HS.96#-]H)H2)3" 
var Te=new RegExp(regStr) /创建 正则 表达 式 对 象 
if(!re.test(netURL.value)): // 验 证 输入 的 字符 串 是 否 符合 正则 表达 式 规 则 
exo 信 输入 的 网 站 URL 地 址 有 误 ! 中 ; 
netURL focus0: 
return; 


} 
document.getElementById("myform").submitO: 
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国 秘笈 心 法 

于 本 实例 中 编写 的 正则 表达 式 过 长 ， 所 以 在 编写 正则 表达 式 时 ， 并 没有 在 正则 表达 式 的 开始 位 置 以 及 结 
尾 使 用 斜 杠 “/” 而 是 使 用 “+” 连 接 符 生 成 一 个 长 字符 串 ， 这 个 长 字符 串 需要 通过 RegExp 对 象 转换 为 正则 表 
达 式 。 


图 实例 说 明 

在 Web 应 用 开发 或 者 网 站 开发 时 ， 经 常会 遇 到 限制 用 户 输入 数据 的 类 型 的 问题 ， 例 如 ， 表 示 “ 数 量 ” 的 文 
本 框 只 能 输入 正 整 数 ,“ 人 金额 ”文本 框 只 能 输入 数值 型 数据 。 本 实例 将 介绍 如 何 验证 用 户 输入 的 数量 和 金额 是 否 
正确 ， 运 行 结果 如 图 9.12 所 示 ， 当 用 户 输入 不 合法 的 金额 或 数量 时 ， 将 弹出 提示 对 话 框 ， 提 示 用 户 输入 错误 。 


添加 采购 信息 
用 内 年 号 
商品 十 称 
生产 三 东 
规格 ; 
第 从 123 元 
3 
到 下 
图 9.12 ”验证 数量 和 金额 
图 关键 技术 
答 证 文本 框 中 输入 的 数量 时 ， 应 该 限制 用 户 只 能 输入 正 整 数 ， 可 以 通过 正则 表达 式 来 验证 。 验 证 数量 的 正 
则 表达 式 如 下 : 
var regExp =/^[1-9]+(\d*)$/; // 验 证 数量 的 正则 表达 式 


验证 金额 时 , 应 该 限制 用 户 输入 的 金额 为 数值 型 数据 , 可 以 包含 小 数 部 分 , 可 以 通过 JavaScript 中 的 isNaNO 
方法 来 验证 ， 该 方法 返回 一 个 Boolean 值 ， 指 明 提供 的 值 是 否 是 保留 值 NaN (不 是 数字 )。 如 果 值 是 NaN， 那 么 
isNaN 函数 返回 tue， 和 否则 返回 false。 


图 设计 过 程 


(1) 新 建 index.jsp 页 ， 在 该 页 的 <script> 标 签 中 编写 验证 数量 和 金额 的 JavaScript 函数 ， 关 键 代码 如 下 : 
function checkInsertO){ 
var number = document.getElementById("number"); // 数 量 文本 框 对 象 
var price = document.getElementById("price”): /单价 文本 框 对 象 


var regExp2 = /^[1-9]+(\d*)$/; // 验 证 数量 的 正则 表达 式 
if(isNaN(price.value){ /验证 单价 是 否 为 数字 
alert(" 您 输入 的 单价 不 是 有 效 值 ! 
price focus0: 
return false: 


if(number. value!=null&&number.value!=""){ 
if(!regExp2.test(number.value)) { /验证 数量 是 否 符合 正则 表达 式 
alert(" 数 量 必须 为 正 整数 ! "): 
numberfocus0: 
Teturn false: 
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return true; 


} 
国 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 在 商品 订单 表单 中 验证 商品 的 数量 和 商品 的 价格 。 


图 实例 说 明 
本 实例 将 介绍 如 何 通过 JavaScript 正则 表达 式 , 来 验证 一 个 字符 串 是 否 以 指定 字符 开头 , 运行 结果 如 图 9.13 
所 示 。 


验证 字符 串 


地 特惠 的 把 去 半 符 ; 明日 
委 草 央 的 闻 御 申 : 。 唱 科 令 A rr HIF! 
[验证 | 


ME J 


图 9.13 验证 字符 趾 是 否 以 指定 字符 开头 
图 关键 技术 


验证 字符 串 是 否 以 指定 字符 开头 , 主要 通过 JavaScript 正则 表达 式 来 实现 , 与 前 面 讲解 的 实例 中 所 使 用 的 正 
则 表达 式 不 同 ， 本 实例 中 使 用 的 正则 表达 式 是 动态 改变 的 ， 写 法 如 下 : 

var startStr = document. getElementById("startStr").value; 

var regExp=eval("/^"+startStr+"/"); 

在 正则 表达 式 中 使 用 变量 时 ， 应 该 通过 JavaScript 提供 的 内 置 函数 eval0 来 动态 执行 。eval0 函 数 允 许 
JavaScript 源 代码 的 动态 执行 ， 也 就 是 说 首先 会 获得 变量 的 值 ， 然 后 再 将 整个 字符 串 组 合成 一 个 正则 表达 式 。 
国 设计 过 程 

(1) 新 建 index.jsp 页 ， 在 该 页 的 <scrip 亿 标签 中 编写 验证 字符 串 是 否 以 指定 字符 开头 的 JavaScript 函数 ， 关 
键 代码 如 下 : 

function checkStrO{ 

var startStr = document. getElementById("startStr").value: 

Var str = document.getElementById("str").value: 

Var regExp=eval("/^"+startStr+"/"); /1/ 使 用 eval0 方 法 使 JavaScript 动态 执行 
if(startStr—""){ /验证 输入 的 字符 串 是 否 为 空 


alert(" 请 输入 字符 串 的 起 始 字符 ! "); 
document getElementById("startStr”") focusO: 


Teturn false: 
. 
f(str—""){ // 验 证 输入 的 字符 串 是 否 为 空 
alert(" 请 输入 要 判断 的 字符 串 !"); 
document.getElementById("str").focusO: 
return false: 
} 
if(!regExp .test(str) { // 字 符 串 不 是 以 指定 字符 开头 
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alert(" 指 定 的 字符 串 不 是 以 ["+startStr+"] 开头 ! 7 
return false: 


jelsef /字符 串 是 以 指定 字符 开头 
alert(" 指 定 的 字符 串 是 以 ["+startStr+"] 开头 ! "); 
return true; 

} 

return true: 


和 
(2) 编写 表单 提交 按钮 的 onClick 事件 所 调用 的 方法 ， 在 该 方法 中 调用 验证 字符 串 是 否 以 指定 字符 开头 的 
函数 checkStr0， 如 果 该 函数 返回 tue， 则 提交 表单 ， 否 则 会 弹出 错误 提示 信息 ， 关 键 代码 如 下 : 


图 秘笈 心 法 


本 实例 实现 的 关键 是 在 JavaScript 中 使 用 eval0 方 法 ， 该 方法 允许 JavaScript 源 代 码 的 动态 执行 。 


图 实例 说 明 


在 一 些 表单 提交 之 前 ， 为 了 确保 提交 数据 的 有 效 性 ， 有 些 输入 文本 框 的 信息 是 需要 限制 长 度 的 。 例 如 ， 用 
户 注册 表单 中 的 用 户 名 长 度 ， 文 本 域 中 输入 的 字符 串 长 度 等 。 本 实例 将 介绍 如 何 限制 用 户 输入 的 字符 串 长 度 。 
运行 本 实例 ， 如 图 9.14 所 示 ， 在 “用 户 名 ”文本 框 中 输入 超过 10 个 字符 的 字符 串 ， 单 击 “ 注 册 ” 按 钮 时 ， 将 
弹出 提示 信息 。 


用 户 注册 
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图 9.14 ”限制 输入 字符 串 的 长 度 


图 关键 技术 


用 户 在 文本 框 中 输入 字符 串 时 ， 可 能 会 输入 包含 汉字 的 字符 串 ， 因 为 汉字 是 占 两 个 字 节 的 ， 所 以 在 计算 字 
符 串 的 长 度 时 ,使 用 JavaScript 的 String 对 象 的 length 属性 来 获取 字符 串 的 长 度 是 不 准确 的 。 应 该 使 用 String 对 
象 的 charCodeAtO 函 数 ， 该 函数 可 以 将 字符 串 中 的 指定 字符 转换 为 Unicode 编码 , 通过 字符 的 Unicode 编码 范围 
来 判断 字符 串 中 的 汉字 的 长 度 。 

图 设计 过 程 
(1) 新 建 用 户 注册 表单 页 ndexjsp， 在 该 页 的 <script> 标 签 中 编写 限制 输入 字符 串 长 度 的 JavaScript 函数 ， 
关键 代码 如 下 : 

7 

+ 限制 输入 字符 串 的 长 度 


*@ str: 要 判断 的 字符 串 
*@ limitLength: 限制 的 长 度 
it 
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function checkStrLength(str.limitLength){ 
var n=0; 1/ 该 变量 保存 字符 串 的 长 度 
for(var i=0:i<str.length:it+){ 
var code = str.charCodeAt(i); 。“// 获 得 每 个 字符 的 Unicode 值 
if(code>255){ 


if(n>limitLength){ // 如 果 字 符 串 的 长 度 大 于 限制 长 度 ， 返 回 false 


} 
(2) 编写 表单 提交 按钮 的 onClick 事件 所 调用 的 函数 ,在 该 函数 中 验证 输入 用 户 名 的 长 度 ， 关 键 代码 如 下 
function checkO{ 
var userName = document.getElementById("username").value; 
var limitNum = 10; 
if(userName—""){ 
alert(" 请 输入 用 户 名 ! "); 
eo 


} 
if(!checkStrLength(userName,10){ 
alert(" 您 输入 的 用 户 名 不 能 超过 "+limitNum+" 个 字符 ! "); 
return; 
} 
document.getElementById("myform").submit(); 


秘笈 心 法 


由 于 表单 数据 最 终 是 要 保存 在 数据 库 中 的 , 而 数据 库 中 保存 字符 串 类 型 数据 的 字段 长 度 是 根据 字 节 计算 的 ， 
例如 ， 在 MySQL 数据 库 中 某 个 信息 表 的 字段 类 型 为 varchar(10)， 那 么 这 个 字段 只 能 保存 5 个 中 文字 符 。 因 此 ， 
通过 JavaScript 计算 字符 串 长 度 时 ， 应 该 使 用 charCodeAt0 函 数 判断 字符 串 中 是 否 包含 中 文字 符 。 


sa 


国 实例 说 明 


在 Web 应 用 开发 过 程 中 ， 有 些 表单 数据 是 不 允许 包含 特殊 字符 的 。 本 实例 将 介绍 如 何 通过 JavaScript 来 验 
证 字符 串 是 否 包含 特殊 字符 ， 运 行 结果 如 图 9.15 所 示 。 
用 户 注册 
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图 9.15 验证 字符 串 是 否 包含 特殊 字符 
图 关键 技术 


本 实例 主要 通过 JavaScript 正则 表达 式 来 实现 。 验 证 特殊 字符 的 正则 表达 式 的 写法 如 下 : 
var regExpress = /MW\"\<>:&e=#]/: 


302 
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图 设计 过 程 
(1) 新 建 indexjsp 页 ， 在 该 页 中 编写 验证 字符 串 中 是 否 包含 特殊 字符 的 JavaScript 函数 ， 关 键 代码 如 下 : 


function checkEspecialCode(stD{ 
VarregExpress 一 人 VSS 1 /验证 特殊 字符 的 正则 表达 式 
if(regExpress.test(str){ // 测 试 字符 串 是 否 包含 指定 的 特殊 字符 
return false; 
} 
return true: 


(2) 编写 表单 提交 按钮 的 onClick 事件 所 调用 的 JavaScript 函数 ， 关 键 代 码 如 下 : 


alert(" 请 输入 用 户 名 ! "); 
‘document.getElementById("username").focus(); 
return; 


} 

if(!checkEspecialCode(userName)){ 
alert(" 您 输入 的 用 户 名 中 包含 无 效 字符 ! "); 
document.getElementById("username").focus(); 
return; 

} 

‘document.getElementById("myform").submitO|; 

} 


图 秘笈 心 法 
限制 输入 字符 串 不 能 包含 特殊 字符 的 目的 是 防止 SQL 注入 ， 因 此 通过 JavaScript 实现 限制 输入 的 字符 串 不 
允许 包含 特殊 字符 是 非常 有 必要 的 。 


实例 221 


实用 指数 : 食 食 福 食 | 


图 实例 说 明 
在 网 站 开发 过 程 中 ， 有 些 表单 中 的 信息 经 常会 限制 不 允许 包含 中 文字 符 。 本 实例 将 介绍 如 何 通过 JavaScript 
来 限制 输入 字符 串 中 不 允许 包含 中 文字 符 ， 运 行 效果 如 图 9.16 所 示 。 


用 户 注册 
腿 户 它 mingri 明 晤 
pb 乱用 疡 外包 中 文字 5! 
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图 9.16 限制 用 户 不 允许 输入 中 文字 符 


图 关键 技术 
本 实例 的 实现 主要 应 用 JavaScript 提供 的 excape0 方 法 。 该 方法 返回 一 个 包含 了 charstring 内 容 的 字符 串 值 
(Unicode 格式 )。 所 有 空格 、 标 点 、 重 音符 号 以 及 其 他 非 ASCI 字符 都 用 %xx 编码 代替 ， 其 中 xx 表示 该 字符 的 
十 六 进 制 数 。 例 如 ， 空 格 返 回 的 是 “%20”。 字 符 值 大 于 255 的 以 %ouxexexx 格式 存储 ， 而 大 于 255 的 表示 中 文字 
符 ， 所 以 ， 通 过 判断 转换 后 的 字符 串 是 否 包含 “%u” 就 能 够 知道 字符 串 中 是 否 包含 中 文字 符 。 
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图 设计 过 程 
(1) 新 建 index jsp 页 ， 在 该 页 中 编写 判断 字符 串 中 是 否 包含 中 文字 符 的 JavaScript 函数 ， 关 键 代码 如 下 : 


function checkCN(stn){ 
过 (escape(str).indexOf("9eu")<0){//indexOf0 方 法 查找 字符 串 是 否 包 含 "ww"， 如 果 不 包含 返回 -1 
return true; 
} else{ 
return false; 
} 
和 
(2) 编写 表单 提交 按钮 onClick 事件 调用 的 JavaScript 函数 ， 关 键 代码 如 下 : 
function checkO{ 
Var userName = document.getElementById("username").value; 
if(userName—""){ 
alert(" 请 输入 用 户 名 ! "); 
‘document.getElementById("“username").focus(); 
return; 


} 

if(!checkCN(userName)){ 
alert(" 用 户 名 不 允许 包含 中 文字 符 ! "); 
document.getElementById("username").focus(); 
return; 

} 


document.getElementById("myform").submitO; 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 限制 网 站 用 户 登录 时 ， 用 户 名 不 允许 包含 中 文 。 


9.2 字符 串 处 理 


字符 串 在 程序 中 的 应 用 非常 多 ， 是 程序 中 不 可 缺少 的 部 分 。 本 节 将 介绍 一 些 在 程序 中 常用 于 字符 串 处 理 的 
相关 实例 。 


图 实例 说 明 


在 开发 财务 或 与 金融 相关 的 网 络 管理 系统 时 ， 经 常会 涉及 金额 的 大 小 写 转换 问题 。 在 进行 账目 输入 时 ， 常 
采用 输入 小 写 金额 的 方式 方便 用 户 ， 但 是 它 可 能 存在 被 算 改 的 问题 ， 这 对 于 金融 系统 来 说 是 不 安全 的 ， 解 决 办 
法 是 将 用 户 输入 的 小 写 金额 转换 为 大 写 。 运 行 本 实例 ， 如 图 9.17 所 示 ， 输 入 小 写 金额 ， 单 击 “ 转 换 ” 按 钮 后 会 
转换 为 大 写 。 


金额 转 模 


请 锭 入 小 可 全 问 : 
123456 7 

钵 措 后 的 大 再 爹 靖 ; 

查 抬 系 万 佑 谋 嫂 甸 伍 拾 续 元 染 角 措 分 


EE 


9.17 小写 金 额 转换 为 大 写 金额 
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图 关键 技术 

本 实例 通过 使 用 JavaScript 的 实现 思路 如 下 : 

(1) 将 大 写 的 数字 和 单位 分 别 保存 在 两 个 字符 串 中 。 

(2) 去 除 用 户 输入 的 小 写 金 额 中 的 小 数 点 。 

(3) 根据 用 户 输入 的 小 写 金额 长 度 取出 该 字符 串 所 用 到 的 单位 。 

(4) 取出 小 写字 符 对 应 的 大 写字 符 ， 并 与 单位 组 合成 新 的 字符 串 ， 同 时 还 要 对 小 写 金额 中 存在 连续 多 个 0 
的 情况 进行 处 理 。 
图 设计 过 程 

(1) 首先 对 用 户 输入 的 小 写 金额 的 合法 性 进行 判断 ， 然 后 对 合法 数据 的 小 数位 数 进 行 控制 ， 再 调用 自 定义 
的 JavaScript 函数 将 小 写 金额 转换 为 大 写 金额 ， 关 键 代 码 如 下 : 


function convertO{ 
var money_num = document.getElementById("money_num").value; 
if(money_ num—""){ 
alert(" 请 输入 金额 !"); 
document.getElementById("money_num").focus(); 
return; 


} 

if(isNaN(money_num){ 
alert(" 请 输入 数字 类 型 的 金额 !"); 
return; 


} 
if(money_num>999999999999){ 


alert(" 您 输入 的 金额 不 能 大 于 9999999999991"); 


return; 


} 
/将 小 数 点 后 保留 两 位 小 数 
if(money_num.indexOf(".")>0){ 
Var decimalStr = money_num.split("."); 
if(decimalStr[1].length>2){ 
decimalStr[1]-=decimalStr[1].substr(0,2); 
} 


money_num = decimalStr[0]+"."+decimalStr[1]; 
} 


value=change(money_num); /调用 自 定义 函数 转换 
document.getElementById("money_cn").value=value; // 将 转换 后 的 值 赋 给 文本 框 
} 
(2) 将 小 写 金额 转换 为 大 写 金额 的 自 定义 JavaScript 函数 的 代码 如 下 : 
function change(str){ 
je-" 堆 可 款 参 肆 伍 陆 集 制 玖 ": /大 写 的 数字 〈0 一 9) 
cdw=" 万 任 佰 拾 亿 任 佰 拾 万 任 佰 拾 元 角 分 ": // 金 额 单位 
var newstring=(str*100).toStringO: // 将 金额 值 乘 以 100 
newstringlog=newstring.length; // 乘 以 100 之 后 的 金额 的 长 度 
newdw=cdw.substr(cdw.length-newstringlog); 
num0=0; /记录 零 的 个 数 
wan=0; // 记 录 万 位 出 现 的 次 数 
dxje="™"; // 记 录 大 写 金额 
for(m=1;m<newstringlog+1:mt+){ 
xzf-newstring.substr(m-1,1): 
dzf=je.substr(xzf.1): 
dw=newdw.substr(m-1.1): 
idzf 一 " 零 "){ 
人 
idw 一 " 亿 "){ 


jaseifdw 一 万"f 
dz 


wan=1; 
Jelse idw 一 元 ){ 


Jelse{ 
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dw—"™"; /记录 单位 


人 
tn 
if(newstring.substr(newstring.length-2)—"00"){ 
dxje=dxjet" 整 "; 
Jelse{ 
dxje=dxje; 
} 
return dxje; 
} 
图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 销售 单 中 销售 金额 的 大 小 写 转换 、 汇 款 金额 的 大 小 写 转换 以 及 物资 采用 单 中 金 
额 的 大 小 写 转换 。 


图 实例 说 明 


用 户 在 填写 提交 表单 时 ， 可 能 因为 误 操作 在 文本 框 中 输入 的 字符 串 的 开头 和 结尾 处 输入 了 空格 ， 而 服务 器 
端 又 不 想 获得 这 个 带 有 左右 空格 的 表单 信息 ， 因 此 在 表单 提交 之 间 应 该 对 用 户 输入 的 不 必要 的 空格 进行 处 理 。 
运行 本 实例 ， 如 图 9.18 所 示 ， 输 入 一 个 带 有 左右 空格 的 字符 串 ， 单 击 “ 去 掉 左 右 空格 ”按钮 后 ， 会 去 掉 字 符 串 
的 左右 空格 并 将 其 显示 在 “转换 后 的 字符 串 ” 文 本 框 中 。 


去 掉 字 符 串 左右 空格 


全 妨 入 半生 中 :于 到 
条 简 后 的 字 汪 囊 ; 明日 
E37 


图 9.18 去 掉 字符 串 左 右 空格 
图 关键 技术 


本 实例 主要 是 通过 JavaScript 正则 表达 式 和 JavaScript 中 的 replace0 方 法 实现 的 。 在 正则 表达 式 中 使 用 “\s” 
来 匹配 任何 空白 字符 ， 包 括 空格 、 制 表 符 、 换 页 符 等 。 验 证 字符 串 中 是 否 包含 左右 空格 的 正则 表达 式 如 下 : 

Var regExp =/(^\s*)|(s*$)/g: 

replace0 方 法 的 结果 是 一 个 完成 了 指定 蔡 换 的 stringObj 对 象 的 复制 ， 其 语法 结构 如 下 : 

stringObij.replace(rgExp. replaceText) 

参数 说 明 

@ stringObj: 要 执行 该 蔡 换 的 String 对 象 或 字符 串 文字 。 该 字符 串 不 会 被 replace0 方 法 修改 。 

@ rgExp: 为 包含 正则 表达 式 模式 或 可 用 标志 的 正则 表达 式 对 象 ， 也 可 以 是 String 对 象 或 文字 。 如 果 rgExp 
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不 是 正则 表达 式 对 象 ， 它 将 被 转换 为 字符 串 ， 并 进行 精确 的 查找 ;不 要 尝试 将 字符 串 转化 为 正则 表达 式 。 
目 IeplaceText: 是 一 个 String 对 象 或 字符 串 文字 ， 对 于 stringObj 中 每 个 匹配 rgExp 的 位 置 都 用 该 对 象 所 包 
含 的 文字 加 以 芋 换 。 


图 设计 过 程 
(1) 新 建 ndex.jsp 页 ， 编 写 去 掉 字 符 串 左右 空格 的 JavaScript 函数 ， 该 函数 返回 去 掉 空 格 后 的 字符 串 ， 关 
键 代码 如 下 : 
function trim(st?){ 
var regExp =/(^\s*)|Qs*$)/g; /验证 左右 空格 的 正则 表达 式 
str = strreplace(regExp,""); // 去 掉 字符 串 的 左右 空格 
return str; 
人 
(2) 编写 表单 按钮 onClick 事件 所 调用 的 JavaScript 自 定 义 函数 ， 再 将 去 掉 空 格 后 的 字符 串 赋 给 文本 框 ， 


关键 代码 如 下 : 
function convertO{ 
Var str = document.getElementById("str").value; 
(st—"){ 
alert(" 请 输入 字符 囊 !"); 
document.getElementById("str").focus(|: 
return; 


} 
document.getElementById("convertStr").value = trim(str); 
} 


图 秘笈 心 法 

如 果 保存 在 数据 库 中 的 某 个 字段 的 数据 带 有 空格 ， 当 在 程序 中 根据 该 字段 实现 查询 数据 时 ， 由 于 当时 输入 
保存 数据 时 不 小 心 输入 了 空格 ， 那 么 在 根据 该 字段 查询 数据 时 ， 由 于 存在 空格 可 能 导致 没有 查询 结果 。 因 此 ， 
本 实例 的 实现 是 很 有 必要 的 。 


图 实例 说 明 
在 实际 的 开发 过 程 中 ， 经 常 需要 将 输入 的 数字 格式 化 为 指定 的 长 度 ， 如 果 不 足 指定 位 数 时 ， 在 该 数字 的 前 
面 用 “0” 补 齐 。 运 行 本 实例 ， 如 图 9.19 所 示 ， 在 文本 框 中 输入 要 格式 化 的 数字 和 指定 的 长 度 ， 单 击 “ 转 换 ” 
按钮 后 ， 会 在 “格式 化 后 的 字符 串 ” 文 本 框 中 显示 格式 化 后 的 数字 。 
数字 字符 率 格 式 化 


请 嫩 入 要 格式 化 的 数字 : 

6 

请 给 入 格式 化 后 字符 日 的 长 度 : 
本 

格式 化 后 的 字符 曲 : 

00006 


图 9.19 将 数字 字符 串 格 式 化 为 指定 长 度 


图 关键 技术 


本 实例 主要 是 在 自 定义 的 JavaScript 函数 中 通过 循环 来 实现 。 首先 获得 要 格式 化 的 数字 和 格式 长 度 , 然后 在 
循环 中 对 要 格式 化 的 数字 之 前 用 “0” 补 齐 ， 最 后 将 这 个 格式 化 后 的 数字 字符 串 返 回 。 
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图 设计 过 程 
(1) 新 建 index.jsp 页 ， 编 写 将 数字 字符 串 格式 化 为 指定 长 度 的 JavaScript 函数 ， 关 键 代码 如 下 : 


a 
* 格 式 化 数字 

*@number : 要 格式 化 的 数字 
*@len: 格式 长 度 

*@retumn : 返回 格式 化 后 的 数字 
4 


function formatNum(number,len){ 
var strLength = len - number.length; 1/ 格式 长 度 减 去 数字 的 长 度 ， 就 是 在 数字 前 补 0 的 个 数 
for(var i=0; i<strLength:i++){ 
number = "0"+number: 
} 


return number; 


(2) 编写 表单 提交 按钮 onClick 事件 所 调用 的 JavaScript 函数 ， 在 该 函数 中 首先 验证 输入 是 否 为 空 和 是 否 


为 数字 ， 如 果 输 入 正确 ， 则 调用 格式 化 数字 的 自 定义 JavaScript 函数 将 数字 格式 化 为 指定 长 度 ， 关 键 代 码 如 下 : 
function convertO{ 

var number = document.getElementById("number").value: 

var num len = document.getElementById("num len”").value; 

if(number—""){ // 验 证 输入 的 数字 是 否 为 空 
alert(" 请 输入 要 格式 化 的 数字 ! "); 
document.getElementById("number").focus|; 
return; 


} 
if(isNaN(number){ // 验 证 输入 的 是 否 为 数字 


alert(" 您 输入 的 数字 不 正确 ! "); 
document.getElementById("number").focus(); 
return; 

} 

if(num len—""){ /验证 输入 的 长 度 是 否 为 空 
alert(" 请 输入 格式 化 后 字符 串 的 长 度 !"); 
document.getElementById("num len").focus|): 
return; 

} 

fCisNaN(number){ /验证 输入 的 长 度 是 否 为 数字 


alert(" 您 输入 的 格式 化 字符 串 的 长 度 不 正确 !"); 
document.getElementById("num_ len").focusO: 
return: 


} 

1/ 调 用 格式 化 数字 的 方法 ， 并 将 返回 值 赋 给 文本 框 

document.getElementById("convertStr").value = formatNum(number.num len): 
} 


图 秘笈 心 法 
根据 本 实例 ,可 以 在 实现 自动 编号 时 使 用 该 函数 ， 在 网 页 中 显 


指定 长 度 的 日 期 字符 串 时 也 需要 使 用 该 函数 。 


初级 
实例 225 实用 指数 : 丰 太 让 丰 ; 
实例 说 明 


在 实际 的 开发 过 程 中 ， 经 常 需要 限制 用 户 在 文本 域 中 输入 数据 的 长 度 ， 如 论坛 中 的 留言 内 容 的 长 度 。 运 行 
本 实例 ， 如 图 9.20 所 示 ， 在 文本 域 中 输入 留言 内 容 ， 当 留言 内 容 超 过 指定 字符 长 度 时 ， 会 终止 用 户 继续 输入 。 


图 关键 技术 
实现 本 实例 ,首先 需要 通过 charCodeAt0 函 数 获取 字符 的 Unicode 值 ,然后 根据 字符 的 Unicode 值 的 范围 关 
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断 字符 串 中 是 否 包含 中 文字 符 ， 如 果 包 含 中 文字 符 ， 则 将 定义 好 的 计数 器 的 值 加 2， 和 否则 加 1， 最 后 判断 计数 器 
的 值 是 否 超过 指定 的 字符 长 度 范围 ， 如 果 超过 指定 长 度 范围 ， 则 截取 字符 串 。 
外 者 


留言 内 家 三 包 下 纶 人 20 个 生生 


[3 


图 9.20 ”限制 Textarea 文本 域内 容 的 长 度 
图 设计 过 程 
(1) 新 建 index.jsp 页 ， 编 写 限制 文本 域 输入 内 容 长 度 的 JavaScript 函数 。 在 该 函数 中 ， 通 过 循环 计算 出 文 
本 域内 容 的 长 度 ， 由 于 中 文字 符 是 占 两 个 字 节 的 ， 所 以 计算 时 应 该 判断 文本 域内 容 是 否 存 在 中 文字 符 ， 关 键 代 


码 如 下 : 
function limitTextarea0{ 
var max=20; // 最 多 可 输入 20 个 字符 ， 中 文 占 两 个 字 节 
Var areaStr = document.getElementById("str").value; 
Var temp=0; 
for(var i=0;i<areaStr.length:it+){ // 可 能 包含 中 文 ， 需 要 循环 判断 
Var code = areaStr.charCodeAt(i); // 转 换 为 Unicode 值 
if(code>255){ /大 于 255 的 为 中 文字 符 
temp=temp+2; 
elsef 
temp=temp+1: 
2 
if(temp> max){ /如 果 字符 长 度 超过 指定 长 度 ， 则 跳出 循环 
Dreak: 


} 
ee 
document.getElementById("now_len").innerHTML = temp; // 当 前 输入 的 字符 长 度 
document.getElementById("remainder_len").innerHTML = max-temp: 。”// 剩 余 字 符 长 度 
} 
(2) 在 <body> 标 签 的 onload 加 载 事件 中 调用 步骤 (1) 中 编写 的 函数 ， 并 在 <textarea> 的 onkeyup 事件 和 
onkeydown 事件 中 调用 步骤 (1) 中 的 函数 ， 实 时 跟踪 用 户 输入 的 内 容 长 度 ， 然 后 在 文本 域 之 后 加 入 显示 “当前 


字数 ”和 “剩余 字数 ”的 <span> 标 签 ， 关 键 代码 如 下 : 
<body onload="limitTextarea()” > 
<textarea rows="5" cols="40" id="str”" 


‘onkeyup="limitTextarea()" onkeydown="limitTextarea)"></textarea> 
当前 字数 ，<span ”id="now_len" /></span>&nbsp;&nbsp: 剩 余 字数 : <span id="remainder_len" ></span> 
国 秘笈 心 法 


根据 本 实例 ， 读 者 可 以 实现 限制 留言 短 中 文本 域 的 文字 内 容 长 度 ， 以 及 限制 用 户 注册 时 添加 备注 信息 的 文 
本 域 的 文字 内 容 长 度 。 


实例 226 


力 实例 说 明 
在 显示 某 项 统计 数据 结果 时 ， 这 个 统计 结果 有 可 能 是 一 串 长 数字 ， 为 了 方便 用 户 更 清晰 地 查看 数据 ， 需 要 
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将 长 数字 分 位 显示 。 运 行 本 实例 ， 如 图 9.21 所 示 ， 在 “请 输入 要 转换 的 长 数字 ”文本 框 中 输入 一 个 长 数字 ， 单 
击 “ 转 换 ” 按 钮 后 ， 会 将 数字 以 “, ” 隔 开 分 位 显示 。 


长 数字 分 位 显示 


图 9.21 将 长 数字 分 位 显示 
图 关键 技术 
本 实例 主要 通过 循环 数字 字符 串 来 实现 。 首 先 判断 输入 的 是 否 为 数字 ， 如 果 为 数字 ， 则 在 循环 中 设置 一 个 
指定 的 步 长， 然后 每 隔 指定 的 步 长 加 一 个 逗号 分 隔 开 ， 最 后 组 合成 一 个 带 有 逗号 分 隔 符 的 数字 字符 串 。 
图 设计 过 程 
(1) 新 建 ndexjsp 页 ， 编 写 将 数字 分 位 的 JavaScript 函数 ， 关 键 代码 如 下 : 
function compart(lang_num){ 


var result=0; /保存 分 位 后 的 结果 
Var dec= /保存 小 数 点 后 的 数字 
if(lang num<4){ // 如 果 小 于 4 位 ， 直 接 返 回 
result = lang_num; 
} 
else{ // 如 果 大 于 4 位 
Var decimal = lang_num indexOf("."); /是 否 包含 小 数 
Var temp="" /保存 整数 部 分 的 分 位 字符 串 
Var res=""; /保存 没有 分 位 的 整数 
if(decimal>0){ // 如 果 包 含 小 数 
dec=lang_num.substr(decimal); /截取 小 数 点 后 的 值 
res=lang_num.substr(0.decimal); /截取 小 数 点 前 的 整数 值 
jelsef /如 果 不 存在 小 数 部 分 
Tes=lang_num:; 
} 
for(var i=res.length;i>0:i=i-3){ /循环 整数 ， 从 整数 的 个 位 开始 循环 
if(i-3>0){ /| 每 隔 3 位 加 一 个 逗号 
temp=","+res.substr(i-3,3)+temp; 
} 
else{ / 少 于 3 位 时 的 情况 
temp=res.substr(0.i)+temp 
Tesult =temp+dec: 
} 
return result: 


} 
(2) 编写 表单 提交 按钮 onClick 事件 调用 的 JavaScript 函数 ， 在 该 函数 中 首先 验证 用 户 输入 的 数字 是 否 为 
室 和 是 否 为 数字 ， 如 果 验 证 成 功 ， 则 调用 分 位 显示 数字 的 函数 ， 将 数字 分 位 显示 在 文本 框 中 ， 关 键 代 码 如 下 : 
人 = document.getElementById("lang_number").value: 
if(lang_number—""){ 
alert(" 请 输入 数字 ! "); 
document.getElementById("lang number").focusO: 
return; 
a number)): 
alert(" 地 输入 区 数字 无 效 ! 
document: 0 number") focus|; 
return: 


} 
document.getElementById("result_num").value = compart(lang_number): 
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图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 在 房地产 信息 网 中 将 产品 报价 分 位 显示 。 


色 值 转换 为 十 六 


实例 227 


图 实例 说 明 


在 网 站 开发 过 程 中 , 经 常会 遇 到 将 RGB 格式 的 颜色 值 转换 为 十 六 进 制 格式 的 情况 ， 例 如， 在 实现 文字 动态 
变色 时 ， 就 需要 使 用 该 方法 将 RGB 值 转换 为 十 六 进 制 格式 。 运 行 本 实例 ， 如 图 9.22 所 示 ， 在 相应 的 文本 框 中 
分 别 输入 R、G、B 的 颜色 值 ， 单 击 “ 转 换 ” 按 钮 后 ， 会 在 “转换 后 十 六 进 制 的 颜色 值 ”文本 框 中 显示 一 个 十 六 


进 制 的 RGB 颜色 值 。 
RGB 颜色 值 转换 
图 9.22 
图 关键 技术 


请 售 入 天 续 纺 的 RGB 搞 记 分 量 仁 ， 
R: 100 0-199 
6: 255 ss) 
B:42 0-255 

续 辽 后 十 之 进 训 的 凶 记 值 
[CT 


EE (ED 


这 < 上 


将 RGB 颜色 值 转换 为 十 六 进 制 


本 实例 主要 应 用 JavaScript 中 提供 的 parseInt0 方 法 和 Number 对 象 的 toString0 方 法 。parseInt0 方 法 用 于 返 
回 由 字符 串 转 换 得 到 的 整数 ,Number 对 象 的 toString0 方 法 用 于 将 数值 转换 为 字符 串 , 该 方法 可 以 返回 数字 的 不 


同 进 制 的 值 ， 代 码 如 下 : 
var num = 20; 
num.toString(2); 
num.toString(8); 
num.toString(10); 
num.toString(16); 


图 设计 过 程 


/转换 为 二 进 制 ， 结 果 为 10100 
// 转 换 为 八进制 ， 结 果 为 24 
// 转 换 为 十 进 制 ， 结 果 为 20 
// 转 换 为 十 六 进 制 ， 结 果 为 14 


(1) 新 建 index.jsp 页 ， 编 写 转换 RGB 颜色 值 为 十 六 进 制 的 JavaScript 函数 ， 关 键 代码 如 下 : 


function toHex(r,.g.b){ 
// 如 果 R、G、B 的 值 为 空 ， 修 改 为 0 
io 一 9 

=0; 


和 
if(e—"){ 
0; 
这 b 一 ”){ 
b=0: 
} 
Var red = parseInt(r).toString(16); 
ifl(red length<2){ 
Ted-"0"+red: 
} 
Var green = parseInt(g).toString(16); 
这 green length<2){ 
Ereen="0"+green: 


var blue = parseInttb)toString(16): 


/ 慷 值 的 十 六 进 制 字符 串 
1/ 少 于 2 位 , 补 0 


//G 值 的 十 六 进 制 字符 囊 
1/ 少 于 2 位 , 补 0 


/BB 值 的 十 六 进 制 字符 串 
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if(blue.length<2){ 1/ 少 于 2 位 , 补 0 
blue="0"+blue; 

return "#"+redt+greentblue: /组 合成 一 个 RGB 颜色 字符 串 

} 


(2) 编写 按钮 onClick 事件 所 调用 的 JavaScript 函数 ， 在 该 函数 中 首先 验证 输入 的 R、G、B 值 是 否 符合 要 
求 ， 如 果 验 证 成 功 ， 则 调用 步骤 (1) 中 定义 的 转换 为 十 六 进 制 的 函数 ， 最 后 将 转换 后 的 RGB 颜色 值 显示 在 文 
本 框 中 ， 关 键 代 码 如 下 : 
function convertO{ 
var R = document getElementById("r value").value: 
var G = document.getElementById("g_value”).value; 


if(R>255){ 
alert(" 请 输入 0 一 255 之 间 的 数字 ! "); 
return; 


} 


} 
ifisNaN(G)){ 
alert(" 您 输入 的 (G) 颜 色 值 必 须 为 0 一 255 之 间 的 数字 ! "); 


return ; 


{ 
if(G>255){ 
alert(" 请 输入 0 一 255 之 间 的 数字 ! "); 
return; 
. 


} 
if(isNaN(B){ 
alert(" 您 输入 的 (B) 颜 色 值 必须 为 0 一 255 之 间 的 数字 ! "); 
return ; 
jelsef 
if(B>255){ 
alert(" 请 输入 0 一 255 之 间 的 数字 ! "); 
return; 
} 
‘document.getElementById("hex_num").value = toHex(R.GB): 


} 
图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 彩色 渐变 的 文字 动画 ， 还 可 以 实现 表格 或 页 面 背景 循环 变色 。 


实例 228 | 
实例 实用 指数 友良 去 雄 : 


图 实例 说 明 


在 开发 网 站 时 ， 可 能 会 遇 到 从 指定 的 URL 中 提取 文件 
名 的 情况 。 运 行 本 实例 ， 如 图 9.23 所 示 ， 在 “请 输入 URL 
地 址 ”文本 框 中 输入 一 个 URL 地 址 ， 单 击 “ 提 取 ” 按 钮 后 ， 
在 “提取 的 文件 名 ”文本 框 中 将 显示 提取 出 的 文件 名 。 


图 关键 技术 
本 实例 主要 通过 String 对 象 的 replace0 方 法 实现 。 该 方 图 9.23 提取 URL 中 的 文件 名 


提取 URL 中 的 文件 名 
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法 用 于 蔡 换 一 个 与 正则 表达 式 匹 配 的 子 串 ， 该 方法 的 蔡 换 字 串 可 以 包含 9 字符 ， 包 含 9 字 符 时 具有 特殊 含义 ， 具 
体 含义 如 表 9.2 所 示 。 


表 9.2 包含 $ 字 符 的 字符 串 的 具体 含义 


字符 含 义 
3& 指定 与 整个 模式 匹配 的 子 串 
了 位 于 匹配 字 串 左 侧 的 文本 
和 | 位 于 匹配 字 串 右 侧 的 文本 
Sn | 捕获 的 第 n 个 子 匹配 ， 此 处 n 为 从 1~9 的 十 进 制 一 位 数 
Snn 捕获 的 第 nn 个 子 匹配 ， 此 处 nn 为 从 01~99 的 十 进 制 两 位 数 
图 设计 过 程 
(1) 新 建 ndexjsp 页 ， 编 写 从 指定 URL 中 提取 文件 名 的 JavaScript 自 定义 函数 ， 关 键 代 码 如 下 : 
function getFileName(urD){ 


var regExp =/(*V)*([N.]+).*/ig; 
Url =url.replace(regExp,"$2"); 
return url; 

} 


(2) 编写 表单 提交 按钮 onclick 事件 调用 的 JavaScript 函数 ， 用 于 验证 用 户 输入 的 URL 地 址 是 否 有 效 ， 如 
果 验 证 成 功 ， 则 提取 文件 名 并 显示 在 相应 的 文本 框 中 ， 关 键 代 码 如 下 : 


function checkO{ 
Var url = document.getElementById("url").value; 
/验证 URL 是 否 正确 的 正则 表达 式 
var 十 /http(s)?: Ww HD w+H VD WwW- V7968e=]*) ?Vw + Nw {3}S/; 
if(url—"") 
alert(" 请 输入 URL 地 址 ! "); 
document.getElementById("url").focusO: 
return; 


} 
I test(urD){ 
lert(" 您 输入 的 URL 地 址 无 效 ! " 
a ‘getElementById("url"). es 
return; 


} 
document.getElementById("filename").value = getFileName(url); 
} 


用 秘笈 心 法 

String 对 象 的 replace0 方 法 用 于 蔡 换 一 个 与 正则 表达 式 匹配 的 子 串 ， 其 语法 结构 如 下 : 

stringObj.replace(regExp.replaceText) 

参数 说 明 

@ stringObj: 必 选 参数 。 要 执行 该 蔡 换 的 String 对 象 或 字符 串 文字 。 

@ regExp: 必 选 参数 。 为 包含 正则 表达 式 模 式 或 可 用 标志 的 正则 表达 式 对 象 ， 也 可 以 是 String 对 象 或 文字 。 
如 果 regExp 不 是 正则 表达 式 对 象 ， 它 将 被 转换 为 字符 串 ， 并 进行 精确 的 查找 ; 不 要 尝试 将 字符 串 转化 为 正则 表 

@@ replaceText: 必 选 参数 。 一 个 String 对 象 或 字符 串 文字 ， 对 于 stringObj 中 每 个 匹配 regExp 中 的 位 置 都 用 
该 对 象 所 包含 的 文字 加 以 替换 。replaceText 参数 也 可 以 是 返回 替换 文本 的 函数 。 


9.3 日 期 时 间 处 理 


在 Web 应 用 开发 过 程 中 ， 经 常 需要 处 理 表单 中 输入 的 日 期 时 间 类 型 的 数据 ， 如 计算 两 个 日 期 相差 的 天 数 、 
计算 某 日 期 是 星期 几 、 实 时 显示 系统 时 间 等 。 本 节 将 通过 几 个 实例 讲解 如 何 通过 JavaScript 来 处 理 日 期 时 间 。 
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A 初级 
实例 229 | 
实例 实用 指数 : 食 娘 食 食 : 
图 实例 说 明 计算 两 个 日 期 的 天 于 关 
在 实际 的 开发 过 程 中 , 可 能 会 遇 到 计算 两 个 日 期 相差 pelohde 2 
的 天 数 的 情况 。 运 行 本 实例 ,如 图 9.24 所 示 ， 在 相应 的 文 | 4 rer 
本 框 中 分 别 输入 两 个 日 期 字符 串 ( 格 式 为 yyyy-mm-dd)， 人 
单 击 “ 计 算 ” 按 钮 后 ， 会 显示 出 这 两 个 日 期 相差 的 天 数 。 
图 关键 技术 图 9.24 计算 两 个 日 期 相差 的 天 数 
本 实例 主要 利用 JavaScript 中 的 Date 对 象 来 实现 。 该 对 象 是 一 个 有 关 日 期 和 时 间 的 对 象 , 创建 Date 对 象 的 
语法 结构 如 下 : 


dateObj = new Date0) 
dateObj = new Date(dateVal) 
dateObj = new Date(year, month, date[, hours[, minutes[, seconds[.ms]]]]) 


参数 说 明 

@ dateObj: 要 赋值 为 Date 对 象 的 变量 名 。 

@ dateVal: 如 果 是 数字 值 ，dateVal 表示 指定 日 期 与 1970 年 1 月 1 日 午夜 间 全 球 标准 时 间 的 毫秒 数 。 如 果 
是 字符 串 ， 则 dateVal 按照 parse 方法 中 的 规则 进行 解析 。dateVal 参数 也 可 以 是 从 某 些 ActiveX(R) 对 象 返回 的 
VT_DATE 值 。 

目 year: 表示 完整 的 年 份 (yyyy)。 

@ month: 表示 月 份 ， 从 0 一 11 之 间 的 整数 (1 月 一 12 月 )。 

@ date: 表示 日 期 ， 从 1 一 31 之 间 的 整数 。 

@ hours: 可 选 参数 。 表 示 小 时 ， 从 0 一 23 之 间 的 整数 。 

@ minutes: 可 选 参数 。 表 示 分 钟 ， 从 0 一 59 之 间 的 整数 。 

@ seconds: 可 选 参数 。 表 示 秒 ， 从 0 一 59 之 间 的 整数 。 

@ ms: 可 选 参数 。 表 示 毫 秒 ， 从 0 一 999 之 间 的 整数 。 

Date 对 象 提供 了 获取 和 设置 有 关 日 期 和 时 间 的 方法 ， 如 表 9.3 所 示 。 


表 9.3 Date 对 象 的 方法 及 说 明 


方法 说 明 

_getFullYear()/setFullYear() 返回 /设置 Date 对 象 中 的 完整 年 份 值 (yyyy) 

getMonth()/setMonth() 返回 /设置 Date 对 象 中 的 月 份 值 (0 一 11 的 整数 ) 
_getDateO/setDate0 返回 /设置 Date 对 象 中 表示 的 一 个 月 中 的 日 期 什 
_getHours()/setHours() 返回 /设置 Date 对 象 中 的 小 时 值 
_getMinutes|/setMinutes| 返回 /设置 Date 对 象 中 的 分 钟 值 

getSecondsQ/setSeconds() 返回 /设置 Date 对 象 中 的 秒 值 
_getMillisecondsO/setMillisecondsO ”| 返回 /设置 Date 对 象 中 的 毫秒 值 

返回 Date 对 象 中 的 时 间 值 ， 该 方法 返回 一 个 整数 值 ， 这 个 整数 代表 了 从 1970 年 1 
Ee 月 1 日 开始 计算 到 Date 对 象 中 的 时 间 之 间 的 毫秒 数 
setTime() 设置 Date 对 象 中 的 日 期 和 时 间 值 
etDat 返回 Date 对 象 中 的 一 周 中 表示 的 日 期 值 ， 星 期 天 到 星期 六 的 值 是 从 0 一 6 
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图 设计 过 程 
(1) 新 建 index.jsp 页 ， 编 写 计 算 两 个 日 期 之 间 相 差 的 天 数 的 JavaScript 自 定 义 函 数 ， 在 该 函数 中 ， 首 先 根 
据 日 期 类 型 的 字符 串 〈yyyy-mm-dd) 创建 日 期 类 型 的 Date 对 象 ， 然 后 通过 Date 对 象 的 getTime0 方 法 获得 表示 
日 期 的 毫秒 值 ， 通 过 两 个 日 期 的 毫秒 值 之 差 除 以 一 天 的 毫秒 值 即 两 个 日 期 相差 的 天 数 ， 关 键 代码 如 下 : 
4 
* 计 算 两 个 日 期 相差 的 天 数 
*@date1: 日 期 类 型 的 字符 串 (yyyy-mm-dd) 
*@date2: 日 期 类 型 的 字符 串 (yyyy-mm-dd) 
*@retum: 返回 日 期 天 数 差 
function getDays(datel,date2){ 
var datelStr = datel.split("-"); // 将 日 期 字符 串 分 隔 为 数组 ， 数 组 元 素 分 别 为 年 、 月 、 日 
/根据 年 、 月 、 日 的 值 创建 Date 对 象 
Var datelObj = new Date(datelStr[0],(datel1Str{1]-1),.datelStr[2D); 
Var date2Str = date2.split("-"); 
Var date2Obj = new Date(date2Str[0],(date2Str[1]-1),.date2Str[2D); 


vartl = datelObj.getTimeO: /返回 从 1970-1-1 开始 计算 到 Date 对 象 中 的 时 间 之 间 的 毫秒 数 
vart2 = date2Obj.getTime(); /返回 从 1970-1-1 开始 计算 到 Date 对 象 中 的 时 间 之 间 的 毫秒 数 
var datetime=1000*60*60*24; /表示 一 天 24 小 时 时 间 内 的 毫秒 值 

var minusDays = Math.floor(((t2-t1)/datetime)):; // 计 算出 两 个 日 期 天 数 差 

var days = Math.abs(minusDays); // 如 果 结果 为 负数 ， 取 绝对 值 

return days; 


} 

(2) 编写 表单 提交 按钮 onClick 事件 所 调用 的 JavaScript 函数 ， 在 该 函数 中 首先 验证 输入 的 日 期 是 否 为 空 ， 
如 果 不 为 空 ， 需 要 验证 日 期 是 否 有 效 。 如 果 验 证 成 功 ， 则 调用 步骤 (1) 编写 的 计算 两 个 日 期 相差 天 数 的 函数 ， 
最 后 将 返回 结果 赋值 给 相应 的 文本 框 ， 关 键 代码 如 下 ; 

function checkO{ 
Var start_date = document.getElementById("start_date").value; 
var end_date = document.getElementById("end_date”).value:; 
if(start_date—""){ 
alert(" 请 输入 开始 日 期 ! "); 
return: 
} 
else{ 
if(!checkDate(start_date){ 
alert(" 您 输入 的 开始 日 期 无 效 !"); 
return; 
} 
} 
if(end_date—""){ 
alert(" 请 输入 终止 日 期 ! "); 
return: 
Jelse{ 
if(!checkDate(end_date)){ 
alert(" 您 输入 的 终止 日 期 无 效 ! "); 
return; 
和 
} 
document.getElementById("minusDay").Value = getDays(start_date.end_date): 
} 


国 秘笈 心 法 


本 实例 在 实现 时 , 首先 通过 Date 对 象 的 getTime0 方 法 获得 两 个 日 期 对 象 的 毫秒 值 , 然后 再 通过 两 个 日 期 的 
毫秒 值 之 差 除 以 表示 一 天 的 毫秒 值 (1000x24x60x60)， 即 两 个 日 期 相差 的 天 数 。 由 于 计算 结果 可 能 不 是 整数 ， 
因此 需要 通过 Math.floor0 函 数 取 整 。 
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实例 230 20 
实用 指数 : 妇女 女 页 
图 实例 说 明 


在 实际 开发 应 用 中 ,经常 需要 计算 两 个 日 期 相差 的 小 


时 数 。 运 行 本 实例 , 如 图 9.25 所 示 ， 在 相应 的 文本 框 中 分 。 “ 惠 5 8 撞 


别 笨 入 开始 日 期 和 终止 日 期 ， 单 击 “ 计 算 ” 按 钮 后 ， 会 在 人 ww EE 
文本 框 中 显示 这 两 个 日 期 之 间 相差 的 小 时 数 。 a 
关键 技术 [Sm] 
实现 本 实例 很 简单 ,首先 需要 计算 出 两 个 日 期 之 间 相 二 
差 的 天 数 ， 然 后 再 乘 以 表示 一 天 的 24 小 时 就 是 两 个 日 期 
相差 的 小 时 数 。 
图 设计 过 程 
(1) 新 建 index.jsp 页 ， 编 写 计算 两 个 日 期 之 间 相 差 的 小 时 数 的 JavaScript 函数 ， 关 键 代码 如 下 : 
pe 
* 计 算 两 个 日 期 相差 的 小 时 数 


*@datel: 日 期 类 型 的 字符 串 《yyyy-mm-dd) 
*@date2: 日 期 类 型 的 字符 串 (yyyy-mm-dd) 
*@retum: 返回 两 个 日 期 相差 的 小 时 数 

" 


function getMinusHours(datel ,date2){ 
var datelStr = datel.split("-"); // 将 日 期 字符 串 分 隔 为 数组 ， 数 组 元 素 分 别 为 年 、 月 、 日 
/根据 年 、 月 、 日 的 值 创 建 Date 对 象 
var datelObj = new Date(datelStr[0].(datelStr[1]-U.datelStr[2]): 
var date2Str = date2.split("-"); 
var date2Obj = new Date(date2Str[0],(date2Str[1]-1),date2Str[2]); 


var tl = datelObj.getTimeO; 1/ 返回 从 1970-1-1 开始 计算 到 Date 对 象 中 的 时 间 之 间 的 毫秒 数 
var t2 = date2Obj.getTime(); /返回 从 1970-1-1 开始 计算 到 Date 对 象 中 的 时 间 之 间 的 毫秒 数 
var datetime=1000+60+60+24: /一 天 时 间 的 毫秒 值 

var minusDays = Math_floor(((2-tl)/datetime)):// 计 算出 两 个 日 期 天 数 差 

var days = Math.abs(minusDays): // 如 果 结 果 为 负数 ， 取 绝对 值 

Var minusHours = days*24; 

return minusHours: 


} 
(2) 编写 按钮 onClick 事件 调用 的 JavaScript 函数 。 首 先 验证 输入 的 日 期 ， 验 证 时 用 到 了 checkDate0 函 数 ， 


如 果 验 证 成 功 ， 则 调用 计算 两 个 日 期 相差 小 时 数 的 函数 ， 最 后 将 返回 的 小 时 数 赋 给 相应 的 文本 框 ， 关 键 代 码 如 下 : 
function checkO{ 
Var start_date = document. getElementById("start_date").value:; 
var end date= Re 
if(start_date—' 
ae 请 输入 开始 日 期 ! "); 
return; 


else{ 
! ‘start_date)){ 
alert(" 您 输入 的 开始 日 期 无 效 ! "): 
return: 
} 
条 
if(end_date—"") 


sec 和 日 期 ! "); 
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国 秘笈 心 法 

本 实例 在 实现 时 ,首先 通过 Date 对 象 的 getTime0 方 法 获得 两 个 日 期 对 象 的 毫秒 值 , 然后 再 通过 两 个 日 期 的 
毫秒 值 之 差 除 以 表示 一 天 的 毫秒 值 (1000x24x60x60) 计算 出 两 个 日 期 相差 的 天 数 ， 最 后 将 相差 的 天 数 乘 以 24 
得 到 两 个 日 期 相差 的 小 时 数 。 


实例 231 


国 实例 说 明 
本 实例 将 介绍 如 何 计 算 某 一 日 期 是 星期 几 。 运 行 本 实 
例 ， 如 图 9.26 所 示 , 在 文本 框 中 输入 日 期 类 型 的 字符 串 ， 单 SARE 


击 “ 计 算 ” 按 钮 后 ， 会 显示 出 日 期 所 对 应 的 星期 值 。 请 信 入 一 个 日 ;2010 2 ND 
2010-6-24 归 。 重 其 可 
图 关键 技术 gn 
本 实例 的 实现 主要 是 利用 Date 对 象 中 的 getDay0 方 法 。 
该 方法 返回 的 是 Date 对 象 中 一 周 的 星期 值 ， 星 期 值 的 范围 图 9.26 计算 某 一 天 是 星期 几 
是 0~6 的 整数 ， 星 期 日 为 0、 星期 一 为 1、 星期 二 为 2， 依 
此 类 推 。 
图 设计 过 程 
(1) 新 建 index.jsp 页 ， 编 写 计 算 某 一 日 期 是 星期 几 的 JavaScript 函数 ， 关 键 代码 如 下 : 
pe 
* 计 算 某 一 天 是 星期 几 
*@date: 日 期 类 型 的 字符 串 (yyyy-mm-dd) 
3 返回 星期 值 


a getWeekByDate(date){ 
var dateStr = date.split("-"):// 将 日 期 字符 串 分 隔 为 数组 ， 数 组 元 素 分 别 为 年 、 月 、 日 
/根据 年 、 月 、 日 的 值 创建 Date 对 象 
var dateObj = new Date(dateStr{O]. et 1),.dateStr[2D): 
var weeks=[" 星 期 日 "." 星 期 一 "." 星 期 二 "," 星 期 三 "," 星 期 四 "." 星 期 五 "." 星 期 六 "]; 
i Teturn weeks[dateObj.getDayO]: 
(2) 编写 按钮 onClick 事件 所 调用 的 JavaScript 函数 ， 在 该 函数 中 调用 计算 某 一 天 是 星期 几 的 函数 ， 然 后 将 


获得 的 星期 值 赋 给 一 个 文本 框 ， 关 键 代码 如 下 : 
function checkO{ 
Var date = document.getElementById("date”).value; 
if(date—""){ 
alert(" 请 输入 日 期 ! "); 
return; 
} 
else{ 
if(!checkDate(date)){ 
alert(" 您 输入 的 日 期 无 效 !"); 
return: 
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} 
} 
document.getElementById("dateStr") innerHTML="&nbsp;énbsp:"+date+" 是 : "; 
document.getElementById("week").value = getWeekByDate(date); 


图 秘笈 心 法 
创建 一 个 Date 对 象 时 ， 月 份 的 值 应 该 是 从 0 一 11 之 间 的 整数 ， 如 果 月 份 的 值 设置 错误 ， 使 用 getDay0 方 法 
返回 的 星期 值 肯 定 是 不 对 的 。 如 根据 日 期 字符 串 “2010-5-5” 来 创建 一 个 Date 对 象 ， 正 确 的 创建 方法 代码 如 下 : 


var dateObj = new Date(2010.4.5):// 表 示 的 日 期 为 2010-5-5 
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图 实例 说 明 

所 谓 长 日 期 格式 就 是 以 “YYYY 年 MM 月 DD 日 星期 W” 格 式 来 显示 的 。 在 网 站 的 适当 位 置 加 入 此 格式 
的 日 期 不 仅 可 以 美化 界面 ， 而 且 还 可 以 达到 方便 用 户 的 目的 。 运 行 本 实例 ， 如 图 9.27 所 示 ， 在 网 页 中 会 以 长 日 
期 格式 显示 当前 的 系统 日 期 。 


2010 年 06 月 24 日 星期 四 


图 9.27 显示 长 日 期 格式 的 系统 时 间 

图 关键 技术 

本 实例 主要 是 利用 JavaScript 中 的 Date 对 象 来 实现 的 。 创 建 一 个 Date 对 象 时 ， 如 果 该 对 象 不 包含 任何 构造 
参数 , 并 且 不 通过 setXXX0 方 法 设置 该 对 象 中 的 年 、 月 、 日 等 值 , 那么 该 对 象 则 表示 当前 系统 时 间 的 Date 对 象 ， 
因此 可 以 根据 Date 对 象 的 getXXX0 方 法 来 获得 当前 系统 时 间 的 年 、 月 、 日 、 小 时 、 分 、 秒 等 值 。 
图 设计 过 程 

(1) 新 建 ndexjsp 页 ， 编 写 获得 当前 系统 日 期 的 长 日 期 格式 的 JavaScript 函数 。 在 该 函数 中 首先 创建 一 个 

表示 当前 系统 时 间 的 Date 对 象 ， 然 后 获得 该 对 象 中 的 年 、 月 、 日 及 星期 值 组 合成 一 个 字符 串 ， 关 键 代码 如 下 : 

At 

相生 人 


function getLangDateO{ 
var dateObj = new Date0: /表示 当前 系统 时 间 的 Date 对 象 
Var year = dateObj.getFullYear0; /当前 系统 时 间 的 完整 年 份 值 
var month = dateObj.getMonthO+1; /当前 系统 时 间 的 月 份 值 
var date = dateObj.getDateO; // 当 前 系统 时 间 的 月 份 中 的 日 
var day = dateObj.getDay0: // 当 前 系统 时 间 中 的 星期 值 
var weeks =[" 星 期 日 "星期 一 "." 星 期 二 "." 星 期 三 "." 星 期 四 "." 星 期 五 "星期 六 "]: 
var week = weeks[day]: /根据 星期 值 ， 从 数组 中 获取 对 应 的 星期 字符 串 
if(month<10){ 
month="0"+month:; 
pay 
date="0"+date; 


Se "+week; 
document.getElementById("dateStr").innerHTML = newDate: 
} 
(2) 要 想 在 页 面 加 载 后 显示 系统 时 间 ， 需 要 通过 页 面 <body> 标 签 的 onload 事件 来 调用 步骤 (1) 中 编写 的 


318 


第 9 章 JavaScript 技术 


JavaScript 函数 ， 并 在 页 面 中 设置 一 个 id 为 dateStr 的 <div> 标 签 ， 关 键 代 码 如 下 : 
<body onLoad-"getrangDaie0) 心 
<div id-"datestr” class—"word_Green”></div> 
<Jbody> 


图 秘笈 心 法 

本 实例 在 从 Date 对 象 中 获得 年 份 时 ， 使 用 的 是 getFullYear0 方 法 而 不 是 getYear0 方 法 。getFullYear0 方 法 以 
绝对 数字 的 形式 返回 年 份 值 。 例 如 ，1986 年 的 返回 值 就 是 1986。 这 样 可 以 避免 出 现 2000 年 问题 ， 从 而 不 会 将 
2000 年 1 月 1 日 以 后 的 日 期 与 1900 年 1 月 1 日 以 后 的 日 期 混淆 。 


实例 233 | 
实 | 实用 指数 : 女真 让 太 : 
图 实例 说 明 
在 浏览 很 多 网 站 时 ， 经 常会 发 现在 网 站 中 加 入 了 显示 当 
前 系统 时 间 的 功能 ， 在 网 页 中 显示 当前 系统 时 间 ， 不 仅 可 以 图 明日 科技 在 线 论坛 


方便 浏览 者 掌握 当前 时 间 ， 而 且 还 美化 了 网 页 。 运 行 本 实例 ， 
如 图 9.28 所 示 ， 在 网 页 的 导航 条 下 方 实时 显示 了 当前 的 系统 
时 间 。 
图 关键 技术 图 9.28 实时 显示 系统 时 间 

本 实例 主要 是 通过 利用 Date 对 象 来 实现 的 。 首 先 创建 一 个 表示 当前 系统 时 间 的 Date0 对 象 ， 然 后 通过 该 对 
象 的 getXXX0 方 法 获得 当前 系统 时 间 的 年 、 月 、 日 、 小 时 、 分 、 秒 和 星期 值 ， 接 下 来 将 获得 的 这 些 值 组 合成 一 
个 日 期 时 间 字 符 串 ,并 将 日 期 时 间 字 符 串 设置 成 为 <div> 标 签 的 内 容 ， 最 后 通过 window 对 象 的 setTimeout0 函 数 
每 隔 1 秒 调用 一 个 实时 显示 系统 时 间 的 函数 。 
图 设计 过 程 


(1) 新 建 index.jsp 页 ， 编 写实 时 显示 系统 时 间 的 JavaScript 函数 ， 关 键 代 码 如 下 : 


用 户主 阴 上 用 户 登 录 【查看 留言 【刷新 页 面 | 版 主 登录 
| 移 。 系 统 公告 : [2010 年 06 月 24 日 星期 四 151903] 


jm 
* 实 时 显示 系统 时 间 
#/ 


function getLangDateO{ 
var dateObj = new Date0: /表示 当前 系统 时 间 的 Date 对 象 
var year = dateObj.getFullYear0: // 当 前 系统 时 间 的 完整 年 份 值 
var month = dateObj.getMonthO+1: /当前 系统 时 间 的 月 份 值 


var date = dateObj.getDate0: /当前 系统 时 间 的 月 份 中 的 日 

var day = dateObj.getDayO: // 当 前 系统 时 间 中 的 星期 值 

var weeks=[" 星 期 日 "." 星 期 一 "," 星 期 二 "," 星 期 三 "," 星 期 四 "," 星 期 五 "," 星 期 六 "]; 

var week = weeks[day]: 1/ 根据 星期 值 ， 从 数组 中 获取 对 应 的 星期 字符 串 
var hour = dateObj.getHoursO: // 当 前 系统 时 间 的 小 时 值 


var minute = dateObj.getMinutes0: 。”// 当 前 系统 时 间 的 分 钟 值 
var second = dateObj.getSeconds0: /1/ 当 前 系统 时 间 的 秒 钟 值 
/如 果 月 、 日 、 小 时 、 分 、 秒 的 值 小 于 10， 在 前 面 补 0 
if(month<10){ 

month ="0"+month: 


全 
if(date<10){ 

date = "0"+date: 
} 
if(hour<10){ 

hour ="0"+hour: 
} 
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ifminute<10)f 
minute ="0"+minute: 


} 
if(second<10){ 

second = "0"+second:; 
} 
var newDate = year+" 年 "+month+" 月 "t+date+" 日 “+week+" "+hour+":"+minute+":"+second; 
document.getElementById("dateStr").innerHTML = "系统 公告 : [ "+newDate+" ]"; 
setTimeout("getLangDateO",1000);// 每 隔 1 秒 重新 调用 一 次 该 函数 


} 
(2) 在 页 面 <body> 标 签 中 通过 onload 事件 加 载 步骤 (1) 中 编写 的 JavaScript 函数 ， 并 在 页 面 的 适当 位 置 


加 入 <div> 标 签 ，id 为 dateSt， 关 键 代码 如 下 : 
<body onLoad="getLangDate() "> 


<div id="datestr" class—"word_grey ></div> 
国 秘笈 心 法 
在 实现 实时 显示 系统 时 间 时 , 还 可 以 使 用 window 对 象 的 setIntervar0 方 法 , 该 方法 类 似 于 setTimeout0 方 法 。 
不 同 之 处 是 调用 window 对 象 的 setIntervar0 方 法 后 ， 会 一 直 执 行 setIntervar0 方 法 所 调用 的 JavaScript 方法 ， 而 
setTimeout() 方 法 只 能 被 执行 一 次 。 如 果 要 通过 setTimeout0 方 法 一 直 执 行 某 个 JavaScript 方法 ，setTimeout0 必 须 
写 在 被 调用 的 JavaScript 方法 体内 。 
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图 实例 说 明 

在 浏览 一 些 网 站 时 ， 网 站 中 经 常会 根据 某 一 天 发 生 的 重要 事件 给 出 倒计时 天 数 ， 如 “ 距 北京 奥运 会 开幕 还 
有 30 天 !”“ 距 上 海 世博 会 开幕 还 有 10 天 !” 等 。 运 行 本 实例 ， 如 图 9.29 所 示 ， 会 在 网 页 中 显示 距 2010 年 南非 
世界 杯 开 幕 还 有 多 少 天 的 提示 信息 。 


当前 型 录用 户 ; Rernertbe 
今天 是 2010 南 看 世 界 本 第 14 个 比赛 日 4 


图 9.29 倒计时 


图 关键 技术 


本 实例 主要 是 通过 利用 JavaScript 中 的 Date 对 象 来 实现 的 。 主 要 就 是 计算 当前 系统 日 期 与 某 一 日 期 之 间 的 
天 数 差 , 然后 根据 天 数 差 显示 相应 的 提示 信息 。 计 算出 的 天 数 差 可 能 为 一 个 浮 点 值 , 需要 通过 Math 对 象 的 floor0 
方法 获取 整数 值 ， 如 果 天 数 差 为 负数 ， 还 需要 使 用 Math 对 象 取 绝 对 值 的 方法 abs0。 


图 设计 过 程 
(1) 新 建 indexjsp 页 ， 编 写 用 于 倒计时 天 数 的 JavaScript 函数 ， 关 键 代码 如 下 : 


4 
+ 事件 倒计时 

*@title 事件 的 名 称 
*@eventDate: 事件 的 日 期 
#/ 


function countDown(title.eventDate){ 
var dateObj = new Date0: // 当 前 系统 时 间 的 Date 对 象 
var dateStr = eventDate.split("-"); 
var eventDateObj = new Date(dateStr[O],.(dateStr[1]-1).dateStr[2]): 
vartl = dateObj.getTime0: /获得 Date 对 象 中 距 1970 年 的 时 间 的 毫秒 数 
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var t2 = eventDateObj.getTimeO: /获得 Date 对 象 中 距 1970 年 的 时 间 的 毫秒 数 
var datetime=24+60*+60+1000: /一 天 的 毫秒 值 

var days = Math.floor((t2-t1)/datetime)+1; /相差 的 天 数 

if(days>0){ 


document.getElementById("day_str").innerHTML-" 距 "ttitle+" 开 幕 还 有 "+days+" 天 ! "; 
出 
这 days 一 0){ 

document.getElementById("day_str").innerHTML=" 今 天 是 "+titlet+" 开 幕 日 !"; 
} 


if(days<0){ 
days =Math.abs(days)+1: 
document.getElementById("day_str").innerHTMIL=" 今 天 是 "ttitlet" 第 "+days+" 个 比赛 日 !"; 


} 

/| 每 隔 一 天 的 时 间 调 用 一 次 本 函数 ， 刷 新 显示 的 倒计时 提示 信息 

setTimeout("countDown('2010 南非 世界 杯 ''2010-6-11)",datetime); 
} 


(2) 通过 <body> 标 签 的 onload 事件 加 载 步骤 (1) 中 编写 的 JavaScript 函数 ， 并 且 在 页 面 的 相应 位 置 加 入 


<div> 标 签 用 于 显示 倒计时 的 提示 信息 ， 关 键 代 码 如 下 : 
<body onLoad="javascript:countDown('2010 南非 世界 杯 ''2010-6-11)"> 
<div id="day_str" class="word_Green"></div> 


图 秘笈 心 法 


根据 本 实例 ， 读 者 可 以 在 页 面 的 指定 位 置 显 示 一 个 节日 倒计时 ， 还 可 以 在 页 面 显示 生日 提醒 器 等 。 
9.4 使 用 JavaScript 控制 DOM 


DOM 是 Document Object Model (文档 对 象 模型 ) 的 简称 ， 是 表示 文档 〈 如 HIML 文档 ) 和 访问 、 操 作 构 
成 文档 的 各 种 元 素 〈 如 HIML 标记 和 文本 串 ) 的 应 用 程序 接口 (API)。 它 提供 了 文档 中 独立 元 素 的 结构 化 、 面 
向 对 象 的 表示 方法 ， 并 允许 通过 对 象 的 属性 和 方法 访问 这 些 对 象 。 另 外 ， 文 档 对 象 模型 还 提供 了 添加 和 删除 文 
档 对 象 的 方法 ， 这 样 能 够 创建 动态 的 文档 内 容 。DOM 技术 在 进行 Ajax 开发 时 非常 有 用 。 本 节 将 通过 几 个 实例 
介绍 如 何 应 用 JavaScript 控制 DOM。 


实例 235 
图 实例 说 明 
在 DOM 中 ,文档 的 层次 结构 被 表示 为 一 棵 倒立 的 树 ， 树 根 在 上 ， 枝 叶 在 
下 ， 树 的 节点 表示 文档 中 的 内 容 。DOM 树 的 根 节 点 是 个 Document 对 象 。 本 实 创建 HTML 元 素 


例 将 介绍 如 何 应 用 JavaScript 的 Document 对 象 创建 HTML 元 素 。 运行 本 实例 ， 


如 图 9.30 所 示 ， 当 单 击 “ 创 建 ”按钮 后 ， 在 网 页 中 将 创建 一 个 HTML 文本 框 as 
元 素 。 三 “了 | 
国 关键 技术 > adl 


创建 HTML 元 素 ， 也 就 是 创建 一 个 节点 ， 通 常 借助 于 Document 对 象 的 。 图 930 创建 HTML 元 素 
createElement() 方 法 来 实现 。createElement() 方 法 的 语法 结构 如 下 : 


document.createElement(String elementName) 
参数 说 明 
@ document: 文档 对 象 模型 。 
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@ elementName: 表示 要 创建 的 HTML 元 素 的 名 称 。 
图 设计 过 程 
(1) 编写 创建 HTML 文本 框 的 JavaScript 函数 ， 关 键 代 码 如 下 : 
<script type="text/fiavascript"> 
function createInputO{ 
var element = document.createElement("input");: 
element.value=" 创 建 的 文本 框 元 素 "; 
document.getElementByTd("test").appendChild(element): 
ee 
(2) 创建 index.jsp 页 ， 在 按钮 处 的 onClick 事件 中 调用 JavaScript 函数 ， 然 后 在 表格 的 id 为 test 的 单元 格 
中 创建 一 个 文本 框 ， 关 键 代码 如 下 : 
<body> 
<table background="pg. bmp" width="270" height="200"> 
<tr><td align="center"> 创 建 HTML 元 素 </td> </tr> 
<tr><td id="fest" align="center”></td></tr> 
ee <td align="center"><input type="button” value=" 凶 / 奸 " onclick="createInput0"/></td> 
ee 
<lbody> 
图 秘笈 心 法 
需要 注意 的 是 ， 在 应 用 createElement() 方 法 创建 元 素 时 ， 里 面 的 字符 串 并 不 是 随意 填写 的 ， 而 是 HTML 文 
档 中 的 一 个 标记 名 。 例 如 ， 创 建 一 个 层 ， 该 参数 值 必须 为 div; 创建 一 个 表格 ， 该 参数 则 必须 为 table。 


实例 236 


图 实例 说 明 

当 一 个 节点 创建 成 功 之 后 ， 一 定 要 将 该 节点 添加 到 文档 中 才 会 显示 出 
来 ， 本 实例 将 介绍 如 何 添加 节点 。 运 行 本 实例 ,如 图 9.31 所 示 ， 当 单 击 “ 添 
加 ”按钮 后 ， 在 网 页 中 将 添加 一 个 HTML 层 元 素 。 


图 关键 技术 
添加 节点 的 方法 有 很 多 ， 对 于 最 普遍 的 HIML 元 素 ， 可 以 采用 
appendChild0 和 insertBoforeO 两 个 方法 添加 节点 ， 下 面 分 别 对 其 进行 介绍 。 
(1) appendChild(Node newNode) 
参数 说 明 
newNode: 表示 要 添加 的 节点 对 象 。 该 节点 对 象 也 就 是 HTML 元 素 对 象 ， 如 用 createElement( 方 法 创建 的 
节点 。 
(2) insertBofore(Node newNode,Node refNode) 
参数 说 明 
@ newNode: 表示 要 添加 的 节点 对 象 。 
@ refNode: 表示 在 该 节点 前 插入 一 个 节点 。 


图 设计 过 程 
(1) 编写 创建 HTML 文本 框 的 JavaScript 函数 ， 关 键 代码 如 下 : 


图 9.31 添加 节点 
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<script type—"textfavascript'> 
function createDivO{ 
var element = document.createElement("div"); 
elementinnerHTMI 一 "这 就 是 添加 的 节点 ": 
document getElementById("test").appendChild(element): 
} 
</script> 
(2) 创建 index.jsp 页 ， 在 按钮 处 的 onClick 事件 中 调用 JavaScript 函数 ， 然 后 在 表格 的 id 为 test 的 单元 格 


中 创建 一 个 文本 框 ， 关 键 代 码 如 下 : 
<body> 


<table background="bg. bmp” width="270" height="200"> 
<tr><td align="center"> 添 加 节点 </td> </tr> 
<tr><td id="test" align="center"></td></tr> 
<tr> 

<td align="center"><input type="button" value=" 诉 加 ' onclick="createDivO"/></td> 

</tr> 

</table> 

body> 


图 秘笈 心 法 
对 于 其 他 特殊 的 HTML 元 素 ， 则 包含 了 更 多 的 添加 节点 的 方法 。 例 如 ， 对 于 SELECT， 有 更 简单 的 方法 来 
添加 子 节点 ， 对 于 TABLE 和 TR， 也 有 其 他 方法 添加 子 节点 


初级 


实例 237 实用 指数 : 广 女 女 页 


图 实例 说 明 


本 实例 将 介绍 如 何 应 用 JavaScript 的 document 对 象 为 下 拉 列 表 添 加 选项 。 运行 本 实例 ， 如 图 9.32 所 示 ， 在 
JavaScript 中 ， 应 用 循环 向 下 拉 列 表 中 动态 添加 选项 。 


| | 关键 技 术 【为 下 拉 列 表 增 加 选 顺 】 


在 应 用 createElement0 方 法 创建 下 拉 列 表 元 素 时 ， 将 参数 设置 为 select 即 
可 ， 然 后 再 创建 参数 名 为 option 的 下 拉 列 表 选 项 ， 并 应 用 创建 的 SELECT 对 
象 的 appendChild(0 方 法 将 OPTION 选项 添加 到 下 拉 列 表 中 。 


~» AN 5 口 一 
图 设计 过 程 图 9.32 为 下 拉 列 表 增加 选项 


编写 为 下 拉 列 表 增 加 选项 的 JavaScript 函数 ， 关 键 代码 如 下 : 
‘<script type="textfavascript”> 
function createSelectO{ 
Var selectObj = document.createElement("select"): 
Var str=[" 吉 林 "." 辽 宁 "," 黑 龙 江 "," 北 京 "." 上 海 "" 天 津 "." 河 南 "." 河 北 "," 山 东 "," 山 西 "" 江 苏 "." 安 徽 "," 云 南 "]; 
for(var i=0;i<10:iHH){ 


Var op = document.createElement("option"); 
op.innerHTML=str[i]: 
selectObj.appendChild(op); 

} 

document.getElementById("test").appendChild(selectObj): 

} 
</script> 
国 秘笈 心 法 


在 正 6 之 前 ， 可 以 应 用 add(HTMLOptionElement element,HTMLOptionElement before) 方 法 为 下 拉 列 表 添 加 
一 个 选项 。 但 是 在 正 7 以 后 ， 这 个 方法 就 不 能 用 了 ， 所 以 ， 为 了 与 浏览 器 兼容 ， 建 议 改 用 appendChild0 方 法 。 
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2 | 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JavaScript 的 document 对 和 象 删除 下 拉 列 表 的 选项 。 
运行 本 实例 ， 如 图 9.33 所 示 ， 当 单 击 “ 删 除 ” 按 钮 时 ， 下 拉 列 表 的 最 后 一 个 选 
项 将 被 删除 。 


图 关键 技术 


对 于 SELECT 元 素 ， 应 用 的 是 remove0 方 法 来 删除 其 中 的 选项 ， 该 方法 的 
语法 结构 如 下 : 图 9.33 删除 下 拉 列表 的 选项 
Tremove(long index) 
参数 说 明 
index: 表示 要 删除 的 选项 的 索引 值 ， 如 果 该 索引 值 比 下 拉 列 表 中 的 选项 的 最 大 值 还 大 或 者 小 于 0， 那 么 该 
方法 不 会 删除 任何 选项 。 
图 设计 过 程 
(1) 编写 增加 下 拉 列 表 选项 的 JavaScript 函数 add0， 关 键 代 码 如 下 : 
function addO{ 
Var selectObj = Er es kn yi 
var op = document.createElement("option' 
op.innerHTML = document.getElementById("opValue").value: 
selectObj.appendChild(op); 


} 
(2) 编写 删除 下 拉 列 表 选 项 的 JavaScript 函数 del0， 关 键 代码 如 下 : 
function delO{ 
var selectObj = document.getElementById("show"); 
selectObj.remove(selectObj.length-1): 
} 
(3) 在 网 页 的 合适 位 置 添加 一 个 下 拉 列 表 元 素 ，id 为 show， 关 键 代码 如 下 : 


<select id="show" size="8" style="width:120px"> 


图 秘笈 心 法 
在 应 用 document 对 象 的 getElementById0 方 法 获取 到 SELECT 对 象 之 后 ， 其 length 属性 表示 下 拉 列 表 中 所 
有 选项 的 长 度 。 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JavaScript 的 document 对 象 在 网 页 中 添加 一 个 表格 ， 而 且 这 个 表格 的 单元 格 内 容 是 可 
编辑 的 ， 类 似 于 Excel 电子 表格 。 运 行 本 实例 ， 如 图 9.34 所 示 ， 双 击 表 格 中 的 单元 格 ， 即 可 对 其 内 容 进行 编辑 。 


图 关键 技术 
本 实例 实现 的 关键 之 处 是 ， 每 次 用 户 双击 单元 格 之 后 ， 单 元 格 的 值 将 被 设置 为 空 ， 并 在 单元 格 内 即时 插入 
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一 个 文本 框 ， 用 于 接收 用 户 输入 。 当 用 户 在 单元 格 的 文本 框 内 输入 相应 的 值 且 文本 框 失去 焦点 时 ， 将 单元 格 的 
文本 框 清空 ， 并 将 文本 框 的 值 作为 当前 单元 格 的 值 显示 出 来 ， 整 个 过 程 借助 的 是 动态 修改 HTML 元 素 的 属性 。 


JavaWeb 范 例 C$ 范 例 大 ”PHP 范例 
er NET 范 例 大 全 Ee | 


eaWeb 关 型 | 人 SP NET 生 型 村 交大 全 ”cf 型 模 PHP 内 型 


9.34 可 编辑 表格 


在 JavaScript 中 ， 大 家 都 知道 鼠标 单 击 事件 触发 的 是 onClick， 而 鼠标 双击 事件 触发 的 是 ondblclick 事件 ， 
HTML 元 素 失去 焦点 则 触发 的 是 onblur 事件 。 知 道 了 该 用 哪个 事件 之 后 ， 再 编写 触发 事件 所 调用 的 JavaScript 
函数 即 可 。 

图 设计 过 程 
(1) 创建 ndexjsp 页 ， 在 该 页 中 添加 一 个 表格 。 
(2) 编写 动态 编辑 表格 内 容 的 JavaScript 函数 edit0 和 元 素 失去 焦点 所 调用 的 函数 end0， 关 键 代码 如 下 : 
<script type="text/avascript”> 
/双击 单元 格 后 ， 在 单元 格 中 创建 文本 框 
var inputObj = document.createElement("input"); 
inputObj.type="text"; 
Var curCell; // 双 击 单元 格 后 的 当前 单元 格 
function edit(event){ 


if(event—nulD) { 
CurCell = window.event.srcElement: 
} 


else{ 


} 
inputObj.value=curCellinnerHTML: 。“ // 将 单元 格 的 值 填充 到 文本 框 


curCell = event.target; 


inputObj.onblur=end: // 当 文本 框 失 去 焦点 时 触发 end0 函 数 
curCell innerHTML=" "; /清空 当前 单元 格 内 容 
curCell.appendChild(inputObj): // 将 文本 框 添加 到 当前 单元 格 内 

} 

function endO{ 
curCell.innerHTML=inputObj.value; 


</scrip> 
(3) 在 index.jsp 页 的 表格 中 ， 在 鼠标 双击 事件 ondblclick 中 调用 edit0 函 数 ， 关 键 代码 如 下 : 
<table ondblclick="edit0” border="1> 


秘笈 心 法 
在 自 定义 的 edit0 函 数 中 ， 传 递 了 一 个 表示 当前 事件 的 event 对 象 ， 这 个 event 对 象 是 浏览 器 自动 创建 的 ， 
并 将 该 对 象 传递 给 事件 处 理 函 数 。 而 event 对 象 的 target 属性 返回 的 是 引发 事件 的 目标 对 象 。 例如， 在 表格 的 某 
个 单元 格 中 触发 了 ondblclick 事件 ， 则 event 对 象 的 target 返回 的 就 是 当前 这 个 单元 格 对 象 。 
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10.1 定时 业务 


在 Web 应 用 开发 过 程 中 ， 经 常会 用 到 一 些 定时 业务 。 例 如 ， 考 试 计 时 并 自动 提交 试卷 、 定 时 保存 草稿 等 。 
下 面 将 通过 这 两 个 例子 具体 介绍 如 何 实现 定时 业务 。 


力 实例 说 明 

在 开发 网 络 考试 系统 时 ， 考 试 计时 并 自动 提交 试卷 是 必 不 可 少 的 功能 。 由 于 在 答卷 过 程 中 ， 试 卷 不 能 刷新 ， 
所 以 需要 使 用 Ajax 实现 无 刷新 操作 。 运 行 本 实例 ， 访 问 准备 考试 的 页 面 mdexjsp， 在 该 页 面 中 ， 单 击 “ 开 始 考 
试 ” 按 钮 ， 将 打开 新 窗口 显示 开始 考试 的 页 面 ， 如 图 10.1 所 示 ， 页 面 会 自动 计时 ， 当 考试 时 间 结束 时 ， 将 自动 
提交 试卷 ， 并 弹出 如 图 10.2 所 示 的 提示 对 话 框 。 
Ce - CE 


| 莉 击 闻 | 20g 铀 计时 Co RH 闻 : 00:18-37 


En 


计算 机 专业 黄汤 考试 和 
身分 /0 分。 单 运 攻 ql 分 。 均 迁 0 分 


， 答 描 不 得 分 》 


不得 分) 


二 多 先 题 4 乌 是 
T4 1 对 于 yy 确 | 哪些 ? 
FT A a 
Fs A 
万 5 刷 g 阿 
eld pide Yoo 
远 
图 10.1 自动 计时 的 开始 考试 页 面 图 10.2 ”自动 提交 后 ， 弹 出 提示 对 话 框 
图 关键 技术 


本 实例 主要 是 利用 Ajax 异步 提交 技术 和 Servlet 技术 实现 的 。 显 示 在 考试 页 面 中 的 计时 时 间 是 在 Servlet 中 
设置 的 ， 需 要 通过 Ajax 的 异步 提交 不 断 地 请 求 Servlet， 从 而 获得 服务 器 返回 的 最 新 的 计时 时 间 的 数据 。 为 了 便 
于 维护 和 代码 的 重用 ， 可 以 将 Ajax 的 请 求 方法 封装 到 一 个 JavaScript 文件 中 ， 该 方法 可 以 作为 一 个 公共 方法 ， 
在 程序 中 使 用 时 可 以 直接 调用 。 

在 JavaScript 文件 中 构建 XMLHttpRequest 对 象 以 及 请 求 方法 ， 代 码 如 下 : 

je 

* 构建 XMLHttpRequest 对 象 并 请 求 服务 器 
+ @param reqType: 请 求 类 型 (GET 或 POST) 
*# @param url: 服务 器 地 址 


*+ @param async: 是 否 异步 请 求 
*# @param resFun: 响应 的 回调 函数 


function httpRequest(reqType.url.async.resFun.parameter){ 
var request = null: 
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这 windowXMLHttpRequest){ // 非 正 浏览 器 ， 创 建 XMLHttpRequest 对 象 
Tequest = new XMLHttpRequestO: 
jelse 这 window.ActiveXObject ){ WTE 浏览 器 ， 创 建 XMLHttpRequest 对 象 


Var arrSignatures = ["Msxml2 XMLHTTP", "Microsoft XMLHTTP", "Microsoft XMLHTTP", "MSXML2 .XMLHTTP.5.0"."MSXMI2. XMLHTTP.4.0", 
"MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP"]: 
for( var i= 0; i< arrSignatures.length; i++ ){ 
request = new ActiveXObject( arrSignatures[i] ); 
i( request || typeof request ) — "object" ) 
break: 
} 
} 
这 request || typeof request ) — "object" ){ 


if(reqType.toLowerCase0 一 "post"){ // 以 POST 方式 提交 
Tequest.open(reqType, Url true): /打开 服务 器 连接 
/设置 MIME 类 型 
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 
request.onreadystatechange = resFun; /设置 处 理 响应 的 回调 函数 
parameter = encodeURI(parameter): // 将 参数 字符 串 进行 编码 
Tequest.send(parameter); // 发 送 请 求 
} 
else{ /以 GET 方式 提交 
wl = urlt"?"+parameter; 
Tequest.open(reqType, url true); 1/ 打 开 服 务 器 连接 
Tequest.onreadystatechange = resFun; // 响 应 回调 函数 
Tequest.send(null); // 发 送 请 求 
; 
} 
elsef 
alert( "该 浏览 器 不 支持 Ajax! " ); 
i Tequest; 


} 


图 设计 过 程 


(1) 新 建 index.jsp 页 面 ， 该 页 面 是 用 户 访问 的 初始 页 。 该 页 面 中 主要 包含 一 个 “开始 考试 ”按钮 ， 该 按钮 


的 onClick 事件 将 调用 打开 考试 窗口 的 JavaScript 函数 ， 关 键 代码 如 下 : 


function showWindowO{ 
window.open('StartExam?action=startExam',",'width=750,height=500,scrollbars=1"); 
} 


(2) 新 建 名 为 StartExam 的 Servlet 实现 类 ， 该 类 用 于 创建 考试 的 开始 时 间 和 剩余 时 间 。 在 该 类 中 ， 创建 一 


个 全 局 变量 examTime， 用 于 记录 考试 时 间 ， 该 变量 的 值 是 在 web.xml 中 设置 的 ， 关 键 代 码 如 下 : 


<servlet> 
<servlet-name>StartExam</servlet-name> 
<servlet-class>com.lh.servlet.StartExam</servlet-class> 
<init-param> 
<param-name>examTime</param-name> 
<param-value>20</param-value> 
</init-param> 
</servlet> 


在 web.xml 中 设置 完 考试 时 间 后 ， 还 需要 在 Servlet 类 的 init0 方 法 中 获得 该 参数 值 ， 并 赋值 给 Servlet 类 的 


全 局 变量 examTime， 关 键 代码 如 下 : 


328 


public void initO throws ServletException { 
examTime=-Integer.parseInt(getInitParameter("examTime")); // 获 取 配置 文件 中 设置 的 考试 时 间 
} 


(3) 在 StartExam 类 中 ， 编 写 用 于 将 页 面 转发 到 开始 考试 页 面 的 方法 startExam0， 关 键 代 码 如 下 : 
public void startExam(HttpServletRequest request.HttpServletResponse response) 
throws ServletException IOException{ 
HttpSession session = request.getSession(): 
Tequest.setAttribute("time". examTime): /保存 考试 时 间 
session_setAttribute("startTimel".new DateO.getTimeO): ”// 保 存 当 前 时 间 的 毫秒 数 
request.getRequestDispatcher("startExam jsp") forward(request response); 
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编写 显示 考试 计时 的 方法 showStartTime0, 在 该 方法 中 ,首先 获取 保存 在 Session 中 的 考试 开始 时 间 的 毫秒 
值 ， 然 后 获取 当前 时 间 的 毫秒 值 ， 根 据 当前 时 间 毫 秒 值 和 开始 时 间 毫 秒 值 计算 出 小 时 数 、 分 钟 数 以 及 秒 数 ， 组 


合成 一 个 新 的 时 间 字 符 串 保存 在 request 对 象 中 。showStartTime0 方 法 的 具体 代码 如 下 : 
public void showStartTime(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 
response.setContentType("text/html:charset=GBK"): 
HttpSession session = request.getSession(); 
String startTime=session.getAttribute("startTime1").toString(); 


long a=Long.parseLong(start Time); 

long b=new java.util. Date().getTimeO; 
int h=(int)Math.abs((b-a)/3600000); 

int m=(int)(b-a)%3600000/60000; 

int s=(int)((b-a)%3600000)%60000/1000: 
String hour="",minute="",second—""; 


if(s<10){ 
second ="0"+s; 
jelsef 
second 
} 


String time=hour+":"+minutet+":"+second; 
Tequest.setAttribute("showStartTime",time); 


// 将 开始 时 间 转 换 为 毫秒 数 
/获取 当前 时 间 的 毫秒 数 
/获取 小 时 

/获取 分 钟 

/获取 秒 数 


/组 全 已 用 时 间 
// 将 生成 的 时 间 保 存 到 showStartTime 参数 中 


request.getRequestDispatcher("showStartTime.jsp").forward(request, response); 


} 

编写 计算 考试 剩余 时 间 的 方法 showRemainTime0， 在 该 方法 中 ， 首 先 获取 步骤 (3) 中 保存 在 Session 中 的 
考试 开始 时 间 ， 然 后 获取 当前 时 间 的 毫秒 值 ， 根 据 当前 时 间 毫 秒 值 和 开始 时 间 毫 秒 值 计算 出 小 时 数 、 分 钟 数 以 
及 秒 数 ， 组 合成 一 个 剩余 时 间 的 字符 串 保 存在 request 对 象 中 。showRemainTime0 方 法 的 具体 代码 如 下 : 

public void showRemainTime(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 


Tesponse.setContentType("text/html;charset=GBK"); 
HttpSession session = request.getSession(); 
String startTime=session.getAttribute("startTime").toString(); 


long a=Long.parseLong(start Time); 
long b=new java.util.Date().getTime(; 
long I=examTime*60000-(b-a-1000); 
int h=(int)Math.abs(r/3600000): 

int m=(int)(r)%3600000/60000; 

int s=(int)((1)%3600000)%60000/1000; 
String hour="",minute="",second=""; 


if(m<10){ 
minute= "0"+m:; 
Jelse{ 
minute= ""+m; 
} 
if(s<10){ 
second = "0"+s; 
yelse{ 
second =""+s; 
} 
String time=hour+":"+minute+":"+second: 


1/ 获取 开始 时 间 的 毫秒 数 
/获取 当前 时 间 的 毫秒 数 

1/ 计算 考试 剩余 时 间 的 毫秒 数 
/计算 小 时 

/计算 分 钟 

1/ 计算 秒 数 


// 组 合 剩余 时 间 
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Tequest.setAttribute("showRemainTime".time); // 将 生成 的 时 间 保存 到 showRemainTime 参数 中 
Tequest.getRequestDispatcher("showRemainTime.jsp").forward(request, response): } 

(4) 新 建 showStartTime.jsp 页 ， 用 于 输出 计时 开始 时 间 ， 关 键 代码 如 下 : 
<%@page contentType="text/htm!” pageEncoding="GBK"%> 
S{showStartTime} 

(5) 新 建 showRemainTime.jsp 页 ， 用 于 输出 计时 剩余 时 间 ， 关 键 代码 如 下 : 
<%@page contentType="text/html” pageEncoding="GBK"%> 
S${showRemainTime} 


(6) 新 建 开始 考试 页 面 startExam.jsp 页 ， 在 该 页 中 通过 调用 Ajax 请 求 方法 请 求 StartExam 类 ， 获 得 考试 的 


开始 时 间 和 剩余 时 间 ， 关 键 代码 如 下 : 

varrequestl= false; 

Varrequest2 = false; 

1 请求 Servlet 获得 开始 时 间 

function showStartTimeO{ 
Var url = "StartExam"; 
/此 处 需要 加 &nocache="+new DateO.setTime0O， 否 则 将 出 现时 间 不 自动 走动 的 情况 
Var parameter="action=showStartTimeé-nocache="+new Date().getTime(); 
Tequestl = httpRequest("post",url,true,callbackFunc.parameter): 

} 


/回调 函数 
function callbackFuncO{ 
if( requestl .readyState—4 ){ 
if( requestl.status — 200 ){ 
showStartTimediv.innerHTML=requestl1 .responseText; 
} 


} 
/请 求 Servlet 获得 剩余 时 间 
function showRemainTimeO{ 
Var url = "StartExam"; 
Var parameter="action=showRemainTime&-nocache="+new Date().getTime(); 
Tequest2 = httpRequest("post".url.true.callbackFunc_R.parameter): 
} 
/回调 函数 
function callbackFunc RO{ 
if( request2 .readyState—4 ){ 
if( request2.status 一 200 ){ 
h=request2 .responseText; 
showRemainTimediv.innerHTML=h; 
h=h.replace(N\s/g,""); /去 除 字符 串 中 的 Unicode 空白 符 
showRemainTimediv.innerHTML=h; 
if(h—"00:00:00"){ 
forml.submitO: 
} 


} 
} 


(7) 为 了 实现 页 面 加 载 后 自动 计时 ， 需 要 在 开始 考试 页 面 的 <body> 标 签 中 通过 onload 事件 应 用 window. 
setInterval() 方 法 调用 showStartTime() 和 ti 数 ， 关 键 代码 如 下 : 
<body onLoad="showsStartTime();showRemainTime();" onkeydown="keydownO"> 


图 秘笈 心 法 

在 构建 XMLHttpRequest 对 象 时 ， 应 该 考虑 到 浏览 器 的 兼容 性 。 不 同 的 浏览 器 下 创建 XMLHttpRequest 对 象 
的 方法 是 不 同 的 ， 支 持 window.XMLHttpRequest 对 象 的 浏览 器 有 Netscape 7.0+、Firefox 1.0+、Opera 8.0+、 
SeaMonkey 1.1+ 等 ， 如 果 是 这 些 浏览 器 时 ， 则 建立 新 的 XMLHttpRequest0 对 象 。 支 持 window.ActiveXObject 的 
浏览 器 为 Internet Explorer 5.0+, 如 果 是 这 个 浏览 器 时 , 则 建立 ActiveX 对 象 , 对 象 名 称 包括 Msxml2.XMLHTTP、 
Microsoft XMLHTTP、 MSXML2.XMLHTTP.5.0、 MSXML2.XMLHTTP4.0、 MSXML2.XMLHTTP3.0 和 MSXML2. 
XMLHTTP。 
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图 实例 说 明 

在 发 表 博 文 或 编写 邮件 时 ， 经 常 需要 输入 大 段 的 文字 内 容 ， 此 时 ， 如 果 系统 出 现 故 障 或 由 于 其 他 意外 情况 ， 
会 将 已 经 输入 的 文字 删除 ， 用 户 就 必须 重新 输入 ， 既 费时 又 费力 。 如 果 在 系统 中 添加 字段 保存 草稿 的 功能 ， 可 
以 有 效 地 解决 该 问题 。 运 行 本 实例 ， 如 图 10.3 所 示 ， 输 入 文章 标题 和 内 容 后 ， 每 隔 5 分 钟 系统 会 自动 保存 一 次 
草稿 。 在 页 面 左 侧 的 草稿 箱 中 ， 将 显示 被 保存 的 草稿 。 


个 人 信息 -天 加 文章 
文章 标题: 峡 昌 科技 
你 好 ， 明 日 科技 1 
博 主 : Wang 
博客 点 击 率 :15 次 
文章 内 容 : 
国 草 萄 答 
ai 
明日 
明日 
123 
要 上 地 方 全 


图 10.3 自动 保存 草稿 


图 关键 技术 


本 实例 主要 利用 Ajax 技术 实现 无 刷新 操作 。 另 外 ， 还 应 用 了 JavaScript 的 window 对 象 的 setInterval0 方 法 
实现 每 隔 一 段 时 间 就 执行 一 次 指定 的 JavaScript 函数 , 从 而 实现 定时 保存 草稿 的 功能 .window 对 象 的 setmterval0 
方法 的 语法 结构 如 下 : 

window.setInterval(Func,Interval); 

参数 说 明 

@ Func: 表示 将 要 执行 的 JavaScript 代码 串 ， 也 可 以 是 指定 的 函数 名 。 

@ Interval: 表示 每 次 调用 Func 的 时 间 间 隔 ， 以 毫秒 为 单位 。 

该 方法 含有 返回 值 ， 可 以 传递 给 window.clearInterval0 方 法 ， 从 而 取消 对 参数 Func 代码 或 者 函数 的 周期 执 
行 的 值 。 

图 设计 过 程 

(1) 创建 一 个 requestjs 文件 ， 在 该 文件 中 编写 构造 XMLHttpRequest 对 象 并 发 送 请 求 的 方法 。 

(2) 新 建 添加 文章 的 页 面 index.jsp， 在 该 页 的 <scrip 亿 标签 中 引用 requestjs 文件 ， 然 后 调用 Ajax 请 求 方法 
请 求 保存 文章 信息 的 页 面 ， 并 编写 回调 函数 ， 将 响应 结果 输出 在 页 面 中 ， 关 键 代 码 如 下 : 

<script language—"javascript” sre="js/requestjs’></script> 

‘<script language="javascript"> 

Var saveReq = false; 

/保存 草稿 

function autoSaveO{ 


var title=document.getElementById("title").value: 
var content—document.gefElementById("content").value: 
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if(title!="") { // 当 文章 标题 不 为 空 时 
var url = "saveDraftjsp": 
var param = "title="+title+"&content="+content; 
/调用 requestjs 文件 中 编写 的 Ajax 请 求 方法 ， 并 返回 请 求 对 象 
saveReq = httpRequest("post".url,true.callbackFunc_save.param); 
} 
} 
/回调 函数 
function callbackFunc_saveO{ 
if(saveReq readyState — 4){ 
if(saveRedq.status 一 200){ 
document.getElementById("sysTip") innerHTML = saveReq.responseText: 
} 
} 
‘</script> 
(3) 新 建 保存 文章 信息 的 页 面 saveDraftjsp， 在 该 页 面 中 首先 获取 文章 的 请 求 信息 ， 然 后 调用 查询 数据 库 
的 方法 查询 该 草稿 信息 是 否 已 被 保存 ， 如 果 没 被 保存 ， 则 调用 数据 库 保存 的 方法 将 文章 信息 保存 到 数据 库 中 ， 
关键 代码 如 下 : 
<%(@ page contentType="text/html; charset=GBK" language="java” %> 
<%(@ page import="java.util.*" %> 
<%(0 page import="com. lh.dao.*" %> 
<%6@ page import="com.Ih.bean. +” %> 
<% 


Tequest.setCharacterEncoding("UTF-8"); 
Tesponse.setCharacterEncoding("UTF-8"); 


String title = request.getParameter("title”); /获取 文章 标题 

String content = request.getParameter("content"); /获取 文章 内 容 

Article article = new Article0O: // 创 建文 章 类 对 象 ， 并 将 文章 信息 封装 到 该 对 象 中 
article.setTitle(title); // 设 置 文章 标题 

article.setContent(content); // 设 置 文章 内 容 

Calendar ¢ = Calendar.getInstance(); // 设 置 文章 的 保存 时 间 


String time=c.get(c.YEAR)+"-"+c.get(c.MONTH)+"-"+c.get(c.DAY_OF MONTH)+" "+c.get(c.HOUR_OF_DAY)+":" 
+c.get(c.MINUTE)+":"+c.get(c.SECOND); 
article.setCreateTime(time); 
boolean res = ArticleDao.getInstance0.getArticle(article): 
if(1res){ 
boolean b= ArticleDao.getInstance().saveArticle(article); 


){ 
outprintin(" 文 章 内 容 已 经 自动 保存 到 草稿 箱 !"); 
1 


%> 
(4) 在 index.jsp 页 面 中 通过 window 对 象 的 setInterval0 方 法 每 隔 5 分 钟 执行 一 次 保存 草稿 的 操作 ， 关 键 代 
码 如 下 : 
Var delay=1000*60*5; // 定 义 延迟 时 间 ， 这 里 为 5 分 钟 
timer=window.setInterval(autoSave, delay); /| 每 隔 5 分 钟 保存 一 次 草稿 


(5) 编写 封装 文章 信息 的 JavaBean 类 Article、 数 据 库 连 接 类 DBCon 以 及 数据 库 操作 的 类 ArticleDao。 由 
于 篇 幅 有 限 ， 此 处 不 作 详 细 介 绍 ， 具 体 代码 请 参见 本 书 附 赠 的 光盘 。 


图 秘笈 心 法 
本 实例 没有 用 Servlet， 而 直接 通过 JSP 页 来 处 理 请 求 并 调用 保存 数据 的 方法 。 由 于 JSP 页 是 运行 在 服务 器 


端的 ， 在 运行 时 ，JSP 页 会 被 编译 成 类 似 于 Servlet 的 类 文件 。 所 以 ， 当 处 理 简单 的 请 求 时 可 以 直接 使 用 JSP 页 
来 代替 Servlet。 


10.2 改善 用 户 体验 
在 Ajax 应 用 中 ， 可 以 实现 在 不 刷新 整个 页 面 的 情况 下 对 部 分 数据 进行 更 新 ， 从 而 降低 了 网 络 流量 ,给 用 户 
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带 来 了 更 好 的 体验 。 下 面 将 通过 几 个 实例 介绍 通过 Ajax 实现 改善 用 户 体验 的 具体 应 用 。 


初级 
实用 指数 : 三 丰 让 宙 


实例 242 


图 实例 说 明 

在 实现 用 户 注册 或 商品 信息 添加 时 ， 经 常 需要 验证 用 户 名 或 添加 的 商品 名 称 是 否 唯一 。 这 种 验证 操作 应 该 
在 整个 表单 提交 之 前 完成 ， 如 果 通 过 提交 整个 表单 来 实现 验证 用 户 名 是 否 重复 ， 这 种 做 法 是 不 可 取 的 。 这 样 的 
问题 应 该 由 Ajax 来 解决 ， 通 过 Ajax 异步 提交 验证 用 户 名 ， 不 仅 可 以 有 效 地 改善 用 户 体验 ， 而 且 提 高 了 网 页 的 
运行 速度 。 运 行 本 实例 ， 如 图 10.4 所 示 ， 在 用 户 注册 表单 中 输入 用 户 名 “mr”， 单 击 “[ 检 测 用 户 ]” 超 链接 ， 如 
果 该 用 户 名 在 数据 库 中 已 经 存在 ， 会 弹出 “用 户 名 已 存在 ， 请 重新 输入 !” 的 提示 对 话 框 。 


DamamP 

用 户 名: 有 
EE 

请 二 友 : 

» 用 户 名 已 存在 ， 请 重新 输入 ! 

性别 : 
地 址 : 

a Lm 

重要 | 


图 10.4 检查 用 户 名 是 否 重复 


图 关键 技术 

本 实例 主要 是 应 用 Ajax 技术 来 实现 的 。Ajax 的 XMLHttpRequest 对 象 不 仅 可 以 通过 responseText 属性 获得 
服务 器 返回 的 普通 字符 串 类 型 的 数据 , 而 且 还 可 以 通过 responseXML 属性 获得 服务 器 返回 的 XML 格式 的 数据 。 
如 表 10.1 所 示 ， 在 XMLHttpRequest 对 象 中 包含 了 一 些 常用 属性 及 说 明 。 

表 10.1 XMLHttpRequest 对 象 的 常用 属性 及 说 明 
属 性 说 了 明 

用 于 指定 状态 改变 时 所 触发 的 事件 处 理 器 。 在 Ajax 中 ， 每 个 状态 改变 时 都 会 触发 这 个 事件 处 
理 器 ， 通 常会 调用 一 个 JavaScript 函数 
用 于 获取 请 求 的 状态 。 该 属性 共 包 括 5 个 属性 值 。 其 中 ，0 表示 未 初始 化 ，1 表示 正在 加 裁 ，2 
表示 已 加 载 ，3 表示 交互 中 ，4 表示 完成 
responseText 属性 用 于 获取 服务 器 的 响应 ， 表 示 为 字符 串 
responseXML 属性 用 于 获取 服务 器 的 响应 ， 表 示 为 XML。 这 个 对 象 可 以 解析 为 一 个 DOM 对 象 
stams 属性 用 于 返回 服务 器 的 HITP 状态 码 ， 常 用 的 状态 码 有 200〈 表 示 成 功 ) 、202 (表示 请 求 被 接受 ， 
但 尚未 成 功 ) 、400 (错误 的 请 求 )》 、404 (文件 未 找到 ) 、500〈 内 部 服务 器 错误 ) 


onreadystatechange 属性 


readyState 属性 


图 设计 过 程 
(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 
(2) 新 建 用 户 注册 表单 页 indexjsp， 在 表单 中 包含 一 个 检测 用 户 的 超 链接 ， 超 链接 的 onClick 事件 会 调用 
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检查 用 户 名 的 checkName0 方 法 ， 关 键 代码 如 下 : 
<t> 


<td align="center"> 用 户 名 :</td> 
<td><input name="usemame" type="text” class="table” id="username"> 
<a href 伍 #" onClick="checkName0">[ 检 测 用 户 ]</a>&nbsp:*</td> 
A> 


“[ 检 测 用 户 ]” 超 链接 调用 的 checkName0 方 法 的 关键 代码 如 下 : 
var request=false; 
function checkNameO{ 
var name=document.getElementById("usermame").value; 
if(name—nullllname—""){ 
alert(" 请 输入 用 户 名 ! "); 
document getElementById("username") focusO: 


return false; 

} 

else{ 
var url= "UserServlet"; /服务 器 地 址 
var param = "name="+name; // 请 求 参数 


request=httpRequest("post",url,true,callbackFunc,param); 1/ 调用 Ajax 提交 请 求 方法 
i } 
(3) 新 建 Servlet 的 实现 类 UserServlet， 在 该 类 的 doPost0 方 法 中 获得 通过 Ajax 异步 提交 的 用 户 名 ， 然 后 
根据 此 用 户 名 查询 数据 库 是 否 存 在 该 用 户 ， 将 查询 结果 以 XML 格式 响应 给 客户 端 ， 关 键 代 码 如 下 : 
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); 
response.setContentType( "text/xml:charset=UTF-8" ); /设置 响应 正文 格式 为 test/xml 
/禁止 缓存 
Tesponse.addHeader( "Cache-Control", "no-store.no-cache.must-revalidate" ); 
Tesponse.addHeader( "Cache-Control", "post-check=0,pre-check=0" ); 
response.addHeader( "Expires", "0" ); 
Tesponse.addHeader( "Pragma", "no-cache” ); 
PrintWriter out = response.getWriter(); 
outprintln( "<?xml version=\"1.0\" encoding=\"utf-8\"?>" ); 
outprintln( "<userName>" ); 


String name = request.getParameter( "name” ); /获取 用 户 名 

name= java.net.URLDecoder.decode(name."UTF-8"); /根据 UTF-8 将 字符 串 解 码 
boolean result=UserDao.getInstance().checkUserName(name.trim()):// 查 找 数据 库 是 否 存在 该 用 户 名 
if(!result) 


‘out.printin("<nolIterance id=\"ok\"/>"); 
else 
out.printin("<iterance>"+name+"</iterance>"); 
out.println( "</userName>" ); 
out.closeO; 
} 
(4) 在 indexjsp 页 面 中 编写 Ajax 回调 函数 ， 获 得 服务 器 端 返回 的 XML 格式 的 信息 ,根据 返回 的 XML 信 
息 判 断 用 户 名 是 否 存 在 ， 并 弹出 提示 对 话 框 ， 关 键 代码 如 下 : 
// 响 应 的 回调 函数 
function callbackFuncO{ 
if( request.readyState—4 ){ 
if( request.status 一 200 ){ 
// 著 得 从 服务 器 端 返回 的 XML 信息 ，nolterance 为 XML 中 的 元 素 
Var nolterance=request.responseXML.getElementsByTagName("nolterance"); 
// 获 得 从 服务 器 端 返回 的 XML 信息 ，iterance 为 XML 中 的 元 素 
var iterance=request.responseXMI..getElementsByTagName("iterance”); 
if(typeof(nolterance)!="undefined"&-é& nolterance length>0){ 
alert(" 恭 喜 您 ， 此 用 户 名 可 以 注册 ! "); 
Tequest—false; 
return true; 


} 

if(typeof(iterance)!="undefined"&-& iterance.length>0){ 
alert(" 用 户 名 已 存在 ， 请 重新 输入 ! "): 
document.getElementById("username") focus0: 
Tequest=false; 
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} 
} 


(5) 编写 连接 MySQL 数据 库 的 DBCon 类 、 封 装 用 户 信息 的 JavaBean 类 User 以 及 查询 数据 库 中 用 户 名 是 
否 重复 的 UserDao 类 。 这 几 个 类 的 实现 比较 简单 ， 由 于 篇 幅 有 限 ， 具 体 代码 请 参见 本 书 的 附 赠 光 盘 。 


国 秘笈 心 法 


在 通过 Servlet 回 传 给 浏览 器 XML 格式 的 数据 时 ， 要 指定 响应 格式 为 XML， 具体 代码 如 下 : 
Tesponse.setContentType( "text/xml:charset=UTF-8" ); 


力 实例 说 明 
在 各 大 网 站 或 者 Web 企业 级 应 用 程序 中 ， 都 会 在 首页 中 包含 用 户 登录 的 入 口 。 当 用 户 输 入 用 户 名 和 密码 并 
提交 后 ， 会 查询 数据 库 ， 验 证 用 户 名 和 密码 是 否 正确 。 当 然 ， 验 证 用 户 登录 的 方法 可 以 通过 将 整个 页 面 都 提交 


来 实现 ， 但 是 考虑 到 这 种 方法 会 影响 到 用 户 的 体验 ， 用 户 不 想 在 另 一 个 页 面 中 发 现 自己 登录 失败 ， 然 后 再 后 退 
到 登录 页 重新 登录 这 样 多余 的 操作 。 所 以 应 该 使 用 Ajax 来 处 理 这 样 的 问题 。 运 行 本 实例 ， 如 图 10.5 所 示 ， 输 
入 用 户 名 和 密码 后 ， 单 击 “ 登 录 ” 按 钮 ， 如 果 用 户 名 和 密码 错误 ， 会 弹出 提示 对 话 框 。 


Tr 


图 10.5 ”验证 用 户 登录 


图 关键 技术 


本 实例 的 实现 主要 是 通过 Ajax 技术 将 用 户 名 和 密码 信息 异步 提交 到 Servlet 中 ， 然 后 在 Servlet 中 根据 获得 
的 用 户 名 和 密码 查询 数据 库 ， 最 后 响应 给 客户 端 XML 格式 的 查询 结果 。 客 户 端 通过 Ajax 回调 函数 来 获得 服务 
器 返回 的 XML 信息 ， 并 根据 XML 信息 给 出 相应 的 提示 信息 。 
图 设计 过 程 
(1) 创建 requestjs 文件 ， 在 该 文件 中 编写 Ajax 请 求 方法 。 
(2) 新 建 用 户 登 录 页 indexjsp， 在 该 页 中 首先 导入 requestjs 文件 ， 然 后 在 <scrip 亿 标签 中 编写 Ajax 请 求 服 


务 器 的 JavaScript 函数 和 验证 用 户 名 和 密码 是 否 合法 的 JavaScript 函数 ， 关 键 代码 如 下 : 
<script type="tertjavascript" sre="js/requestjs "</script> 


Var opi a ; 
// 登 录 请 求 
function enterO{ 
if(checkInsertO){ 
var name=document.getElementById("usermame").value:; /用 户 名 
var pwd = document.getElementById("usermpwd") -value: /密码 
var url="UserLoginServlet": /服务 器 地 址 


var param ="action=checkLogin&name-"tname+"&pwd="+pwd: ” // 请 求 参 数 
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opinionRequest=httpRequest("post".url.true.callbackFunc.param): /调用 请 求 方法 


} 


} 
/验证 用 户 名 密码 是 否 合法 
function checkInsertO{ 
var name = document. getElementById("username").value; 
var pwd = document.getElementById("userpwd").value; 
if(name—nulllname—""){ 
alert(" 请 输入 您 的 账号 ! "); 
document.getElementById("username").focus(); 
return false; 
. 
if(pwd—nulllpwd—""){ 
alert(" 请 输入 您 的 密码 ! "); 
document,getElementById("usermpwd") focus0O: 
return false; 


1 
if(pwd!=null&&pwd!=""){ 
if(pwd.length<6llpwd.length>16){ 
alert(" 输 入 有 误 ， 密 码 长 度 为 6 一 16 位 ! "); 
document.getElementById("userpwd") .focus0: 


return false; 
二 
} 
return true; 
} 
</script> 


(3) 创建 Servlet 的 实现 类 UserLoginServlet， 该 类 主要 用 于 验证 用 户 登 录 。 在 doPost0 方 法 中 获得 用 户 名 
和 密码 信息 ， 然 后 根据 用 户 名 和 密码 查询 数据 库 ， 最 后 响应 给 客户 端 XML 格式 的 结果 ， 关 键 代 码 如 下 : 
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); 
Tesponse.setCharacterEncoding("UTF-8"); 
Tesponse.setContentType( "text/xml:charset=UTF-8" ); /设置 响应 格式 为 test/xml 
/禁止 缓存 
Tesponse.addHeader( "Cache-Control", "no-store.no-cache.must-revalidate” ); 
Tesponse.addHeader( "Cache-Control", "post-check=0,pre-check=0" ); 
response.addHeader( "Expires", "0" ); 
Tesponse.addHeader( "Pragma", "no-cache" ); 
PrintWriter out = response.get Writer(); 
out.printin( "<?xml version=\"1.0\" encoding=\"utf-8\"?>" ); 
outprintin( "<checkLogin>" ); 
String name = request.getParameter( "name” ); /获取 用 户 名 
String pwd = request.getParameter("pwd"); /获取 密码 
name= java.net.URLDecoder.decode(name."UTF-8"): /根据 UTF-8 将 字符 串 解码 
User user = new UserO: 
User.setName(name); 
User.setPwd(pwd); 
boolean result=UserDao.getinstance().checkLogin(user): 
if(result—true) 
out println("<hasUser id=\"ok\"/>"); 


else 

out printin("<noUser>"+name+"</noUser>"); 
out.printin( "</checkLogin>" ); 
out.closeO; 


(4) 在 web.xml 文件 中 配置 UserLoginServlet 类 ， 关 键 代码 如 下 : 

<servlet> 
<description>This is the description of my J2EE component</description> 
<display-name>This is the display name of my J2EE component</display-name> 
<servletname>UserLoginServlet</servletname> 
<servlet-class>com lh servlet UserLoginServlet</servlet-class> 

<servlee> 

<servlet-mapping> 
<servletname>UserLoginServlet</servletname> 
<url-pattern>/UserLoginServiet</url-pattern> 

</serviet-mapping> 
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<welcome-file-list> 


<welcome-file>index.jsp</welcome-file> 
</welcome-file-list> 


(5) 编写 连接 MySQL 数据 库 的 DBCon 类 、 封 装 用 户 信息 的 JavaBean 类 User 以 及 数据 库 操作 的 类 User 
Dao。 这 几 个 类 的 实现 比较 简单 ， 由 于 篇 幅 有 限 ， 有 具体 代码 请 参见 本 书 的 附 赠 光 盘 。 


图 秘笈 心 法 

应 用 Ajax 请 求 时 , 为 了 避免 出 现 中 文 乱码 问题 , 已 经 通过 JavaScript 中 的 encodeURIO 方 法 对 请 求 数据 进行 
了 编码 。 所 以 ， 在 Servlet 中 获得 这 些 请 求 数据 时 ， 应 该 通过 java.net.URLDecoder 类 中 的 decode0 方 法 对 请 求 数 
据 进 行 解码 ， 语 法 格式 如 下 : 


name= java.net.URLDecoder.decode(name,"UTF-8"); /根据 UTF-8 将 字符 串 解码 


图 实例 说 明 


在 网 上 拍卖 的 网 站 中 ， 主 要 功能 就 是 限时 竞拍 。 本 实例 将 介绍 如 何 通过 Ajax 实现 限时 竞拍 。 运 行 本 实例 ， 
首先 进入 的 是 拍品 列表 页 面 ， 默 认 显示 的 是 “正在 进行 的 拍卖 ”的 拍品 列表 ， 选 择 “ 已 经 结束 的 拍卖 ”选项 卡 ， 
将 显示 已 经 结束 拍卖 的 拍品 列表 ， 在 该 页 面 中 单 击 某 一 拍品 列表 右 侧 的 “查看 明细 ”按钮 ， 可 以 看 到 该 拍品 的 
基本 信息 及 出 价 记录 。 在 正在 进行 拍卖 的 拍品 列表 页 面 中 ， 单 击 某 一 拍品 列表 右 侧 的 “我 要 出 价 ” 按 钮 ， 将 进 
入 拍品 出 价 页 面 ， 在 该 页 面 中 将 显示 拍品 的 基本 信息 和 当前 出 价 情况 ， 如 果 要 为 该 拍品 出 价 ， 需 要 先 登录 网 站 ， 
登录 后 将 显示 如 图 10.6 所 示 的 页 面 ， 这 时 就 可 以 为 拍品 出 价 了 。 


首页 一 正在 进行 的 拍卖 一 于 


当前 价格 : 600.0《 元 ) 


领先 者: memerdber 
起 拍 价 ; 508.8《 元 》 最 小 加 价 巾 度 : 10 《元 》 
= (EEE #01, wa 


< 制作 时 间 : 275 天 8j5 作 路” 
开始 时 间 : 2010.03.05113000 
结束 时 间 : 2011-03-31113000 

3 次数 : 2 出 从 次 下 :1 


最 新 20 条 出 价 记录 : 。 [局 


了 所 价格 出 全 失态 
‘remember 6000 (元 ) 2010-06-29 1032:46 领先 
1 革 告 :一 日 出 人 mI 表 你 已经 认同 了 本 P35 《 拍 实 相关 损 则 》， 并 承担 相 庙 素 任 
当前 用 户 : emerber 
总 工 作 : 只 能 给 和 数字 。 单 位 为 : 人 民 币 元 


10.6 ”限时 竞拍 
图 关键 技术 


在 实现 限时 竞拍 时 ， 最 重要 的 技术 就 是 应 用 Ajax 实现 异步 操作 ， 主 要 是 应 用 Ajax 实时 获取 商品 拍卖 的 剩 
余 时 间 以 及 实时 获取 商品 的 最 高 出 价 信息 。 


图 设计 过 程 
(1) 创建 requestjs 文件 ， 在 该 文件 中 编写 Ajax 请 求 方法 。 


如 下 : 


actio 


拍品 
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(2) 创建 限时 竞拍 的 首页 index.jsp， 该 页 面 为 一 个 中 转 页 ， 用 于 将 页 面 重 定向 到 拍品 列表 页 面 ， 关 键 代 码 


<96response sendRedirect("AuctionServlet?action=getRes&state=07: 96> 
(3) 创建 Servlet 的 实现 类 AuctionServlet， 并 且 在 该 Servlet 的 doPost0 方 法 中 获取 action 参数 的 值 ， 根 据 
n 参数 值 的 不 同 来 调用 不 同 的 方法 ， 关 键 代码 如 下 : 
protected void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException{ 
String action = request.getParameter("action"); 


if ("getRes".equals(action)) 

getRes(request, response); /查询 拍品 信息 的 方法 
else if ("getSingleRes".equals(action)) 

getSingleRes(request, response); // 查 询 单个 拍品 信息 
else if ("getRemainTime".equals(action)) 

getRemainTime(request, response); // 实 时 获取 剩余 时 间 
else if ("getBidInfo".equals(action)) 

getBidInfo(request, response); /获取 当前 拍品 的 最 高 出 价 信息 
else if ("logout".equals(action)) 

logout(request, response): /退出 
elseif ("login".equals(action)) 

login(request, response); /登录 
€lse if ("bidding".equals(action)) 

bid(request, response); /保存 当前 出 价 信息 


} 
在 AuctionServlet 中 编写 getRes0 方 法 ， 获 取 请 求 中 的 拍品 信息 ， 然 后 查询 数据 库 ， 从 数据 库 中 获取 相应 的 
信息 ， 最 后 将 页 面 转发 到 拍品 列表 页 面 。getRes0 方 法 的 具体 代码 如 下 : 
Private void getRes(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
response.setCharacterEncoding("UTF-8"); 
int isEnd = Integer.parseInt(request.getParameter("state")); /获取 状态 参数 
/查询 拍品 信息 
ConnDB conn = new ConnDB0; 
String sql = "SELECT 1.+,b.heightPrice FROM tb_resrLEFT JOIN (select resId ,max(bid) heightPrice FROM tb_biddinglist GROUP BY resId) b ON 
rid=b.resId WHERE isEnd="+ isEnd; 
ResultSet rs = conn.executeQuery(sql): 
List<ResForm> list = new ArrayList<ResForm>(); /创建 保存 拍品 信息 的 List 集合 对 象 


While (rs.next0) { 
ResForm res = new ResFormO: 


Tes.setId(rs.getInt(1)); /ID 号 
Tes.setNametrs.getString(2)); /拍品 名 称 
Tes.setStartPrice(rs.getFloat(3)); /起 始 价 
Tes.setBreadth(rs.getInt(4)); /加 价 幅度 


Tes.setStartTime(java.text.DateFormat.getDateTimeInstance().parse(rs.getString(5))): // 起 始 时 间 
res.setEndTime(java.text.DateFormat.getDateTimelInstance().parse(rs.getString(6))); /结束 时 间 


res.setHit(rs.getInt(7)); /浏览 次 数 
res.setIsEnd(rs.getInt(8)): // 是 否 结束 
res.setPicture("images/goods/" + rs.getString(9)); 
res.setHeightPrice(rs.getString(10) 一 null ? 0 : Float.valueOftrs.getString(10))); /设置 最 高 竞价 
list.add(res); 
} 
} catch (Exception e) { 
e.printStackTrace(); 
ee 
Tequest.setAttribute("resList". list): // 将 查询 到 的 拍品 信息 保存 到 request 中 
String state = isEnd 一 0? "正在 进行 的 拍卖 ": "已 经 结束 的 拍卖 "; 
Tequest.setAttribute("state", state): /保存 当前 状态 到 request 中 


et getRequestDispatcher("main jsp") forward(request response): 


(4) 创建 商品 拍卖 列表 页 main.jsp， 关 键 代码 如 下 : 
<!-- 根 据 状态 显示 用 于 控制 显示 内 容 的 选项 卡 --> 
<div style="height: 34px; width:9796; border-bottom:solid 5px #BADF75; "> 
<c:if test="$ {requestScope.state 一 ' 正 在 进行 的 拍卖 "> 
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<img src="images/time? 03.jpg” width="120" height="34"> 
<a href="AuctionServliet?action=getResé&state=1"> 

<img src="images/time?_04.jpg” width="121" height="34" border="0"> 
</a> 


<c:it> 
<c:iftest="$ {requestScope.state!= 正 在 进行 的 拍卖 "> 
<a href="AuctionServiet?action=getRes&state=0"> 
<img src="images/time4_03.jpg” width="120" height="34" border="0”> 
</a> 
<img src="images/time4_04.jpg” width="121" height="34" border="0"> 
<c:ift> 
</div> 
<!-- 显 示 拍品 列表 --> 
<div id="goodsList”> 
<table width="9796" height="59" border="0" cellpadding="0" cellspacing="0”> 
<c:forEach items="$ {requestScope.resList}" var="7es "> 
<th> 
<td align="center ”> 
<img sre="$ {res.picture} ” width="80" height="66">é-nbsp;&nbsp: 
<td> 
<td>$ {res.name}<br> 浏 览 次 数 : Sf{res.hit}</td> 
<td > 起 拍 价 : $ {res.startPrice} (元 ) <br> 
最 高 竞价 : <font color="red">$ {res.heightPrice}</font> (元 ) 
<ftd> 
<c:if test="$ {requestScope.state 一 ' 正 在 进行 的 拍卖 "> 
<td align="center’> 
<a href="AuctionServiet?action=getSingleRes&id=S{res.id} > 
<img src="images/bidjpg" border="0"></a> 


<cif> 
<c:if test="$ {requestScope.state!=' 正 在 进行 的 拍卖 "> 
<td align="center"> 
<a href="AuctionServiet?action=getSingleRes&id=S{res.id} "> 
<img src="images/detailjpg”" border="0"></a> 
</td> 
<cit> 
<t> 
</c:forEach> 
</table> 
<div> 
(5) 在 AuctionServlet 中 编写 getSingleRes() 方 法 ， 该 方法 用 于 查询 单个 拍品 信息 。 在 该 方法 中 ， 首 先 获取 
要 查询 的 拍品 的 号 ， 并 从 数据 库 中 查询 指定 拍品 的 详细 信息 ， 然 后 获取 该 拍品 的 详细 出 价 记 录 ， 再 将 浏览 次 
数 加 1， 最 后 将 拍品 信息 、 出 价 记 录 和 拍品 ZD 保存 到 request 中 ， 并 将 页 面 转发 到 显示 拍品 详细 信息 的 页 面 ， 
关键 代码 如 下 : 
Private void getSingleRes(HttpServletRequest request, 
HttpServletResponse response) throws ServletException, IOException { 
response.setCharacterEncoding("UTF-8"): 
int id = Integer.parseInt(request.getParameter("id")): /获取 要 查询 拍品 的 ID 号 
/查询 拍品 信息 
ConnDB conn = new ConnDBO; 
String sql = "select t1.*,t2.username from (SELECT 1.*.b.heightPrice,b.bidCount FROM tb_res r LEFT JOIN (select resId .max(bid) heightPrice.count(*) 
bidCount FROM tb_biddinglist GROUP BY resId) b ON rid=b.resId) t1 INNER JOIN (select ridu.username from tb_res r LEFT JOIN (select 
biresId,u.userName from (select b.* from tb_biddinglist b inner join (select resId.max(bid) maxbid from tb_biddinglist group by resId) m ON 
b.resId=m.resId AND b.bid=m.maxbid) b INNER JOIN tb_user u ON b.bidder=uid )u ON rid=u.resId) t2 ON t1.id=t2.id WHERE t1.id="+id + ""; 
ResultSet rs = conn.executeQuery(sql); // 执 行 查询 语句 
ResForm res = new ResFormO: 
try{ 
证 (rsnextO) { 
Tes.setId(rs. getInt(1)); 
Tes.setName(rs.getString(2)): 
Tes.setStartPrice(rs.getFloat(3)); 
Tes.setBreadth(rs.getInt(4)); 
Date startT = java.text.DateFormat.getDateTimeInstance() .parse(rs.getString(5)) 
Date endT = java.text.DateFormat.getDateTimelnstanceO.parse(rs.getString(6)) 
Tes.setStartTime(startT): 
res.setEndTime(endT); 
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Tes.setHit(rs.getInt(7)): 
Tes.setIsEnd(rs.getInt(8)): 
Tes.setPicture("images/goods/" + rs.getString(9)); 
float heightPrice = (rs.getString(10) — null)?0.0F 
:Float.valueOftrs.getString(10)) floatValueO; 


Tes.setHeightPrice(heightPrice): /设置 最 高 竞价 
int bidCount = (rs.getString(11) — null) ? 0 : Integer.parselnt(rs.getString(11)): 
res.setBidCount(bidCount); 


Tes.setBidder(rs.getString(12) 一 null ? " 暂 无 " : rs.getString(12)); 
} 
} catch (Exception e) { 
e.printStackTrace(); 
r 直 办 中 中 机 直 中 对 取出 价 记录 于 于 本 下达 本 本 看 丰 字 / 
String sql list = "SELECT b.*,u.userName FROM tb_biddinglist b INNER JOIN tb_user u ON b.bidder=u.id WHERE bresld="+ id + "ORDER BY 
b.bid DESC"; 
ResultSet rs_list = conn.executeQuery(sql list); 
List<BidListForm> list_bidlist = new ArrayList<BidListForm>(); 
try{ 
int flag = 0; 
While (rs_listnextO) { 
BidListForm bidlist = new BidListForm(); 
// 将 最 后 出 价 的 记录 标记 为 领先 状态 ， 其 他 记录 标记 为 出 局 状态 


if (flag—O) { 

bidlist.setState("<font style='color:red> 领 先 </font>"); 

flag=1; 
}else{ 

bidlist.setState("<font style='color:green'> 出 局 </font>"); 
i 
bidlist.setId(rs_list.getInt(1)); /获取 记录 了 D 
bidlist.setBid(rs_list.getFloat(3)); /获取 出 价 
bidlist.setBidTime(java.text.DateFormat.getDateTimelnstance() 

.parse(rs_list.getString(5))): // 获 取出 价 时 间 

bidlist.setBidder(rs_list.getString(6)): /获取 出 价 人 ID 


list_bidlist.add(bidlist); 
} 

} catch (Exception e) { 
e.printStack Trace(); 


/向 检 中 和 中 中 相生 注 站 3 灶 加 下 于 本来 中 中 站 守 只 中 相 相 中 
String sql_updateHit = "UPDATE tb_res SET hit=hit+t1 WHERE id=" + id 十" 


conn.executeUpdate(sql_updateHit); /执行 更 新 语句 

/下 下 中 中 中 和 机 中 和 让利 站 中 中 中 丰 中 站 中 中 丰 中 中 中 中 中 

conn.closeO; /关闭 数据 库 连 接 
request.setAttribute("resInfo", res); // 将 查询 到 的 拍品 信息 保存 到 request 中 
request.setAttribute("id", id); 

Tequest.setAttribute("bidInfo", list_bidlist): // 将 出 价 记录 保存 到 request 中 


Tequest.getRequestDispatcher("detail.jsp").forward(request, response); 
} 


(6) 在 detailjsp 页 面 中 ,编写 创建 Ajax 对 象 的 方法 getRemainTime()， 用 于 向 服务 器 发 送 请 求 ， 实 时 获取 
剩余 时 间 ， 关 键 代 码 如 下 : 
‘<script src=")s/requestjs"></script> 
<script language="javascript”> 
var timeRequest = false; 
var bidRequest =false; 
var listRequest = false: 
DE OE SD E25 E353: EE) DR 
function getRemainTimeO { 
Var url="AuctionServlet"; 1/ 服务 器 地 址 
1// 需 要 加 &nocache="+new DateO.getTimeD， 否 则 将 出 现 剩余 时 间 不 更 新 的 情况 
var param =—"action—getRemainTime&id=$ {requestScope.id} &nocache="+ new Date().getTime(); 
timeRequest=httpRequest("post".url.true.callbackFunc_time.param); // 调 用 请 求 方法 
} 
(7) 在 AuctionServlet 中 再 编写 getRemainTime() 方 法 ， 用 于 获取 剩余 时 间 ， 具 体 代 码 如 下 : 


Private void getRemainTime(HttpServletRequest request, 
HttpServletResponse response) throws ServletException. IOException { 
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response.setCharacterEncoding("UTF-8"); // 设 置 响应 的 编码 方式 
int id = Integer.parseInt(request.getParameter("id")): // 著 取 拍品 的 攻 号 
/查询 拍品 信息 


ConnDB conn = new ConnDB0: 
String sql = "SELECT +FROM tb res WHERE id=" +id +""; 
ResultSet rs = conn.executeQuery(sq]): 


Date endTime = null; /| 结束 时 间 
try{ 

if (rs.nextO) { 

endTime = java.text.DateFormat.getDateTimeInstance().parse( 
Ts.getString(O)); 1/ 获取 结 束 时 间 

} 
} catch (Exception e) { 

e.printStack Trace(); 


Dk 靳 | 余 时 [ 间 】。 让 机 机 机 机 机 机 们 下 机 刘 机 刘 本 机 衬 机 介 机 
Date nowTime = new Date(); 
long remainTime = (endTime.getTime() - nowTime.getTime()); 


long remainDay = remainTime / (24 * 60 * 60 * 1000); // 计 算 剩余 的 天 数 
TemainTime = remainTime - remainDay * (24 * 60 * 60 * 1000); 

long remainHour = remainTime / (60 * 60 * 1000); // 计 算 剩余 的 小 时 数 
TemainTime = remainTime - remainHour * (60 * 60 * 1000): 

long remainMinute = remainTime / (60 * 1000); // 计 算 剩余 的 分 钟 数 
remainTime = remainTime - remainMinute * (60 * 1000); 

long remainSecond = remainTime / 1000; // 计 算 剩余 的 秒 数 

/和 中 只 中 中 中 中 中 家 中 只 中 兴 只 中 兴 中 和 中 只 中 家 中 站内 闪闪 本 达 中 丰 相 中 / 
Tesponse.setContentType("text/html"); // 设 置 应 答 类 型 为 html 
PrintWriter out = response.getWriter(); 

if (remainDay > 0 || remainHour > 0 || remainMinute > 0 ||remainSecond > 0) { 


out.printin("<font style=colorred>" + remainDay 
+"</font> 天 <font style='color:red'>" + remainHour 
+ "</font> 时 <font style='color: red>" + remainMinute 
二 "</font> 分 <font style='color: red'>" + remainSecond 


+"</font> 秒 "); 
}else{ 
out.printin("end"); 
/更 新 拍品 状态 
String sql_updateState = "UPDATE tb _res SET isEnd=-1 WHERE id=" + id+ ™"; 
conn.executeUpdate(sql_updateState); /执行 更 新 语句 
/本 机 机 于 惠 惠 证 让 证 昌 惠 惠 惠 本 机 本本 于 惠 下 证 市 刘 机 于 间 机 
conn.closeO; 
} 


(8) 在 detailjsp 页 面 中 ， 编 写 Ajax 回调 函数 获取 最 新 的 商品 拍卖 剩余 时 间 ， 有 具体 代码 如 下 : 
function callbackFunc_ timeO{ 


if( timeRequest.readyState—4 ){ // 判 断 响应 是 否 完成 
if( timeRequest.status 一 200 ){ // 判 断 响应 是 否 成 功 
var remain = timeRequest.responseText: /获取 剩余 时 间 
if (remain.replace(/\s/g, "").indexOft"end") (= -1) { 
window.clearInterval(t); 


document.getElementById("ctrlBtn").innerHTML = "<img src='images/end.jpg’ border='0>"; 
document.getElementById("remain").innerHTML = "<font style='color:green:> 已 经 结束 </font>"; 
document.getElementById("state").innerHTMIL=" 已 经 结束 的 拍卖 "; 
document.getElementById("bidArea").style.display = "none”"; 

}else { 
document.getElementById("remain").innerHTML = remain: 

} 


} 
} 


(9) 实现 限时 竞拍 功能 ， 还 需要 应 用 Ajax 实现 实时 获取 最 高 出 价 信 息 。 由 于 实现 过 程 与 实时 获取 最 新 的 
商品 拍卖 剩余 时 间 类 似 ， 所 以 此 处 不 再 给 出 具体 代码 。 有 具体 代码 可 以 参考 本 书 的 附 赠 光 盘 。 

(10) 在 detailjsp 页 中 ， 想 要 实时 获取 商品 拍卖 的 最 新 剩余 时 间 和 最 高 出 价 信息 ， 需 要 在 页 面 加 载 时 通过 
window 对 象 的 setInterval0 方 法 每 隔 一 秒 就 调用 Ajax 请 求 方法 请 求 一 次 服务 器 ， 关 键 代码 如 下 : 
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/页 面 载 入 后 要 执行 的 操作 
window.onload = functionO { 
getRemainTime(); 
{t=window.setInterval("getRemainTimeQ", 1000): /| 每 隔 1 秒 钟 调用 一 次 getRemainTime0 方 法 
tBidInfo(); 
ed 60 + 1000): /| 每 隔 1 分钟 获取 一 次 出 价 信息 
} 
(11) 实现 用 户 登 录 ， 并 且 在 用 户 登 录 后 提供 为 拍品 出 价 功能 。 由 于 用 户 登 录 比 较 简单 ， 这 里 不 作 详 细 
介绍 。 
图 秘笈 心 法 
微软 Intemet Explorer 在 缓存 暂 存 文件 夹 中 存放 获取 GET 的 响应 ， 由 于 缓存 不 会 一 直 更 新 内 容 ， 所 以 使 用 
频率 高 时 ， 可 能 会 造成 回 传 数 据 都 相同 ， 此 时 可 以 考虑 改 用 POST 的 方式 ， 不 通过 缓存 获取 回 传 数据 。 
通常 ， 为 解决 GET 的 缓存 问题 ， 在 Ajax 请 求 指定 URL 的 参数 时 会 加 上 一 个 变量 ， 保 证 每 次 请 求 的 URL 


地 址 都 不 同 ， 例 如 : 
xmlHttp.open("GET"."AuctionServlet?nocache="+new DateO.getTimeO): 


由 于 每 次 获得 的 当前 时 间 的 值 都 不 同 ， 这 样 每 次 请 求 的 URL 地 址 都 会 识别 为 不 同 的 链接 ， 从 而 获得 最 新 的 
回 传 数据 。 


2 | 


图 实例 说 明 

在 实际 的 Web 应 用 开发 或 网 站 开发 过 程 中 , 经 常 需要 实现 文 
件 上 传 的 功能 。 在 文件 上 传 过 程 中 ， 经 常 需要 用 户 进行 长 时 间 的 
等 待 ， 为 了 让 用 户 及 时 了 解 上 传 进度 ， 可 以 在 上 传 文件 的 同时 显 PR 
示 文 件 的 上 传 进度 条 。 本 实例 即 可 实现 这 一 功能 。 运 行 本 实例 ， EECROURRRERRCIE 卫 
如 图 10.7 所 示 ， 访 问 文 件 上 传 页 面 ， 单 击 “ 浏 览 ”按钮 选择 要 上 
传 的 文件 ,注意 文件 不 能 超过 SOMB， 和 否则 系统 将 给 出 错误 提示 。 
选择 完 要 上 传 的 文件 后 ， 单 击 “提交 ”按钮 ， 将 会 上 传 文件 并 显 
示 上 传 进度 。 
图 关键 技术 图 10.7 上 传 文件 并 显示 进度 条 


本 实例 主要 是 应 用 开源 的 Common-FileUpload 组 件 来 实现 分 段 文件 上 传 ， 从 而 实现 在 上 传 过 程 中 ， 不 断 获 
取 上 传 进度 。 下 面 对 Common-FileUpload 组 件 进行 详细 介绍 。 

Common-FileUpload 组 件 是 Apache 组 织 下 的 jakarta-commons 项 目下 的 一 个 子 项 目 ， 使 用 该 组 件 可 以 方便 
地 将 multipart/form-data 类 型 请 求 中 的 各 种 表单 域 解析 出 来 ， 它 需要 另 一 个 名 为 Common-IO 的 组 件 的 支持 。 这 
两 个 组 件 包 文件 可 以 在 http://commons.apache.org 网 站 上 下 载 得 到 。 

1. 创建 上 传 对 象 

在 应 用 Common-FileUpload 组 件 实现 文件 上 传 时 ， 需 要 创建 一 个 工厂 对 象 ， 并 根据 该 工厂 对 象 创建 一 个 新 
的 文件 上 传 对 象 ， 具 体 代码 如 下 : 


DiskFileItemFactory factory = new DiskFileItemFactory(): 
ServletFileUpload upload = new ServletFileUpload(factory): 


2.， 解析 上 传 请 求 
创建 一 个 文件 上 传 对 象 后 ， 就 可 以 应 用 该 对 象 来 解析 上 传 请 求 ， 获 取 全 部 的 表单 项 ， 可 以 通过 文件 上 传 对 


注 : 文件 大 小 请 控制 在 SoN 以 内 。 


[mm 
EF 
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象 的 parseRequest0 方 法 来 实现 。parseRequest0 方 法 的 语法 结构 如 下 : 
Public List parseRequest(HttpServietRequest request) throws FileUploadException 


3，FileItem 类 


在 Common-FileUpload 组 件 中 ， 无 论 是 文件 域 还 是 普通 表单 域 ， 都 应 当成 FileItem 对 象 来 处 理 。 如 果 该 对 


象 的 isFormField0 方 法 返回 值 为 tue， 则 表示 是 


图 设计 过 程 
(1) 创建 requestjs 文件 ， 在 该 文件 中 编写 Ajax 请 求 方法 。 


(2) 新 建文 件 上 传 页 index.jsp， 在 该 页 中 添加 用 于 获得 上 传 文件 信息 的 表单 以 及 表单 元 素 ， 间 


示 进 度 条 的 <div> 标 签 和 显示 百分比 的 <span> 标 签 ， 关 键 代码 如 下 : 
<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile"> 


-个 普通 表单 域 ， 否 则 为 一 个 文件 域 。 在 实现 文件 上 传 时 ， 可 以 
通过 FileItem 类 的 getName( 方 法 获得 上 传 文件 的 文件 名 ， 通 过 getSize0 方 法 获得 上 传 文件 的 大 小 。 


F 添 加 用 于 显 


请 选择 上 传 的 文件 ，<input name= Jile" ype='Jile"size="34 必 
/文件 大 小 请 控制 在 50MB 以 内 
<div id="progressBar” class="prog_border" align="left"> 


<img src="images/progressBar-gif” width="0" height="13" id="imgProgress"></div> 


<span id="progressPercent”" style="width:40px;display:none”">0%</span> 


<input name="Submit”" type="button" value=" 存 交 " onClick="deal(this.form)"> 


<input name="Reset" type="7reset” class="bin_grey” value=" 重 外 "></td> 
</form> 


(3) 新 建 上 传 文件 的 Servlet 实现 类 UpLoad。 在 该 类 中 编写 实现 文件 上 传 的 方法 uploadFile0， 在 该 方法 中 
通过 Common-FileUpload 组 件 实 现 分 段 上 传 文件 ， 并 计算 上 传 百 分 比 ， 实 时 保存 到 Session 中 ， 关 键 代 码 如 下 : 


Ppublic void uploadFile(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 
response.setContentType("text/html:charset=GBK"); 
request.setCharacterEncoding("GBRK"); 
HttpSession session=request.getSession(); 


session.setAttribute("progressBar",0); /定义 指定 上 传 进度 的 Session 变量 
String error = ""; 

int maxSize=50*1024*1024; // 单 个 上 传 文件 大 小 的 上 限 
DiskFileItemFactory factory = new DiskFileItemFactoryO; 1/ 创建 工厂 对 象 


ServletFileUpload upload = new ServletFileUpload(factory); 
try{ 


1/ 创建 一 个 新 的 文件 上 传 对 象 


List items = upload.parseRequest(request): // 解 析 上 传 请 求 
Iterator itr = items.iterator(); // 枚 举 方法 
While (itrhasNextO) { 
Fileltem item = (FileItem) itrnextO: /获取 Fileltem 对 象 
if (!item.isFormField0) { // 判 断 是 否 为 文件 域 
证 (item.getNameO != null && !item.getName().equals("")) { /是 否 选择 了 文件 
long upFileSize=item_getSize(): /上 传 文件 的 大 小 
String fileName=item. getName(); /获取 文件 名 
if(upFileSize>maxSize){ 
error=" 您 上 传 的 文件 太 大 ， 请 选择 不 超过 50MB 的 文件 "; 
Dreak: 
} 
// 此 时 文件 暂 存在 服务 器 的 内 存 中 


File tempFile = new File(fileName); 


1/ 构造 文件 目录 临时 对 象 


String uploadPath = this.getServletContext|.getRealPath("/upload"); 


File file = new File(uploadPath.tempFile.getName()): 

InputStream is=item.getInputStream(); 

int buffer=1024; 

int length=0; 

bytel] b=new byte[buffer]: 

double percent=0; 

FileOutputStream fos=new FileOutputStream(file); 

while((length=is.read(b)—-D){ 

percent+—length/(double)upFileSize*100D: 

fos.write(b.0,length): 


/定义 缓冲 区 的 大 小 


1 计算 上 传 文件 的 百分比 
// 向 文件 输出 流 写 读 取 的 数据 
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session_setAttribute("progressBar'.Math .round(percent)): 


} 
fos.closeO: 
Thread.sleep(1000): 
j} else{ 
ermror=" 没 有 选择 上 传 文件 !"; 
} 
} 
} 
} catch (Exception €) { 
e.printStackTraceO); 
error =" 上 传 文件 出 现 错误 :" + e.getMessage0; 
} 
if(!"".equals(erron)) { 
Tequest.setAttribute("error", error); 
Tequest.getRequestDispatcher("error.jsp").forward(request, response); 
jelse { 
Tequest.setAttribute("result", "文件 上 传 成 功 !"); 


/线程 休眠 1 秒 


Tequest.getRequestDispatcher("upFile_deal.jsp").forward(request, response); 


} 
} 


(4) 在 文件 上 传 页 index.jsp 中 ， 导 入 编写 的 Ajax 请 求 方法 的 requestjs 文件 ， 并 编写 获取 上 传 进度 的 Ajax 


请 求 方法 和 Ajax 回调 函数 ， 关 键 代码 如 下 : 

<script language="javascript”" sre="js/requestJs"></script> 

“<script language="javascript"> 

Var request = false; 

function getProgressO{ 
Var url="showProgress.jsp"; 
var param ="nocache="+new Date().getTime(); 
Tequest=httpRequest("post",url.true,callbackFunc,param); 


} 

/Ajax 回调 函数 

function callbackFuncO{ 

if( request.readyState—4 ){ 

if( request.status 一 200 ){ 

var h = request.responseText; 
h=h.replace(N\s/g.""):; 
‘document.getElementById("progressPercent").style.display=""; 
progressPercent.innerHTML=h+"%6"; 
document.getElementById("progressBar").style.display="block"; 
document.getElementById("imgProgress").width=h*(235/100); 


} 
} 
</script> 


/服务 器 地 址 
// 每 次 请 求 URL 参数 都 不 同 ， 避 免 上 传 时 进度 条 不 动 
/调用 请 求 方法 


1/ 判断 响应 是 否 完成 

// 判 断 响应 是 否 成 功 

// 获 得 返回 的 响应 数据 

// 去 除 字符 串 中 的 Unicode 空白 符 
// 显 示 百分比 

// 显 示 完 成 的 百分比 

// 显 示 进度 条 

// 显 示 完 成 的 进度 


(5) 编写 showProgress.jsp 页 面 ， 在 该 页 面 中 应 用 EL 表达 式 输 出 保存 在 session 域 中 的 上 传 进度 条 的 值 ， 


有 具体 代码 如 下 : 
<9%6@page contentType="text/html” pageEncoding="GBK"%> 
S${progressBar} 


(6) 编写 表单 提交 按钮 onClick 事件 所 调用 的 JavaScript 方法 , 在 该 方法 中 通过 window 对 象 的 setInterval() 


方法 每 隔 
function deal(form){ 
form.submitO: 
timer-window setInterval("getProgress0".500): 
} 


国 秘笈 心 法 


-定时 间 请 求 一 次 服务 器 ， 获 得 最 新 的 上 传 进度 ， 关 键 代 码 如 下 : 


/提交 表单 
/每 隔 500 毫秒 获取 一 次 上 传 进度 


当 通 过 POST 方式 提交 请 求 数据 时 ， 必 须 通 过 XMLHttpRequest 对 象 的 setRequestHeader0 方 法 设置 MIME 
类 型 ， 否 则 服务 器 无 法 正确 解析 传送 过 来 的 参数 ， 代 码 如 下 : 


Tequest.setRequestHeader("Content-Type". "application/x-www-form-urlencoded"): 
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国 实例 说 明 

Google Suggest 也 就 是 Google 搜索 引擎 ， 含 义 就 是 当 用 户 输入 一 个 或 几 个 关键 字 后 ， 会 自动 列 出 部 分 最 常 
用 的 搜索 词汇 ， 帮 助 用 户 节省 输入 时 间 并 可 以 检查 拼写 错误 。 现 在 这 种 搜索 技术 被 广泛 应 用 在 Web 应 用 中 。 本 
实例 将 实现 一 个 类 似 Google Suggest 的 自动 完成 功能 。 运 行 本 实例 ， 在 搜索 文本 框 中 输入 “java” 后 ， 在 下 面 将 
显示 以 java 开头 的 关键 字 列表 ， 如 图 10.8 所 示 。 用 户 可 以 通过 f 或 上 方向 键 选择 所 需 的 关键 字 ， 当 选中 某 一 个 
关键 字 后 ， 按 下 Enter 键 ， 关 键 字 列 表 将 关闭 。 如 果 用 户 输入 的 关键 字 在 系统 的 数据 库 中 不 存在 ， 单 击 “ 搜 索 结 
果 ” 按 钮 后 ， 该 关键 字 将 自动 添加 到 系统 的 数据 库 中 。 


EE 


Java Javaweb Ch# ASPNET VisualDasic VisualC++ PHP ASP 


Jeval 搜索 结果 


[mi 


vaSoript 


图 10.8 仿 Google Suggest 自动 完成 


图 关键 技术 


本 实例 实现 的 关键 是 当 用 户 在 文本 框 中 输入 数据 时 ， 需 要 使 用 文本 框 的 onpropertychange 事件 ， 当 文本 框 
的 值 改变 时 就 会 触发 该 事件 。 因 此 可 以 应 用 该 事件 来 调用 Ajax 请 求 方法 ， 实 时 请 求 服务 器 ， 查 询 数据 库 指定 表 
中 是 否 包含 相 匹配 的 关键 字 ， 并 将 这 些 查 询 出 的 匹配 数据 响应 给 客户 端 。 客 户 端 通过 Ajax 回调 函数 获得 这 些 匹 
配 的 关键 字数 据 ， 再 通过 JavaScript 函数 将 这 些 数据 显示 在 文本 框 下 方 。 
图 设计 过 程 

(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 

(2) 新 建 index.jsp 页 面 ， 在 该 页 中 导入 requestjs 文件 ， 然 后 编写 一 个 JavaScript 方法 ， 在 该 方法 中 调用 
Tequestjs 文件 编写 的 Ajax 请 求 方法 ， 用 于 向 服务 器 发 送 请 求 。 在 用 户 按 下 除 Enter 键 、+ 和 | 方向 键 以 外 的 按 
键 时 ， 获 取 符 合 条 件 的 关键 字 ， 关 键 代码 如 下 : 


Var size=0; // 总 条 目 
Var curSize—-1; // 当 前 条 目 
/Ajax 请 求 方法 


function getSuggestO { 
if(event.keyCode!=13 && event.keyCode!=38 && event.keyCode!=40){ 


curSize—1; /1/ 当 前 条 目 
Var suggest = document.getElementById("suggest").valh 
var url="KeyServlet". /服务 器 地 址 


/注意 关键 字 st 1 的 人 要 用 encodeURL 编码 ， 否 则 可 能 出 现 乱码 
Var param ="action=getKeyéinputKey="+encodeURI(suggest)+"&-nocache=" + new Date().getTime(): 
request=httpRequest("post",urltrue.callbackFunc.param): 。“// 调 用 请 求 方法 

} 

} 


(3) 创建 Servlet 的 实现 类 KeyServlet， 用 于 处 理 Ajax 请 求 ， 在 该 类 的 doGet0 方 法 中 获得 action 参数 值 ， 
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如 果 action 参数 值 等 于 getKey， 则 调用 getKey0 方 法 从 数据 库 中 获取 符合 条 件 的 关键 字 。doGet0 方 法 的 关键 代 


码 如 下 : 
public void doGet(HttpServletRequest request HttpServletResponse response) 
throws ServletException, IOException { 
String action = request.getParameter("action"); 
if ("getKey".equals(action)) { 
， getKey(request, response); 
} 


/获取 action 参数 的 值 
/查询 符合 条 件 的 关键 字 


(4) 在 KeyServlet 中 编写 getKey0 方 法 ， 在 该 方法 中 首先 获取 输入 的 查询 关键 字 ， 并 且 设 置 响应 的 编码 方 


式 及 响应 类 型 ， 
文档 对 象 的 根 节 
private void getKey(HttpServletRequest request,HttpServletResponse response) 
throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); 
Tesponse.setCharacterEncoding("UTF-8"); 
Tesponse.setContentType("application/xml"); 
String inputKey=request.getParameter("inputKey"); 
if(!inputKey.equals("")&-&inputKey!=nulD){ 
Document document = DocumentHelper.createDocument|; 
Element keys = DocumentHelper.createElement("keys"); 
‘document.setRootElement(keys); 
/查询 符合 条 件 的 关键 字 
ConnDB conn = new ConnDB(); 


然后 创建 XML 文档 对 象 以 及 根 节点 ， 再 从 数据 表 中 查询 出 符合 条 件 的 关键 字 ， 并 设置 为 XML 
的 子 节点 ， 最 后 将 XML 文档 输出 到 浏览 器 。getKey0 方 法 的 具体 代码 如 下 : 


/设置 应 答 类 型 为 XML 
// 获 取 输 入 的 关键 字 


/创建 XML 文档 对 象 
/创建 普通 节点 
/将 keys 设置 为 根 节点 


String sql = "SELECT * FROM tb_key WHERE keyWord LIKE "+inputKey+ 
"96 AND keyWord !="+inputKey+" ORDER BY keyWord ASC"; 


ResultSet rs = conn.executeQuery(sql): 
try{ 
while (rs.nextO) { 
Element key = keys.addElement("key Word"); 
String keyWord = rs.getString(2); 
key.setText(keyWord); 


} 
} catch (SQLException e) { 
e.printStackTrace(): 


conn.closeO: 
OutputFormat format = new OutputFormatO: 
format.setEncoding("UTF-8"); 
PrintWriter out = response.getWriter(); 
XMLWriter writer = new XMLWriter(out, format): 
writer.write(document); 
writer.close(); 
} 
} 


/执行 查询 语句 


/添加 keyWord 节点 
/设置 keyWord 节点 的 内 容 为 关键 字 


/关闭 数据 库 连接 

/创建 OutputFormat 对 象 
/设置 写 入 流 编码 

/获取 JSP 的 内 置 对 象 out 
/实例 化 XMLWiiter 对 象 
/向 流 中 写 入 数据 

/关闭 XMLWriter 对 象 


(5) 在 indexjsp 文件 中 编写 Ajax 的 回调 函数 。 在 该 函数 中 ， 首 先 获取 XML 格式 的 关键 字 ， 以 及 文档 中 
id 为 content 的 对 象 ， 然 后 设置 总 条 目 数 ， 并 且 清 空 提示 内 容 对 象 ， 最 后 获取 XML 文档 中 的 keyWord 节点 ， 也 
就 是 关键 字 列表 ， 如 果 关 键 字 个 数 大 于 0， 则 通过 for 循环 调用 addContent( 方 法 将 这 些 关键 字 添加 到 content 对 


象 中 ， 并 且 显 示 提 示 框 ， 否 则 隐藏 提示 框 ， 关 键 代 码 如 下 : 
/Aijax 回调 函数 
function callbackFuncO{ 
if( request readyState—4 ){ 
if( request.status — 200 ){ 
var doc = TequestresponseXML: 
var contentObj = document.getElementById("content"): 
size=contentObj.childNodes.length: 
/清空 提示 内 容 对 象 
while(true){ 
if(contentObj.hasChildNodesO){ 
contentObj removeChild(contentObj firstChild): 
jelse{ 
break: 
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// 判 断 响 应 是 否 完成 

// 判 断 响 应 是 否 成 功 
/获取 XML 格式 的 关键 字 
/获取 content 对 象 
/设置 条 目 数 


// 移 除 指定 的 节点 
1/ 跳出 while 循环 
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} 
} 
var content = doc.getElementsByTagName("keyWord"): 
if(content length>0){ 
for(var i=0;i<content length:i+ +){ 
addContent(content(i) firstChild nodeValue); 
} 


document.getElementById("toolBox") .style.visibility="visible" 


Jelse{ 


document.getElementById("toolBox") style.visibility="hidden" 


} 


} 


(6) 编写 addContent0 方 法 用 于 为 content 对 象 添 加 一 个 子 


function addContent(content){ 
var contentObj = document.getElementById("content"); 
Var divContent = document.createElement("div"); 
divContent.innerHTML=content; 
divContent.style.paddingLeft="2px"; 
divContent.onmouseover = functionO{ 
this.style.background="#CES3FF"; 
this.style.color="#FFFFFF":; 
于 
ivContent.onmouseout = function0{ 
this.style.background="#FFFFFF"; 
this.style.color="#000000"; 
}; 
divContent.onclick=functionO{ 
document.getElementById("suggest").value=this.innerHTML: 
document.getElementById("toolBox").style.visibility="hidden"; 
下 
contentObj.appendChild(divContent); 


/获取 XML 文档 中 的 keyWord 节点 


; // 旺 示 提示 框 
: /隐藏 提示 框 


对 象 。addContent0 方 法 的 关键 代码 如 下 : 


/获取 content 对 象 

/创建 一 个 DIV 对 象 

/设置 div 标记 的 内 容 
/设置 文字 与 左边 框 的 距离 

/添加 鼠标 移入 事件 

// 当 鼠标 在 关键 词 上 时 改变 背景 色 

// 当 鼠标 在 关键 词 上 时 改变 文字 颜色 


/添加 鼠标 移出 事件 
/鼠标 移 开 时 变 为 原来 的 背景 色 
// 当 鼠标 在 关键 词 上 时 改变 文字 颜色 


/添加 单 击 事件 


/将 对 象 添加 到 contentObj 对 象 中 


(7) 编写 ctrlMove0 方 法 ， 用 于 通过 + 键 和 | 键 选择 所 需 列表 项 。 在 该 方法 中 ， 需 要 判断 全 局 变量 size 是 


否 大 于 0， 只 有 大 于 0 时 , 才 需 要 实现 通过 + 键 和 | 键 选择 所 需 
function ctrIMoveO{ 
if(size>0 ){ 
var contentObj = document. getElementById("content"): 
size=contentObj.childNodes.length; 
switch(event.keyCode){ 
Case 13: 


document.getElementById("toolBox").style.visibility="hidden”"; 


size=0; 
return false; 
break: 
ease 38:// 向 上 方向 键 
if(curSize—1D){ 
CurSize=size-1; 
}else if(curSize>0){ 
CurSize--; 
} 
break: 
ease 40:// 向 下 方向 键 
if(curSize—-1){ 
curSize=0; 
}else if(curSize<size-1){ 
curSizett; 
k 
break: 
if(event.keyCode—38 || event.keyCode—40){ 


contentObij.childNodes[curSize].style.background="#CES3FF": 


contentObj.childNodes[curSize] style.color="#FFFFFF": 


列表 项 的 功能 。ctrIMove0 方 法 的 具体 代码 如 下 : 


/获取 content 对 象 
// 设 置 条 目 数 


; /隐藏 提示 框 


// 当 鼠标 在 关键 词 上 时 改变 背景 色 
/1/ 当 鼠标 在 关键 词 上 时 改变 文字 颜色 


document.getElementById("suggest").value=contentObj.childNodes[curSize].innerHTML; 


for(var i=0:i<size:it){ 
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if(i!=curSize){ 
contentObj.childNodes[i].style.background—"#FFFFFF"; /1/ 当 鼠标 在 关键 词 上 时 改变 背景 色 
contentObj.childNodes[i].style.color="#000000": // 当 鼠标 在 关键 词 上 时 改变 文字 颜色 


} 
. 
} 
} 
(8) 实现 当 用 户 单 击 “ 搜 索 结果 ”按钮 时 ， 将 所 输入 的 关键 字 保存 到 指定 的 数据 库 表 中 。 在 保存 时 ， 需 要 
判断 该 关键 字 是 否 已 经 存在 ， 如 果 不 存在 ， 则 保存 该 关键 字 ， 和 否则 将 不 再 保存 。 由 于 这 部 分 内 容 比 较 简单 ， 所 
以 此 处 不 再 详细 描述 。 


国 秘笈 心 法 


本 实例 采用 了 第 三 方 组 件 dom4j 来 实现 在 浏览 器 上 输出 保存 符合 条 件 关键 字 的 XML 文档 。 如 果 不 使 用 
dom4j 组 件 ， 可 以 直接 设置 响应 格式 为 XML， 然 后 输出 每 个 XML 节点 以 及 节点 文本 内 容 即 可 。 


sm | 


图 实例 说 明 

在 Web 应 用 开发 中 ， 经 常 需要 对 信息 进行 分 页 显示 。 本 实例 将 介绍 如 何 应 用 Ajax 实现 无 刷新 分 页 。 运 行 
本 实例 ， 如 图 10.9 所 示 ， 单 击 信息 列表 下 面 的 “首页 尖 “ 上 一 页 “下 一 页 ”以 及 “ 尾 页 ” 超 链接 时 ， 可 以 显 
示 不 同 的 信息 ， 此 时 整个 页 面 不 刷新 。 


时 尚 液晶 蜡 示 器 最 新 推出 新 品 37 寸 液 县 蜡 示 器 ， 价格 便宜 


新 新 人 类 家 谋 果 和 新 对 人 类 家 应 有 之 
[2/3] [首页 ] [上 一 页 ] [下 一 页] [RD 


图 10.9 ”实现 无 刷新 分 页 


图 关键 技术 
本 实例 主要 应 用 Ajax 异步 提交 来 实现 。 当 单 击 超 链接 时 ， 需 要 将 当前 的 页 码 参 数值 通过 Ajax 请 求 方法 发 
送 到 服务 器 ， 在 服务 器 中 根据 获得 的 参数 值 获取 不 同 的 分 页 数据 ， 然 后 将 这 些 分 页 数据 以 XML 文档 格式 响应 
给 客户 端 页 面 。 客 户 端 通过 Ajax 回调 函数 来 读 取 XML 文档 内 容 ， 将 这 些 内容 蔡 换 页 面 信息 列表 中 原来 的 显示 
内 容 ， 而 不 改变 页 面 其 他 内 容 ， 从 而 实现 页 面 的 无 刷新 分 页 。 
图 设计 过 程 
(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 
(2) 创建 商品 信息 列表 页 ndexjsp， 在 该 页 中 通过 <scripf> 标 签 导 入 封装 Ajax 请 求 的 requestjs 文件 ， 然 后 
在 <scrip 人 标签 中 定义 一 个 用 于 接收 Ajax 请 求 方法 所 返回 的 XMLHttpRequest 对 象 的 变量 。 创 建 JavaScript 方法 
getData0， 在 该 方法 中 调用 requestjs 文件 中 的 Ajax 请 求 方法 请 求 目 标 服务 器 ， 关 键 代 码 如 下 : 
<script language—"javascript” sre="js/requestjs"></script> 
<script language="Javascript"> 
var request = false; // 保 存 XMLHttpRequest 对 象 的 全 局 变量 
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/Ajax 请 求 方法 

function getData(page){ 
var url="GoodsServlet"; // 服 务 器 地 址 
var param ="page—"+paget+"&nocache="+new Date().getTime0; /请 求 参数 


Tequest=httpRequest("post",url.true.callbackFunc.param); // 调 用 requestjs 请 求 方法 


} 


(3) 创建 Servlet 的 实现 类 GoodsServlet,， 用 于 获取 商品 信息 。 在 该 类 的 doPost0 方 法 中 接收 Ajax 请 求 中 的 
page 参数 值 ， 然 后 设置 响应 正文 的 MIME 类 型 为 XML 格式 ， 从 数据 库 中 读 取出 商品 信息 以 及 分 页 信息 添加 到 


XML 的 节点 中 ， 最 后 将 XML 格式 的 信息 输出 到 客户 端 。doPost0 方 法 的 具体 代码 如 下 : 


public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 

Tequest.setCharacterEncoding("UTF-8"); 
Tesponse.setContentType( "text/xml:charset=UTF-8" );// 设 置 响应 格式 为 test/xml 
/1/ 设 置 response.addHeader0， 禁 止 页面 缓 存 
Tesponse.addHeader( "Cache-Control", "no-store.no-cache.must-revalidate" ); 
Tesponse addHeader( "Cache-Control", "post-check=0,pre-check=0" ); 
Tesponse addHeader( "Expires", "0" ); 
Tesponse.addHeader( "Pragma", "no-cache" ); 
PrintWriter out = response.getWriter(); 


PageElement pageArgs = getPageArgs(); /获取 数据 分 页 参数 

List goodses = null; // 创 建 保存 商品 信息 的 数据 集合 
/获取 请 求 对 象 的 分 页 参数 

int page=1; 


if(null!=request.getParameter("page"){ 
page = Integer.parseInt(request.getParameter("page")); 
} 


pageArgs.setPageCount(page); 
out.println( "<?xml version=\"1.0\" encoding=\"utf-8\"?>" ); 
out.println( "<goodses>" ); 
out.printin( "<pageElement>" ); 
outprintin( "<pageNum>" +pageArgs.getPageNum()+"</pageNum>"); 
out.println( "<maxPage>" +pageArgs.getMaxPage()+"</maxPage>"); 
out.printin( "<nextPage>" +pageArgs.getNextPage()+"</nextPage>"): 
out.printin( "<prePage>" +pageArgs.getPrePageQO+"</prePage>"); 
out.printin( "</pageElement>" ); 
try{ 

goodses = getGoods(page); 
}catch(Exception e){ 

eprintStackTraceO; 
} 


for(int =0:i<goodses.sizeO:i++){f 
CommodityForm commodity = (CommodityForm) goodses.get(i); 
out.printin( "<goods>" ); 
out.printin( "<id>"+commodity.getIdO+"</id>" ); 
outprintln( "<goodsName>"+commodity.getGoodsName()+"</goodsName>" ); 
out.printin( "<introduce>"+commodity.getIntroduceO+"</introduce>" ); 
out.println( "<Price>"+commodity.getPriceO+"</Price>" ); 
out.printin( "</goods>" ); 
} 
outprintln( "</goodses>" ); 


out.closeO; 
} 
(4) 创建 PageElement 类 ， 用 于 封装 计算 分 页 的 参数 ， 关 键 代 码 如 下 : 
public class PageElement { 
private int pageNum; /当前 页 
private int pageSize; // 页 面 显示 数据 的 条 数 
Private long maxPage: // 总 页 数 
Private int prePage: W 上 一 页 
Private int nextPage: /下 一 页 


public void setPageCount(int pageNum) { 
this.pageNum = pageNum; 
/设置 上 一 页 的 页 码 
prePage=pageNum-1<=121:pageNumr-1: 
/设置 下 一 页 的 页 码 
nextPage=(int)(pageNum + 1 > 一 maxPage ? maxPage : pageNum + 1); 
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/此 处 省 略 了 其 他 属性 的 getXXXO 和 setXXX0 方 法 
} 


(5) 在 GoodsServlet 类 中 编写 获取 分 页 参数 信息 的 getPageArgs0 方 法 ， 具 体 代码 如 下 : 
Ppublic PageElement getPageArgs( { 
PageElement pag = null; // 声 明 分 页 参数 对 象 
Statement stmt = mall 
ResultSet rs = null; 


ConnDB conn = new ConnDBO; // 连 接 数 据 库 
try{ 
// 声 明 查 询 总 数据 量 的 SQL 语句 
String sql = "SELECT count(*) FROM tb_goods"; 
Is= conn.executeQuery(sql); /执行 SQL 查询 
if (rs.nextO) { 
int count = rs.getInt(1); /获取 查询 结果 
pag = new PageElement(); /初始 化 分 页 参数 对 象 
pag.setPageSize(pagesize); /设置 分 页 大 小 
pag.setMaxPage((count + pagesize - 1) / pagesize);// 设 置 最 大 页 码 
pag.setPageCount(count); // 设 置 当 前 页 码 
} 
} catch (SQLException ex) { 
ex.getMessage(); 
} finally { 
conn.close(); 
ns Pag; 


} 
(6) 在 GoodsServlet 类 中 编写 从 数据 库 读 取 指定 商品 信息 的 getGoods0 方 法 ， 有 具体 代码 如 下 : 


public List getGoods(final int page) throws Exception { 


List list = new ArrayListO; // 创 建 保存 分 页 数据 的 集合 对 象 
ConnDB conn = new ConnDBO: /连接 数据 库 
CommodityForm f =null; 
int firstResult = (page-1) * pagesize; 
try{ 
// 定 义 分 页 查询 的 SQL 语句 
String sql= "select * from tb_goods order by id limit "+firstResult+","+pagesize; 
ResultSet rs = conn.executeQuery(sql); /获取 查询 结果 
while (rsmnextO) { // 遍 历 查 询 结果 集 
f= new CommodityForm0: /创建 分 页 对 象 
fsetId(rs.getInt(™ 


f.setGoodsName(rs.getString("name")); 
f.setIntroduce(rs.getString("introduce")); 

f.setPrice(rs.getFloat("price")); 

listadd(9: /添加 分 页 数据 对 象 到 List 集合 


} 
} catch (SQLException ex) { 
ex.printStackTraceO); 
} finally { 
conn.closeO); 


return list; 
} 
(7) 编写 完 以 上 GoodsServlet 类 中 的 几 个 方法 后 ， 在 indexjsp 中 需要 编写 Ajax 回调 函数 callbackFunc()， 
在 回调 函数 中 读 取 Ajax 请 求 GoodsServlet 所 响应 的 XML 数据 , 并 将 其 添加 到 指定 <span> 标 签 中 。callbackFuncO 
的 具体 代码 如 下 : 


function callbackFuncO{ 
if(request.readyState 一 4){ 
if(request.status — 200){ 
var doc = request.responseXML; 
var pageNum = doc.getElementsByTagName("pageNum")[0] .firstChild .data: 
var maxPage= doc.getElementsBy TagName("maxPage")[0].firstChild.data; 
var prePage = doc.getElementsByTagName("prePage")[0] firstChild.data: 
var nextPage = doc.getElementsByTagName("nextPage")[0].firstChild.data: 
Var goodses = doc.getElementsByTagName("goods"): 
var innerHTML = ""; 
if((goodses!=null)&&(goodses.length!=0)) { 
innerHTML+—"<table width='96%’ border='1’ cellpadding='0' cellspacing="0' bordercolor=#FFFFFF' bordercolordark=#FFFFFF' 
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bordercolorlight='CFCFCF>"; 


innerHTML1"<tr align='center height='30'><td> 商 品名 称 </td>": 


innerHTML1+="<td> 简 介 </td>"; 

innerHTML+="<td> 单 价 </td></tr>"; 

for(var i=0;i<goodses.length:i++) { 
var goods = goodses[i]; 


var goodsName = goods childNodes[1] firstChild.data: 
var introduce = goods.childNodes[2] firstChild.data: 
var price = goods.childNodes[3] firstChild.data; 


innerHTML += "<tr height="30>"; 


innerHTML += "<td align=left>&nbsp:"+goodsName+"</td>"; 
innerHTML += "<td align='left>é&nbsp:"+introducet"</td>"; 
innerHTML += "<td align='left'>&nbsp:"+pricet"</td>"; 


innerHTML += "</tr>"; 
} 


innerHTML + 一 "<tr height="30><td align=center colspan=6>"; 
innerHTML + 一"["+ pageNumt+t"/"+maxPageft"]&nbsp:&nbsp:": 


innerHTML+="<a href=\"javascript:void(0)\" onClick=\"getData(1)\">[ 首 页 ]</a>&nbsp:"; 
innerHTML+= "<a href=\"javascript:void(0)\" onClick=\"getData("+prePage+")\">[ 上 一 页 ]</a>&nbsp"; 
innerHTML+= "<a href=\"javascript:void(0)\" onClick=\"getData("+nextPage+")\">[ 下 一 页 ]</a>&nbsp"; 
innerHTML + 一 "<a href=\"javascript:-void(0)\" onClick=\"getData("+maxPage+")\">[ 尾 页 ]</a>"; 


innerHTML+="</td></tr>\n"; 
innerHTML+="</table>\n"; 
Jelse { 
innerHTML += "暂时 没有 任何 数据 "; 
} 


document.getElementById("goodsList").innerHTML = innerHTML; 
request = false;// 此 处 必须 设置 XMLHttpRequest 对 象 的 变量 为 初始 状态 


} 
} 
} 


(8) 在 index.jsp 页 的 指定 位 置 添加 显示 


关键 代码 如 下 : 


<span id="goodsList"></span> 


j 品 列表 信息 的 <span> 标 签 ， 并 设置 该 标签 的 id 属性 为 goodsList， 


(9) 在 页 面 加 载 后 就 应 该 请 求 服务 器 ， 读 取出 初始 商品 信息 ， 关 键 代码 如 下 : 


window.onload=functionO{ 
getData(1): 


本 实例 在 获得 服务 器 回 传 的 XML 数据 时 ， 应 用 了 JavaScript 中 的 DOM 对象。 在 DOM 对 象 中 ，HTML 文 
档 各 个 节点 被 视 为 各 种 类 型 的 Node 对 象 , 并 且 将 HTML 文档 表示 为 Node 对 象 的 树 , 对 于 任何 一 个 树 形 结构 来 
说 ,最 常 做 的 就 是 遍历 树 .DOM 中 可 以 通过 Node 对 象 的 parentNode 属性 \firstChild 属性 lastChild 属性 ,nextChild 
属性 、previousSibling 属性 和 nextSibling 属性 来 遍历 文档 树 。Node 对 象 的 常用 属性 的 具体 作用 如 表 10.2 所 示 。 


表 10.2 Node 对 象 的 属性 


属 性 类 型 描述 
ParentNode Node 节点 的 父 节点 ， 没 有 父 节点 时 为 null 
childNodes NodeList 节点 的 所 有 子 节点 的 NodeList 
firstChild Node 节点 的 第 一 个 子 节点 ， 没 有 则 为 null 
lastChild Node 节点 的 最 后 一 个 子 节点 ， 没 有 则 为 null 
PreviousSibling Node 节点 的 上 一 个 节点 ， 没 有 则 为 null 
nextChild Node 节点 的 下 一 个 节点 ， 没 有 则 为 null 
nodeName String 节点 名 
nodeValue String 节点 值 
nodeType short 表示 节点 类 型 的 整 型 常量 
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实例 248 


实用 指数 : 去 走廊 从 : 


国 实例 说 明 

在 浏览 网 站 时 ， 有 些 网 站 会 在 窗口 的 右 下 角 弹 出 气泡 提示 窗口 ， 显 示 网 站 的 最 新 公告 或 广告 。 本 实例 将 介 
绍 如 何 应 用 Ajax 实现 实时 弹出 气泡 提示 窗口 。 运 行 本 实例 ， 系 统 会 自动 判断 当天 是 否 有 最 新 的 新 闻 。 如 果 有 ， 
则 弹出 一 个 气泡 提示 窗口 显示 该 新 闻 ， 如 图 10.10 所 示 。 在 该 窗口 中 单 击 新 闻 标 题 超 链接 ， 将 弹出 新 窗口 显示 
新 闻 的 详细 内 容 。 当 用 户 查 看 该 新 闻 的 详细 内 容 或 是 单 击 “X ”按钮 后 ， 将 不 再 弹出 气泡 提示 窗口 ， 除 非 又 有 
新 的 新 闻 发 布 。 


Cw 
关于 圣 滤 节 放 县 通知 (11-02 ) 关于 至 诞 节 的 假 通知 ( 11-02 )》 
FRT SRNR 09-23) SF RR 00-23) 
基于 商人 世故 出 (oo-1T 基于 人 人 CO-1T) 
二 于 老人 坟 拓 1 (06-17 二 CT 
tt TR (0911) 
二 于是 2 Ee Eu 
关于 季节 交通 和 0C 9-23》 
关于 情人 节 放风 通知 ( 09-17) © su © Pan 
关于 老人 及 开外 CUE-1T) 
基于 圣 撕 节 放风 的 通知 ( c9-17》 


天 二 入 电 节 肌 关 胃 知 (C11-02 关于 至 庆 节 的 隐 衣 知 (11-02) 
关于 靖 秆 节 放 限 授 ApC 09-2》 关于 满 年 节 的 的 通知 (00 -3 
天 二 全 人 节 隐 阁 调 30 09-17 ) 二 于 伟人 名 刘 各 (08-17) 
关于 老人 放 耻 和 ( 00-17》 关于 老人 欢 兰 和 0 00-17》) 
基于 到 古风 WES0C 0B-17) 天 于 亲王 有 后 0 通知 ( 06-17) 


关于 至 呈 他 的 天 40C 14-0 
关于 映 征 节 刚 | 的 通 各 《ce-23》 


关于 依 人世 用 了 0C08-1T yy 编程 襄 监 天 线 服 家 


关于 老人 前 生病 知 (06-1T) 
天 于 革 讶 节 政 内 gn 衣 各 (08-1T)》 明日 科技 “ 辆 和 词 央 " 的 月 


图 10.10 实时 弹出 气泡 提示 窗口 
图 关键 技术 


本 实例 的 关键 之 处 是 如 何 弹出 一 个 气泡 提示 窗口 。 在 Web 应 用 中 ， 可 以 通过 HIML DOM 中 window 对 象 
的 createPopup0 方 法 实现 创建 一 个 气泡 提示 窗口 ， 下 面 将 对 该 方法 进行 详细 介绍 。 

createPopup() 方 法 用 于 创建 一 个 弹出 窗口 (pop-up)， 该 窗口 和 普通 窗口 一 样 具 有 标准 窗口 所 拥有 的 属性 和 
事件 。 但 是 通过 该 方法 创建 的 窗口 对 象 不 能 使 用 父 窗口 的 CSS 风格 ， 需 要 手工 重 写 。createPopup( 方 法 的 基本 


在 该 方法 中 ， 返回 值 为 oPopup Object 对 象 ， 也 就 是 返回 弹出 窗口 (pop-up) 对 象 。 
图 设计 过 程 


(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 
(2) 创建 indexjsp 页 ， 在 该 页 的 <scrip 忆 标签 中 导入 requestjs 文件 。 编 写实 例 化 Ajax 对 象 的 方法 
loadBubbleTip0， 用 于 向 服务 器 发 送 请 求 ， 获 取 当天 最 新 的 一 条 新 闻 ， 关 键 代码 如 下 : 


var bbsid=0; /当前 公告 了 D 
Var request = false: //Ajax 请 求 函数 返回 的 XMLHttpRequest 对 象 
function loadBubbleTipO{ 

var url="BbsServlet"; /服务 器 地 址 


var param ="action=getBbs&nocache=" + new Date(0.getTime0: /请 求 参 数 
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Tequest=httpRequest("post".url.true.callback.param); // 调 用 请 求 方法 
} 
(3) 创建 用 于 处 理 请 求 的 Servlet 实现 类 BbsServlet， 在 该 类 的 doPost0 方 法 中 获取 action 参数 的 值 ， 根 据 
action 参数 的 值 来 调用 getBbs0 方 法 ， 从 数据 库 中 获取 当天 的 最 新 的 一 条 新 闻 。doPost0 方 法 的 具体 代码 如 下 : 


Pprotected void doPost(HttpServletRequest requestHttpServletResponse response) 
throws ServletException, IOException { 


String action = request.getParameter("action"): /获取 action 参数 的 值 
if ("getBbs".equals(action)) { 
getBbs(request, response); /查询 最 新 的 新 闻 的 方法 


4 
} 
(4) 在 BbsServlet 中 编写 用 于 查询 最 新 新 闻 信 息 的 getBbs0 方 法 。 在 该 方法 中 首先 获取 当天 发 表 的 最 后 一 
条 新 闻 ， 也 就 是 最 新 的 一 条 新 闻 ， 然 后 将 获取 的 新 闻 信息 以 XML 格式 连接 成 一 个 字符 串 ， 再 判断 当前 cookie 
中 是 否 存 在 包括 查询 到 的 新 闻 的 ID 号 的 cookie， 也 就 是 判断 该 新 闻 是 否 已 读 。 如 果 已 读 ， 则 设置 输出 字符 串 为 
根 节点 的 起 始 标 记 ， 最 后 将 组 合 后 的 字符 串 输出 到 浏览 器 。getBbs0 方 法 的 具体 代码 如 下 : 
Private void getBbs(HttpServletRequest request HttpServletResponse response) 
throws ServletException, IOException { 
/查询 最 新 的 新 闻 信 息 
ConnDB conn = new ConnDB(); 
Date date=new Date(); 
String now=new java.sql.Date(date.getTimeO).toString0: /获取 yyyy-MM-dd 格式 的 日 期 
String sql = "SELECT * FROM tb_bbs WHERE sendTime between "+now+" 00:00:00' AND "+now+" 
23:59:59' ORDER BY sendTime DESC LIMIT 1": 
ResultSet rs = conn.executeQuery(sql); // 执 行 查询 语句 
int id=0; 
/设置 响应 的 类 型 和 编码 方式 
Tesponse.setContentType("text/xml:charset=UTF-8"); 
Tesponse.setHeader("Cache-Control", "no-cache"); 
PrintWriter out = response.getWriter(); 
String output = "<bbs>"; 


// 将 信息 输出 在 XML 文件 内 
SimpleDateFormat m = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"): /设置 日 期 时 间 的 格式 
try{ 
While (rs.nextO) { 
id=rs.getInt(1): /获取 新 闻 ID 


output += "<id>" + id+ "</id>"; 

output += "<title>" + rs.getString(2) + "</title>"; 

output += "<time>"+ m.format(java.text.DateFormat.getDateTimelInstance() 
.parse(rs.getString(4))) + "</time>"; 


bh 
} catch (Exception e) { 
e.printStackTraceO; 


} 
/判断 当前 cookie 中 是 否 存在 该 ID 号 的 cookie， 也 就 是 判断 该 新 闻 是 否 已 读 


Cookie cookies[]=request.getCookies|: // 读 取 全 部 cookie 
for(int i=0;i<cookies.length:i++){ 
if("mrBbsRemind".equals(cookies[i].getNameO) &é& ("bbsid"+id).equals(cookies[i] 
-getValueO)){ 
output = "<bbs>"; 
break: /跳出 循环 


由 
} 
output += "</bbs>"; 
out.printin(output): /输出 组 合 后 的 字符 串 
out.closeO; /关闭 输出 流 
} 


(5) 在 indexjsp 文件 中 ,编写 获取 最 新 新 闻 信息 的 Ajax 回调 函数 。 在 回调 函数 中 ， 首 先 获取 XML 格式 
的 新 闻 信 息 ， 然 后 从 该 新 闻 信息 中 获取 新 闻 人 D、 新 闻 标 题 、 新 闻 发 布 时 间 并 保存 到 相应 的 变量 中 ， 再 通过 实例 
化 气泡 提示 类 创建 一 个 气泡 提示 窗口 ， 最 后 设置 该 气泡 提示 窗口 的 相应 属性 , 并 且 添 加 查看 新 闻 详 细 信 息 命 令 ， 
关键 代码 如 下 : 


function { 
if(request readyState 一 4){ 
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if(request.status 一 200){ 
var doc= requestresponseXML; /获取 XML 格式 的 新 闻 信 息 
if(doc.getElementsByTagName("title") Jength>0){ 

/获取 XML 文档 中 的 id 节点 的 第 1 个 子 节点 的 值 
var id = doc.getElementsByTagName("id")[0] firstChild .nodeValue: 
bbsid-id: 
/获取 XML 文档 中 的 title 节点 的 第 1 个 子 节点 的 值 
var content = doc.getElementsByTagName("title")[0].firstChild nodeValue: 
/获取 XML 文件 中 的 time 节点 的 第 1 个 子 节点 的 值 
var foot1= doc.getElementsByTagName("time")[0].firstChild nodeValue; 
Var remindMessage = new PopBubble(307.170," ".content,foot]): 
/设置 弹出 窗口 的 左边 、 右 边 、 项 边 和 底 边 框 的 位 置 
TemindMessage box(nulLnulLnullscreen height-30): 


remindMessage.speed = 10; // 设 置 窗口 的 弹出 速度 
remindMessage.step 一 2: /设置 窗口 的 弹出 步 幅 
TemindMessage show0: /弹出 窗口 


PopBubble prototype.oncommand = functionO{ 
Window'open("BbsServlet?action=getDetail&id="+id,w"width=513.height-567.scrollbars=1"); 


this.close = true; 
this.hide|; /收缩 窗口 
} 
» 
Tequest = false; 


} 
} 


(6) 在 页 面 载 入 后 ， 调 用 loadBubbleTip(0 方 法 弹出 气泡 提示 窗口 ， 并 且 设 置 每 隔 1 分 钟 调用 一 次 
loadBubbleTip0 方 法 ， 关 键 代码 如 下 : 
window.onload=functionO){ 


loadBubbleTipO; 
window.setInterval(loadBubbleTip,1000*60); 


(7) 编写 气泡 提示 类 ， 并 将 全 部 代码 保存 在 一 个 名 为 remind.js 的 文件 中 ， 然 后 在 弹出 的 气泡 提示 窗口 的 
index.jsp 页 面 中 引用 remind.js 文件 。 
创建 一 个 用 于 弹出 气泡 提示 的 类 ， 名 称 为 PopBubble， 并 且 在 该 类 中 定义 相应 的 属性 ， 具 体 代码 如 下 : 


function PopBubble(width .height,title.contentfoob{ 


this.content = content; // 提 示 内 容 

this.title= title; // 提 示 标题 

this.foot= foot; /页 脚 内 容 
this.width = width?width:307: /设置 弹出 窗口 的 宽度 
this.height = height?height:170; // 设 置 弹出 窗口 的 高 度 
this.timeout= 300: /设置 窗口 的 停留 时 间 
this.speed = 10; /设置 窗口 的 弹出 速度 
this.step = 1: /设置 窗口 的 弹出 步 幅 
this.right = screen .width -1; /设置 窗口 右边 的 位 置 
this.bottom = screen_height: /设置 窗口 底 边 的 位 置 
this.left = this right - this. width: /1 设置 窗口 左边 的 位 置 
this.top = this.bottom - this.height: /设置 窗口 项 边 的 位 置 
this.tinx // 计 时 器 

this.pause = false: // 标 记 是 否 停止 收缩 
this.close = false: // 标 记 是 否 关闭 
this.autoHide = true: /标记 是 否 自动 收缩 


} 
为 弹出 气泡 提示 类 编写 hide0 方 法 ， 该 方法 用 于 收缩 弹出 窗口 ， 具 体 代 码 如 下 : 
PopBubble.prototype.hide = function|{ 
/设置 弹出 窗口 的 高 度 
Var offset = this.height>this.bottom-this.top?this.height:this.bottom-this.top; 
var obj = this: 
if(this.timer>0){ 
window.clearInterval(obij.timer): 
1 
var fun = functionO{ 
if(obj pause—falsellobj.close){ // 判 断 是 否 弹 出 窗口 
var x = objleft // 获 取 窗 口 左 边框 的 位 置 
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vary=0: 
var width = obj-width: /获取 窗口 的 宽度 
/获取 窗口 的 高 度 
var height = 0: 
if(obj.offset>0){ 
height = obj.offset: 
} 
y =obj.bottom - height: /获取 窗口 项 边框 的 位 置 
fy>=objbottom){ 
window.clearInterval(obj.timer); 
obj.Pop.hideO; /收缩 窗口 
}else{ 
obj.offset = obj.offset - obj.step: 


obj.Pop.show(x.ywidth height); /弹出 窗口 
} 
1 
this.timer = window.setInterval(fun,this.speed); 
} 
为 弹出 气泡 提示 类 编写 show0 方 法 ， 该 方法 用 于 显示 带 声 音 提 示 的 弹出 窗口 ， 具 体 代 码 如 下 : 
PopBubble.prototype.show = functionO{ 
Var oPopup = window.createPopupO; // 创 建 一 个 顶层 窗口 对 象 
this.Pop = oPopup; 
var w = this.width: 
var h = this.height: 
this.offset =0; 
Var str = "<div style=border#1D84D3 2px solid:z-index: 99999; left: Opx: width: " + w + "px:; position: absolute; top: Opx; height: " +h + "px;>" 
str += "<table style='background-image:url(images/pop_title.jpg);background-repeat:no-repeat; cellSpacing=0 cellPadding=0 width="100%' 
border=0>" 
sti="<t>" 
str += "<td width=30 height=33></td>" 
str += "<td style='padding-left: 4px; font-weight: normal; font-size: 12px; color: #331C09; padding-top: 4px' vAlign=center width 一 1009%0>" + 
this.title + "</td>" 
str += "<td style= padding-right: 2px:; ' valign=center align=right width=19>" 
str += "<span title= 关 闭 style='font-weight: bold; font-size: 12px: cursor: hand; color: #FF4200; margin-right: 4px' id=btn Close' >X 


str + 一 "<tr>” 
str += "<td style=padding: 1px' colSpan=3 height=" + (h-28) + ">" 
str += "<div style='background-color: #fefffl:padding: 8px; font-size: 12px; width: 100%:; height: 100%'><a href='javascript:void(0)' 
hidefocus=true id='aLink' style='color:#990000'>" + this.content + "</a><br><br>" 
str += "<div style="word-break: break-all' align='right’ style='color:#6C6B68'>" + this.foot + 
"<embed id='soundControl' src=images/Windows.wav’ mastersound hidden='true’ loop="0' autostart='true’></embed>"+ "</div>" 
str += "</div>" 
str += "</td>" 
str +="</tr>" 
str += "</table>" 
str += "</div>" 
// 将 设置 好 的 div 添加 到 顶层 窗口 的 body 中 
oPopup.document.body.innerHTML = str; 
var obj = this; 
i 口 的 鼠标 悬 停 事件 ， 在 事件 中 设置 窗口 不 收缩 
.documentbody.onmouseover = function( {obj.pause=true:} 
“/ 才 名 项 层 窗 口 人 鼠标 移 除 事件 ， 在 事件 中 设置 窗口 收缩 
oPopup.document bodyonmouseout = function0 {obj.pause=false:} 
var fun =function0{ 
/获取 窗口 左边 框 的 位 置 


Var width = objwidth: /获取 窗口 的 宽度 
/获取 窗口 的 高 度 
var height =obj.height: 
if(obj.offset>obj.height){ 
height = obj height: 
} else { 
height = obj.offset: 


/获取 窗口 项 边框 的 位 置 
y = obj.bottom - obj.offset: 
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ify<=objtop){ 
obj-timeout--; 
if(obj.timeout—0){ 
window.clearInterval(obi.timer): 
if(obj.autoHide) { 
obj.hideO: /收缩 窗口 
2 


}else{ 
obj.offset = obj.offset + obj step: 


obj.Pop.show(x,y,width,height); /弹出 窗口 
} 


this.timer = window.setInterval(fun,this.speed) /间隔 speed 时 间 调用 fun 函数 弹出 窗口 
// 单 击 “关闭 ”按钮 时 需要 请 求 服务 器 执行 操作 


oPopup.document.getElementById("btn_Close").onclick = functionO{ 
Var url="BbsServlet"; 
Var param ="action=changeFlag&-id="+bbsid+"&-nocache=" + new Date0. i 
request=httpRequest("post",url,true,callback1,param); ”// 调 用 请 求 方法 
obj.close = true; 
objhide0: /收缩 窗口 
L 
// 单 击 超 链接 时 执行 的 操作 
oPopup.document.getElementById("aLink").onclick = function0{ 
obj.oncommandO; // 调 用 oncommand0 函 数 打 开 查 看 超 链接 详细 信息 的 窗口 
L 
} 
< 注意 : 在 上 面 的 代码 中 ， 加 粗 的 代码 用 于 通过 Ajax 实现 单 击 “ 关 闭 ” 按 钮 时 写 入 cookie， 保 证 该 条 新 闻 不 
再 对 当前 用 户 显示 。 
编写 设置 弹出 窗口 的 左边 、 右 边 、 顶 边 和 底 边框 的 位 置 的 方法 ， 具 体 代码 如 下 : 
PopBubble.prototype.box = function(left.right.top.bottom) { 
try{ 
this.left = left !=null?left:this.right-this.width:; 
this.right = right!=null?right:this.Jeft +this.width; 
this.bottom = bottom!=null?(bottom>screen.height?screen.height:bottom): 
screen.height; 
this.top = top !=null?top:this.bottom - this.height: 
} catch(e){} 


} 
图 秘笈 心 法 
ee 采用 了 Cookie 保存 已 经 读 取 或 关闭 的 新 闻 ID。 这 样 ， 在 获取 新 闻 信息 时 ， 先 判断 新 闻 


和 否 存在 于 该 用 户 的 cookie 中 ， 如 果 存 在 ， 就 不 对 该 用 户 显 示 这 条 新 闻 ， 和 否则 才 弹 出 气泡 提示 显示 该 新 闻 。 
MR 这 条 新 闻 信息 将 不 再 对 该 用 户 所 显示 。 


10.3 ”动态 加 载 数据 


为 了 提高 页 面 的 加 载 速度 ， 可 以 对 一 些 数 据 应 用 动态 加 载 。 下 面 通过 几 个 具体 的 例子 介绍 如 何 应 用 Ajax 实 
现 动态 加 载 数据 。 


二 初级 
六 实用 指数 : 友 女 女 从 
图 实例 说 明 


本 实例 将 介绍 如 何 应 用 Ajax 实现 实时 显示 最 新 商品 及 报价 。 运 行 本 实例 ， 在 页 面 的 中 间 位 置 将 显示 “最 新 
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商品 及 报价 ”栏目 ， 如 图 10.11 所 示 ， 每 隔 10 分 钟 从 数据 库 中 获取 一 次 最 新 商品 信息 及 报价 ， 保 证 所 看 到 的 数 
据 为 最 新 数据 。 


< ce | 
时 尚 液晶 显示 器 便携 式 自行 车 滚 简 洗衣 机 
当前 价格 : 8300 《元 ) 当前 价格 : 9990 《元 》 当前 价格 : 26080 (元 ) 


XY 品牌 水 疹 荣 誉 获得 XX 全 奖 - 


[2010-04-01] 0 电子 产品 著 助 商 即 日 


好 天 放电 三 四 [2010-03-02] 沁 购 槐 帮助 失学 儿 重 重 天 [2010-11-30] 。 XUX 家 用 电器 发布 招 回 公告 


洗衣 机 [2010-01-01] 。 为 庆 元 日 现 举办 购 柳 抽 奖 活 动 [zolo-10-01] 。 庆 祖国 生日 2 电器 无 信 且 于 


10.11 实时 显示 最 新 商品 及 报价 
图 关键 技术 


本 实例 主要 是 利用 Ajax 异步 提交 请 求 的 方式 来 定时 读 取 数 据 库 中 最 新 的 商品 信息 。 实现 定时 读 取 的 关键 是 
通过 JavaScript 中 window 对 象 的 setInterval0 方 法 ， 通 过 该 方法 来 调用 Ajax 请 求 服务 器 的 方法 ， 并 且 设 置 每 隔 
10 分 钟 调用 一 次 ， 即 可 实现 实时 显示 最 新 商品 及 报价 。 

图 设计 过 程 
(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 

(2) 创建 index.jsp 页 ， 在 该 页 面 中 导入 requestjs 文件 ， 应 用 DIV+CSS 进行 布局 ， 然 后 在 <scrip 人 标签 中 
编写 实例 化 Ajax 对 象 的 方法 getGoods0, 用 于 向 服务 器 发 送 请 求 ， 获取 最 新 的 商品 信息 及 报价 ,关键 代码 如 下 : 

<sScript sre=")s/requestJs"></script> 

<script language="javascript"> 

var request =false; /创建 用 于 保存 XMLHttpRequest 对 象 的 变量 


Var url="GoodsServlet"; /服务 器 地 址 
var param ="action=getGoods&nocache=" + new DateO.getTime0: /请 求 参数 
Tequest=httpRequest("post",url.true.callbackFunc.param): /调用 请 求 方法 
(3) 创建 Servlet 的 实现 类 GoodsServlet， 在 该 类 的 doPost0 方 法 中 获取 action 参数 的 值 ， 并 且 判 断 action 
参数 的 值 是 否 等 于 getGoods, 如 果 等 于 , 则 调用 getGoods0 方 法 从 数据 库 中 获取 最 新 的 商品 信息 及 报价 。 doPostO 
方法 的 具体 代码 如 下 : 
Pprotected void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
String action = request.getParameter("action"): 
if ("getGoods".equals(action)) { 
getGoods(request, response): 
x 
(4) 在 GoodsServlet 中 编写 getGoods0 方 法 ， 在 该 方法 中 首先 设置 响应 类 型 为 XML， 并 且 创 建 XML 文档 
对 象 及 根 节点 ， 然 后 从 数据 库 中 获取 最 新 的 商品 信息 及 报价 ， 再 将 获取 的 商品 信息 按照 指定 的 格式 写 入 到 XML 
文档 对 象 中 ， 最 后 将 XML 文档 输出 到 浏览 器 。getGoods0 方 法 的 具体 代码 如 下 : 
Private void getGoods(HttpServletRequest request, HttpServletResponse response) 


Tesponse. "text/xml:charset-UTF-8" ~ // 设 置 响应 格式 为 XML 
/禁止 页 面 缓存 
Tesponse .addHeader( "Cache-Control", "no-store no-cache must-revalidate" ); 


Ei 
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Tesponse addHeader( "Cache-Control", "post-check=0.pre-check=0" ); 
response.addHeader( "Expires", "0" ); 

response.addHeader( "Pragma", "no-cache” ); 

PrintWiiter out = response.get Writer(); 

ConnDB conn = new ConnDB(); 

String sql = "SELECT * FROM tb_goods ORDER BY refreshTime DESC"; 


ResultSet rs = conn.executeQuery(sq]); /查询 数据 库 商品 信息 
out.printin("<goodses>"); /XML 根 节点 
try{ 
while(rs.nextO){ /循环 结果 集 ， 将 读 取出 的 数据 添加 到 XML 子 节点 中 


outprintin("<goods> 
out.printin("“<name>"+rs.getString(2)+"</name>"); 
out.printin("<price>"+rs.getFloat(3)+"</price>"); 
out.println("<picture>images/goods/"+rs.getString(4)+"</picture>"); 
out.printin("</goods>"); 


》 
jcatch(Exception ex){ 
ex.printStackTrace(); 
} 


‘out.println("</goodses>"); 
out.close(); 


} 


(5) 在 index.jsp 页 面 的 合适 位 置 添加 一 个 显示 最 新 商品 及 报价 的 <div> 标 记 ，id 为 goodsList， 关 键 代码 


如 下 : 
<div id="goodsList”> 正 在 获取 商品 信息 ...</div> 


(6) 在 indexjsp 文件 中 编写 Ajax 回调 函数 。 首 先 需 要 获取 XML 格式 的 商品 信息 ， 然 后 通过 循环 将 获取 


的 商品 信息 连接 成 指定 格式 的 字符 ， 最 后 将 其 显示 到 <div> 标 记 中 ， 关 键 代码 如 下 : 
function callbackFuncO { 
if(request.readyState 一 4){ 
if(request.status 一 200){ 
Var doc = request.responseXML; // 获 取 XML 格式 的 商品 信息 
Var goodses = doc.getElementsByTagName("goods"); // 获 取 goods 节点 对 应 的 对 象 
Var innerHTML = ""; 
证 ((goodses != null) &é (goodses.length ‘= 0)) { 
innerHTML += "<ul>"; 
for (i= 0; i< goodsesJength: i++) { // 通 过 循环 将 获取 每 个 goods 节点 的 值 
Var goods = goodses[i]; 
var goodsName = goods.childNodes[0] firstChild.data: /获取 商品 名 称 


var price = goods.childNodes[1] .firstChild.data: /获取 当前 价格 
var picture = goods.childNodes[2].firstChild.data; 。“”// 获 取 商 品 图 片 
innerHTML += "<li><dl>"; 


innerHTML += "<dt><img sre=" + picture + "></dt>"; 
innerHTML += "<dd>" + goodsName + "</dd>"; 
innerHTML += "<dd> 当 前 价格 : <font color=red>" + price+ "</font> (元 ) </dd>"; 
innerHTML += "</dl></li>"; 
} 
innerHTML += "</ul>"; 
innerHTML += innerHTML: // 为 了 实现 走马 灯 效 果 ， 所 以 添加 这 句 代码 
}else{ 
innerHTML = " 暂 无 最 新 商品 及 报价 !"; 
} 
document.getElementById("goodsList") innerHTML = innerHTML: 
Tequest = false: 


(7) 为 了 实现 实时 获取 最 新 的 商品 信息 及 报价 ， 还 需要 在 index.jsp 文件 中 添加 以 下 的 JavaScript 代码 ， 从 
而 实现 当 页 面 载 入 完毕 后 ， 先 调用 getGoods() 方 法 获取 商品 信息 ， 然 后 再 设置 每 隔 10 分 钟 获取 一 次 商品 信息 ， 


关键 代码 如 下 : 
window.onload = function0 { 
getGoods0: 
window.setInterval("getGoodsO", 600000): /| 每 隔 10 分 钟 调用 一 次 getGoods0 方 法 
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国 秘笈 心 法 


于 在 Servlet 中 回 传 给 客户 端的 XML 文档 中 的 商品 信息 是 由 多 个 <goods> 组 成 的 节点 ， 所 以 在 Ajax 回调 
函数 中 获取 XML 节点 时 ， 应 该 通过 循环 来 获取 每 个 <goods> 节 点 


实例 250 实用 指数 友 雪 克 立 
实例 说 明 


应 用 Ajax 可 以 实现 在 不 刷新 页 面 的 情况 下 实时 显示 聊天 内 容 。 运 行 本 实例 ,在 页 面 中 将 显示 最 新 的 聊天 内 
容 ， 如 图 10.12 所 示 ， 当 用 户 输入 昵称 及 说 话 内 容 ， 单 击 “ 发 送 ” 按 钮 后 ， 将 发 送 聊天 内 容 ， 并 显示 到 上 方 的 
聊天 内 容 列表 中 。 


el 三 ! 天 天 下 让 了 


图 10.12 实时 显示 聊天 内 容 


图 关键 技术 
本 实例 主要 应 用 Ajax 异步 提交 请 求 技术 实现 不 刷新 页 面 的 同时 发 送 聊天 信息 并 实时 显示 最 新 的 聊天 信息 。 
图 设计 过 程 
(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 


(2) 创建 聊天 页 面 indexjsp， 在 该 页 面 中 首先 导入 requestjs 文件 ， 然 后 在 <scrip 人 > 标签 中 编写 实例 化 Ajax 
对 象 的 方法 sendO， 用 于 向 服务 器 发 送 请 求 ， 关 键 代码 如 下 : 


function sendO{ // 验 证 聊天 信息 并 发 送 
Var user = document.getElementById("user").value; 
Var speak = document.getElementById("speak").value; 
if(user—"") 


ff 
人 人 


和 

if(speak—""){ 
alert(" 发 送信 息 不 可 以 为 空 ! "); 
document getElementById("speak") focusO: 
return false: 


} 


document.getElementById("speak").value=""; /清空 文本 框 的 值 
document.getElementById("speak").focusO: // 让 文本 框 获得 焦点 
var url="Chat"; // 服 务 器 地 址 


var param ="action=send&user="+user+"&speak="+speak; ”// 请 求 参数 
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Tequest=httpRequest("post".url.true.callback.param); // 调 用 请 求 方法 
} 
(3) 创建 Servlet 实现 类 Chat， 在 该 类 中 编写 send0 方 法 ， 将 聊天 信息 保存 到 application 对 象 中 。send0 方 
法 的 具体 代码 如 下 : 


public void send(HttpServletRequest requestHttpServletResponse response) 
throws ServletException, IOException { 
Tequest.setCharacterEncoding("UTF-8"); 
Tesponse.setCharacterEncoding("UTF-8"); 


ServletContext application=getServletContextO: /获取 application 对 象 
String user=request.getParameter("user"); 1/ 获取 用 户 上 昵称 
String speak=request.getParameter("speak"); /获取 说 话 内 容 


user =java.net.URLDecoder.decode(user, "UTF-8"); 
speak =javanetURLDecoderdecode(speak. "UTF-8"); 


Vector<String> v=null; 
String message="["tuser+"] 说 : "+speak; /组 全 说话 内 容 
if(null—application.getAttribute("message”)){ 
V=new Vector<String>(); 
Jelse{ 
VY=(Vector<String>)application.getAttribute(“message"): 
} 
V.add(message); 
application.setAttribute("message", Vv); // 将 聊天 内 容 保存 到 application 中 


Random random = new Random(): 
Tequest.getRequestDispatcher("Chat?action=geténocache=" + random.nextInt(10000)) 
‘forward(request, response); 
} 
(4) 在 index.jsp 页 中 ,编写 实例 化 Ajax 对 象 的 方法 getContent0， 向 服务 器 发 送 请 求 获取 聊天 内 容 。 并 且 


编写 Ajax 回调 函数 读 取 服务 器 返回 的 聊天 内 容 ， 关 键 代 码 如 下 : 


function getContentO{ 
var url="Chat"; /服务 器 地 址 
var param ="action=get&nocache="+new Date().getTime(): /请 求 参数 
Tequest=httpRequest("post",url,true.callback_content,param); /调用 请 求 方法 

} 

/1/Ajax 回调 函数 


function callback_contentO{ 
if(request.readyState 一 4){ 
if(request.status 一 200){ 
document.getElementById("content").innerHTML=request.responseText; ”// 显 示 聊 天 内 容 
request =false; 


} 
} 
(5) 在 Chat 类 中 编写 get0 方 法 获取 全 部 聊天 信息 。get0 方 法 的 具体 代码 如 下 : 
Public void get(HttpServletRequest request, HttpServletResponse response) 
throws ServletException,IOException{ 
ServletContext application=getServletContextO; /获取 application 对 象 
String msg=""; 
if(null!=application.getAttribute("message")){ 
Vector<String> V_temp=(Vector<String>)application.getAttribute("message"): 
for(int i=v_temp.sizeO)-1:i>=0:i--){ 
msg=msg+"<br>"+v_temp.get(i); 


jelsef 
msg=" 欢 迎 光临 本 聊天 室 !": 
} 
request.setAttribute("msg", msg); 
request.getRequestDispatcher("content.jsp") .forward(request, response): 
} 


(6) 编写 contentjsp 文件 ， 在 该 文件 中 应 用 EL 表达 式 输出 聊天 内 容 ， 具 体 代码 如 下 : 
<%@page contentType="text/html” pageEncoding="GBK”" %> 
S{msg} 

(7) 为 了 实现 实时 显示 最 新 的 聊天 内 容 ， 还 需要 在 indexjsp 页 中 添加 以 下 代码 : 
window.setInterval("getContent|:".1000); 
window.onload-function0{ 
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getContent|; // 当 页 面 载 入 后 调用 Ajax 获取 聊天 内 容 
} 
(8) 在 “发 送 ” 按 钮 的 onClick 事件 中 调用 send0 方 法 ， 发 送 聊 天 信息 ， 关 键 代码 如 下 : 
<input type="button” value=" 发 冉 " onClick="send0"> 


国 秘笈 心 法 


本 实例 在 实现 时 ， 在 Servlet 中 应 用 到 了 ServletContext 对 象 保存 用 户 发 送 的 聊天 内 容 ， 在 ServletContext 对 
象 中 保存 的 数据 是 共享 数据 ， 整 个 Web 应 用 程序 都 可 以 访问 到 该 对 象 中 保存 的 数据 ， 所 以 用 ServletContext 对 
象 保存 聊天 内 容 ， 每 个 聊天 用 户 都 能 够 访问 。 


实用 指数 : 女 女 友信 : 
国 实例 说 明 
所 谓 快速 浏览 ， 就 是 当 鼠 标 指针 移动 到 指定 区 域 时 ， 会 动态 加 载 显示 相关 数据 ， 这 些 动态 加 载 的 数据 是 通 


过 Ajax 异步 请 求 读 取出 来 的 ， 而 不 是 网 页 中 的 静态 信息 。 本 实例 将 介绍 如 何 应 用 Ajax 来 实现 这 样 的 效果 。 运 
行 本 实例 ， 如 图 10.13 所 示 ， 当 鼠标 指针 移动 到 某 件 商品 所 在 区 域 时 ， 将 弹出 窗口 显示 该 商品 的 详细 信息 。 


* 不 柜上 即日 圭 出 化 于 澳 动 


生产 推 :9 内山 地 目下， 人 
/人 


* 包 在 看 二 购物 汪 :00 者 
* 因 业 务 硕 要 ,本 而 项 怕 招聘 … 
* 四 业务 扩大 ， 可 两 关 让 招 各 地 


PbE 
PP 

加 和 守 压 日 有 

田间 食品 有 曾 下 们 区 法 衣 天 

加 各 旧 类 时 中 


nd 
人 # 作 直下 条 


EL 
CE 


广告 招商 、、 找 语 曲 机 书 
区 -hs 


图 10.13 ”实现 快速 浏览 


图 关键 技术 


在 实现 本 实例 时 ， 除 了 应 用 Ajax 技术 外 ， 还 需要 应 用 DOM 来 生成 一 个 准确 的 偏 移 量 ， 并 根据 该 偏 移 量 放 
置 工具 提示 。 主 要 应 用 HTML 元 素 的 offsetLeft 属性 和 offsetTop 属性 ，offsetLeft 属性 用 于 返回 当前 元 素 相对 于 
版 面 或 其 offsetparent 属性 返回 对 象 的 左边 缘 的 偏 移 量 ，offsetTop 属性 用 于 返回 当前 元 素 相对 于 版 面 或 其 
offsetparent 属性 返回 对 象 的 顶端 的 偏 移 量 。 
图 设计 过 程 

(1) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 

(2) 创建 显示 商品 信息 的 页 面 indexjsp， 在 该 页 的 <script> 标 签 中 导入 requestjs 文件 ， 然 后 在 页 面 中 添加 


显示 商品 信息 的 <div> 标 签 ， 并 在 <div> 中 添加 分 栏 显示 商品 概要 信息 的 表格 ， 然 后 在 表格 的 下 方 添加 一 个 用 于 
显示 工具 提示 的 <div> 标 签 ， 关 键 代 码 如 下 : 
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<div id="tfoolTip" style=" background-image:url(images/tip.gif); width:206px; height:155px; display:none; position:absolute; z-index:100; "> 
<table width="1009%6" height="138" border="0" cellpadding="0" cellspacing="0"> 
<t> 
<td width="2096" height="28">&nbsp:</td> 
<td width="7196" valign="middle”">&nbsp;</td> 
<td width="996" valign="middle">&nbsp:</td> 
< 
<t> 
<td>&nbsp;</td> 
<td valign="fop"id="goodsIntroduce> 介 绍 </td> 
<td valign="top">&nbsp;</td> 
</tr> 
</table> 
</div> 
(3) 在 indexjsp 页 的 <scrip 亿 标签 中 ， 编 写实 例 化 Ajax 对 象 的 方法 getData0 以 及 Ajax 回调 函数 callback 


Func0， 关 键 代 码 如 下 : 


Var request = false; 1/ 用 于 保存 XMLHttpRequest 对 象 的 全 局 变量 
var offsetE; // 定 义 一 个 全 局 变量 ， 用 于 保存 偏 移 量 的 对 象 
function getData(elementid){ 
offsetE=element; // 将 当前 的 偏 移 量 对 象 保存 到 全 局 变量 中 
varurl="getTipjsp": /服务 器 地 址 
Var param ="id="+id+"&nocache="+new DateO.getTime0 /请 求 参数 
Tequest=httpRequest("get",url,true,callbackFunc,param); /调用 请 求 方法 
} 
//Ajax 回调 函数 
function callbackFuncO{ 


if(request.readyState =— 4){ 
if(request.status 一 200){ 

/设置 工具 提示 的 左边 距 
document.getElementById("toolTip").style.left=(offsetE.offsetLeft+150)+"px"; 
/设置 工具 提示 的 上 边 距 
document.getElementById("tool Tip").style.top=offsetE.offsetTop+"px"; 
/将 工具 提示 信息 添加 到 页 面 中 
document.getElementById("goodsIntroduce").innerHTML=request.responseText:; 
document.getElementById("toolTip").style.display="block": // 显 示 工 具 提示 
request = false; 


} 
} 
(4) 编写 隐藏 工具 提示 的 自 定义 JavaScript 函数 clearTip0， 具 体 代码 如 下 : 


function clearTipO{ 
document.getElementById("toolTip").style.display="none"; /隐藏 工 具 提 示 
} 


(5) 创建 getTipjsp 页 ， 在 该 页 中 通过 指定 商品 ID 获取 商品 的 详细 信息 ， 关 键 代 码 如 下 : 
<9%@ page contentType="text/html; charset=GBK" language="java” import="java.sql. *" %> 
<%(0 page import="com.core.ConnDB”%> 
<% 


String id-request.getParameter("id"); 
ConnDB conn =new ConnDBO:; 
String sql="select introduce from tb_goods where id="+id; 
ResultSet rs=conn.executeQuery(sqD); 
f(rs.nextO){ 
out.print(rs.getString(1)): 
} 
%> 
(6) 在 index.jsp 页 显示 商品 信息 的 单元 格 中 添加 onMouseOver 事件 和 onMouseOut 事件 , 在 onMouseOver 
事件 中 调用 getData0 方 法 显示 工具 提示 信息 ， 在 onMouseOnut 事件 中 调用 clearTip0 方 法 隐藏 工具 提示 信息 ， 关 
键 代 码 如 下 : 


<td align="center”" onMouseOver—"getData(this,<%—new_ID%>)” onMouseOut—"clear TipO"> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 在 论坛 中 显示 帖子 信息 时 ， 快 速 浏览 显示 发 帖 人 的 详细 介绍 ; 在 显示 相片 缩 略 
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图 时 ， 快 速 浏 览 显 示 相 片 的 详细 介绍 。 
图 实例 说 明 


多 级 联 下 拉 列 表 是 指 一 组 相互 关联 的 下 拉 列 表 ， 相 邻 的 两 个 下 拉 列 表 是 父子 关系 ， 改 变 父 下 拉 列 表 的 值 ， 
子 下 拉 列 表 的 值 也 随 之 改变 。 运 行 本 实例 ， 如 图 10.14 所 示 ， 在 页 面 中 将 显示 一 个 三 级 联动 下 拉 列 表 ， 在 省 和 
直辖 市 的 下 拉 列 表 中 选择 省 份 ， 在 地 级 市 下 拉 列 表 中 将 显示 出 该 省 份 的 地 级 市 信息 ， 在 地 级 市 下 拉 列 表 中 选择 
其 中 一 个 市 ， 在 县 、 县 级 市 或 区 下 拉 列 表 中 将 显示 区 信息 。 


六 用 户 注 用 


用 户 名 : 

Nl 

人 全 全 : 

aa 让; 

居住 地 : 黑龙 I 省 了 
MT, SE 村 98 
Ti 2 

排 示 问 是 答 款 : 


(as 
图 10.14 多 级 联 下 拉 列 表 


图 关键 技术 

在 实现 本 实例 时 ， 首 先 需 要 设计 一 个 保存 省 市 信息 的 XML 文件 ,在 该 文件 中 ， 需 要 充分 体现 出 省 /直辖 市 、 
地 级 市 和 县 /县 级 市 /区 之 间 的 关系 。 接 下 来 需要 从 XML 文件 中 获取 所 需 的 信息 ， 也 就 是 解析 XML 文件 。 本 实 
例 中 应 用 的 是 dom4j 组 件 解析 XML 文件 ， 下 面 将 对 应 用 dom4j 解析 XML 文件 进行 介绍 。 

1， 构建 XML 文档 对 象 

在 解析 XML 文档 前 ， 需 要 构建 要 解析 的 XML 文件 所 对 应 的 XML 文档 对 象 。 在 获取 XML 文档 对 象 时 ， 
首先 需要 创建 SAXReader 对 象 ， 然 后 调用 该 对 象 的 read0 方 法 获取 对 应 的 XML 文档 对 象 。SAXReader 对 象 的 
read0 方 法 的 原型 如 下 : 

public Document read(File file) throws DocumentException 

参数 说 明 

file: 用 于 指定 要 解析 的 XML 文件 。 


例如 ， 获 取 XML 文件 zone.xml 对 应 的 XML 文档 对 象 的 代码 如 下 : 
String fileURL = request.getRealPath("/xml/zone.xml"); 


SAXReader reader = new SAXReader(): /实例 化 SAXReader 对 象 
Document document = reader.read(new File(fileURI)): /获取 XML 文件 对 应 的 XML 文档 对 象 
2.， 获取 根 节点 


在 构建 XML 文档 对 象 后 ， 就 可 以 通过 该 XML 文档 对 象 获取 根 节点 。dom4j 组 件 的 Document 对 象 的 
getRootElement0 方 法 可 以 返回 指定 XML 文档 的 根 节 点 。getRootElement() 方 法 的 原型 如 下 : 

Public Element getRootElementO 

返回 值 : Element 对 象 。 


例如 ， 获 取 XML 文档 对 象 document 的 根 节点 的 代码 如 下 : 
Element country= document.getRootElement0O: /获取 根 节点 
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3 获取 子 节点 
在 获取 根 节点 后 ， 还 可 以 获取 其 子 节点 ， 这 可 以 通过 Element 对 象 的 element0 或 elements() 方 法 实现 。 下 面 
将 分 别 介绍 这 两 个 方法 。 
(1) element0 方 法 
element0 方 法 用 于 获取 指定 名 称 的 第 一 个 节点 。 该 方法 通常 用 于 获取 根 节点 中 节点 名 唯一 的 一 个 子 节点 。 
element0 方 法 的 原型 如 下 : 
public Element element(String name) 
参数 说 明 
name: 用 于 指定 要 获取 的 节点 名 。 
返回 值 : Element 对 象 。 
(2) elements() 方 法 
elements() 方 法 用 于 获取 指定 名 称 的 全 部 节点 。 该 方法 通常 用 于 获取 根 节点 中 多 个 并 列 的 具有 相同 名 称 的 子 
节点 。elements0 方 法 的 原型 如 下 : 


public List elements(String name) 

参数 说 明 

name: 用 于 指定 要 获取 的 节点 名 。 

返回 值 ，List 集合 。 

例如 ， 要 获取 本 实例 中 的 XML 文件 zone.xml 的 province 节点 ， 可 以 应 用 elements0) 方 法 ， 具 体 代 码 如 下 : 


Element country = document.getRootElementO: /获取 根 节点 
List<Element> provinceList = country.elements("province”); /获取 表示 省 份 和 直辖 市 的 节点 
4 查询 节点 


在 dom4j 组 件 中 ， 查 询 节 点 可 以 应 用 Element 对 象 的 selectSingleNode(0 方 法 实现 。Element 对 象 的 
selectSingleNode( 方 法 用 于 获取 符合 指定 条 件 的 唯一 节点 ， 该 方法 的 原型 如 下 : 

public Node selectSingleNode(String xpathExpression) 

参数 说 明 

xpathExpression: XPath 表达 式 。XPath 表达 式 使 用 反 斜 枉 “/” 隔 开 节点 树 中 的 父子 节点 ， 从 而 构成 代表 节 
点 位 置 的 路 径 。 如 果 XPath 表达 式 以 反 斜 杠 “/” 开 头 ， 则 表示 使 用 的 是 绝对 路 径 ， 否则 表示 使 用 的 是 相对 路 径 。 
如 果 使 用 属性 ， 那 么 必须 在 属性 名 前 加 上 @ 符 号 。 另 外 ， 在 XPath 表达 式 中 ， 也 可 以 使 用 谓词 。 

例如 ， 下 面 的 表达 式 将 返回 name 属性 值 等 于 “北京 市 ”的 province 节点 。 

/country/province[@name=' 北 京 市 ] 

例如 ,应 用 selectSingleNode( 方 法 获取 XML 文档 的 根 节点 country 的 name 属 性 为 “北京 市 ”的 子 节点 province 
的 代码 如 下 : 

Element item = (Element) country.selectSingleNode("/country/province[@name=" 北 京 市 ]"): 

S， 获 取 属 性 值 

使 用 Element 对 象 的 attributeValue0 方 法 可 以 获取 指定 节点 的 指定 属性 值 ， 该 方法 的 原型 如 下 : 

public String attributeValue(String name) 

参数 说 明 

name: 用 于 指定 要 获取 其 值 的 属性 名 。 

例如 ， 要 获取 province 节点 的 name 属性 值 ， 可 以 使 用 下 面 的 语句 : 


Element provinceElement.attributeValue("name”") 


图 设计 过 程 


<province id=-"00000"name=" 龙 京 访 > 
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<city id=-"00001"name=" 龙 识 " area=" 科 大 区 古 磊 克 凌 交 克 富丽 区 亡 历 克 去 咎 克 
石 奔 几 克 诲 学 1 17 祥 为 克 房 W/ 克 通 旋 克 候 六 克己 克 区 天 内 克 友 关 克 严 从 区, 
蒋 云 的 延庆 县 > 
</city> 
</province> 
<province id="05000"name=" 吉 藉 共 > 
<city id="05001” name=" 故 大 "area=" 观 妥 区 , 茵 梧 应 九 台 刻 俱 攻 县 稻 嫌 记 天 尖 [, 
第 姑 区 , 半 甩 区 ,二 证 区 ,名 局 区 ,经 济 共 大 开发 民 记 新 "> 


Zi ros002" name-" 站 砂 基 鲜 族 自 注 NM"area=" 延 营 刻 图 们 刻 改 化 记 于 闲 广 "> 
i 0s003" name=" 滞 内 "area=" 书 二 区 , 肩 蕊 [ 区 ,龙潭 区 , 帮 注 [t, 绞 河 记 帮 秃 广 "> 
i i000 name=" 和 应届 "area=" 作 这 并 区 ,并 源 区 , 临 江 区 ,于 可 县 琴 宇和 县 "~ 
i iar0s005 "name=" 应 娘 "area=" 涨 北 区 , 洲 觅 区 ,厂区 广 鞠 黄 县 通 答 县 真 盘 "~ 
i iar0s006" name=" 历 邢 ' area=" 条 胡 县 负 通 丹 鞠 请 消 明 公主 赂 访 观 辽 记 > 
i e0007" Dame= "大 属 " area=" 宁 江 [, 长 内 县 肛交 县 抠 条 县 所 部 "> 
< i008 name=" 巡 小 "area=" 龙 山区 , 西 笑 民 , 共 才 县 茶 这 县 真 侈 "> 
ER name=" 衣 化 "area=" 共 忆 区 ,二 请 江 区 , 舱 河 口 记 入 笑 疮 通化 县 "~ 
0 
Eee <!-- 省 略 了 其 他 省 市 的 节点 信息 --> 
</country> 


(2) 编写 indexjsp 文件 ， 应 用 DIV+CSS 进行 布局 ， 并 在 该 文件 的 适当 位 置 添加 省 /直辖 市 下 拉 列 表 、 地 级 
市 下 拉 列 表 和 县 /县 级 市 /区 下 拉 列 表 ， 关 键 代码 如 下 : 


<select name="province" id="province"> 
</select> 


‘<select name="city" id="city"> 
</select> 


eke name="area" id="area"> 
'select> 

(3) 创建 requestjs 文件 ， 用 于 封装 Ajax 请 求 服务 器 的 方法 。 

(4) 在 index.jsp 页 面 的 <scrip 亿 标签 中 首先 导入 requestjs 文件 ， 然 后 在 <script> 标 签 内 声明 3 个 全 局 变量 ， 
分 别 是 获取 省 份 的 XMLHttpRequest 对 象 的 全 局 变量 ,获取 地 级 市 的 XMLHttpRequest 对象 的 全 局 变量 和 获取 县 、 
区 的 XMLHttpRequest 对 象 的 全 局 变量 。 编 写实 例 化 Ajax 对 象 的 方法 getProvince0， 用 于 向 服务 器 发 送 请 求 ， 
获取 省 份 和 直辖 市 ， 关 键 代码 如 下 : 


<script language="javascript” src="js/requestJs"></script> 


“<script language="javascript”> 
var provinceRequest = false; // 声 明 获取 省 份 的 XMLHttpRequest 对 象 的 全 局 变量 
Var cityRequest = false; /声明 获取 地 级 市 的 XMLHttpRequest 对 象 的 全 局 变量 
var areaRequest = false: /声明 获取 县 、 区 的 XMLHttpRequest 对 象 的 全 局 变量 
/获取 省 份 和 直辖 市 
function getProvinceO{ 

var url="ZoneServlet"; // 服 务 器 地 址 


var param ="action=getProvince&nocache="+new Date().getTime0; // 请 求 参数 
request=httpRequest("post",url.true.callback_getProvince.param); ” // 调 用 请 求 方法 
} 
(5) 创建 用 于 处 理 请 求 的 Servlet 实现 类 ZoneServlet， 在 该 Servlet 的 doPost0 方 法 中 根据 获取 的 action 参 
数值 来 调用 不 同 的 方法 。doPost0 方 法 的 具体 代码 如 下 : 
Pprotected void doPost(HttpServletRequest request HttpServietResponse response) 
throws ServletException. IOException{ 


String action = request.getParameter("action"): /获取 请 求 中 的 action 参数 值 
if ("getProvince".equals(action)) 
getProvince(request, response): /获取 省 份 的 方法 


else if ("getCity".equals(action)) 
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getCity(request, response); 
else if ("getArea".equals(action)) 
getArea(request, response); 
} 


/获取 地 区 市 的 方法 
/获取 县 区 的 方法 


(6) 在 ZoneServlet 中 编写 用 于 获取 省 份 和 直辖 市 的 getProvince0 方 法 。 首 先 获取 保存 市 县 信息 的 XML 文 
件 的 完整 路 径 ， 然 后 判断 该 XML 文件 是 否 存在 ， 如 果 存 在 ， 则 通过 dom4j 组 件 解析 该 文件 ， 从 中 获取 出 省 份 
和 直辖 市 并 连接 为 以 逗号 分 隔 的 字符 串 ， 最 后 设置 应 答 的 类 型 为 HIML， 并 且 输 出 由 县 和 直辖 市 信息 组 成 的 字 
符 串 ， 如 果 没 有 获取 到 相关 内 容 ， 则 输出 空 的 字符 串 。getProvince0 方 法 的 具体 代码 如 下 : 


public void getProvince(HttpServletRequest requestHttpServletResponse response) 


throws ServletException, IOException { 
Tesponse.setCharacterEncoding("UTF-8"); 
String fileURL = request..getRealPath("/xml/zone.xml"); 
File file = new File(fileURL); 
Document document = null; 
Element country = null; 
String result = ""; 
if (file.exists|O) { 
SAXReader reader = new SAXReader(); 
try{ 
document = readerread(new File(fileURL)):; 
country = document.getRootElement(); 
// 获 取 表 示 省 份 和 直辖 市 的 节点 


/设置 响应 的 编码 方式 
/获取 XML 文件 的 路 径 


// 声 明 Document 对 象 
/声明 根 节点 的 Element 


// 如 果 文件 存 在 ， 则 读 取 该 文件 
/实例 化 SAXReader 对 象 


/获取 XML 文件 对 应 的 XML 文档 对 象 
/获取 根 节点 


List<Element> provinceList = country.elements("province"); 


Element provinceElement = null: 


// 将 获取 的 省 份 连接 为 一 个 以 运 号 分 隔 的 字符 串 


for (inti= 0; i< provinceList.size(); it+) { 


ProvinceElement = provinceList.get(i); 


Tesult = result + provinceElement.attributeValue("name")+ ","; 


} 


Tesult = result.substring(0, result.lengthO| - 1); 


} catch (DocumentException e) { 
e.printStack Trace(); 
| 
} 


Tesponse.setContentType("text/html"): 
PrintWriter out = response.getWriter(); 
‘out.print(result):; 
out.flushO; 
out.closeO; 

} 


/去 除 最 后 一 个 逗号 


// 输 出 获取 的 市 县 字符 串 


(7) 在 index.jsp 页 中 编写 获取 省 份 直辖 市 的 Ajax 回调 函数 。 首 先 需 要 将 获取 的 省 份 名 称 字 符 串 分 隔 为 数 
组 ， 然 后 通过 循环 将 数组 中 的 省 份 名 称 添加 到 下 拉 列 表 中 ， 并 且 当 下 拉 列 表 的 第 一 个 选项 不 为 空 时 ， 还 需要 调 


用 获取 地 级 市 的 方法 ， 获 取 默 认 的 地 级 市 信息 ， 关 键 代码 如 下 : 
function callback_getProvinceO{ 
if(request.readyState 一 4){ 
if(request.status 一 200){ 
provinceAmr=request.responseText.split("."); /将 获取 的 省 份 名 称 字符 串 分 隔 为 数组 


for(i=0:i<provinceArrlength:itH)f 


/通过 循环 将 省 份 名 称 添加 到 下 拉 列 表 中 


document.getElementById("province").options[ij=new Option(provinceArr[i].provinceArr[i]): 


} 
if(provinceAm[O]!=""){ 
getCity(provinceArr[0]): 


有 
Tequest = false: 


(8) 为 了 让 页 面 载 入 后 即 可 获取 到 省 份 和 直辖 市 信息 ， 还 需要 在 窗口 的 onload 事件 中 调用 


函数 ， 关 键 代 码 如 下 : 
window onload-function0{ 
SetProvinceO: 
} 


366 


/获取 地 级 市 


getProvince() 


/获取 省 份 和 直辖 市 
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(9) 在 index.jsp 页 的 <scripf> 中 ， 编 写实 例 化 Ajax 对 象 的 方法 getCity0， 用 于 向 服务 器 发 送 请 求 ， 获 取 地 


级 市 ， 关 键 代 码 如 下 : 
function getCity(selProvince){ 
Var url="ZoneServlet"; 


var param ="action=getCityé&:parProvince="+selProvincet"&nocache="+new Date(). 


ee ‘post",url,true.callback_getCity.param): 


Cg) 在 ZoneServlet 类 中 ， 编 写 用 于 获取 省 份 或 直辖 市 所 对 应 的 地 区 市 信息 


/服务 器 地 址 
‘getTime(); 
/调用 请 求 方法 


的 getCity0 方 法 。 在 该 方法 中 


通过 dom4j 组 件 解析 XML 文件 ， 从 中 获取 出 指定 省 份 或 直辖 市 所 对 应 的 地 级 市 信息 


符 串 ， 最 后 设置 应 答 的 类 型 为 HIML， 并 且 输 出 由 地 级 市 信息 组 成 的 字符 串 ， 如 果 没 有 获取 到 相关 内 容 ， 则 输 


出 空 的 字符 串 。getCity(0 方 法 的 具体 代码 如 下 : 
public void getCity(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
Tesponse.setCharacterEncoding("UTF-8"); 
String fileURL = request.getRealPath("/xml/zone.xml"); 
File file = new File(fileURI): 
Document document = null; 
String result = ""; 
这 (file existsO) { 
SAXReader reader = new SAXReader(); 
try{ 
document = reader.read(new File(fileURL)); 
Element country = document.getRootElementO: 
String selProvince = request.getParameter("parProvince"); 


,并 连接 为 以 逗号 分 隔 的 字 


/设置 响应 的 编码 方式 
/获取 XML 文件 的 路 径 


/声明 Document 对 象 


/如 果 文 件 存在 ， 则 读 取 该 文件 
/实例 化 SAXReader 对 象 


/获取 XML 文件 对 应 的 XML 文档 对 象 
/获取 根 节点 
/获取 的 省 份 


selProvince = java.net.URLDecoder.decode(selProvince."UTF-8"); 
Element item = (Element) country.selectSingleNode("/country/province[(@name=" 


+ selProvince + "]"); 
List<Element> cityList = item.elements("city"); 
Element cityElement = null; 
for (inti= 0;i< cityList.sizeO: i++) { 
cityElement = cityList.get(); 
Tesult = result + cityElement.attributeValue("name' 
} 
result = result.substring(0, resultlengthO - 1); 
} catch (DocumentException e) { 
e.printStackTrace():; 
和 


Tesponse.setContentType("text/html"); 
PrintWriter out = response.getWriter(); 
‘out.print(result):; 
out.flushO; 
‘out.closeO; 

} 


// 获 取 指 定 name 属性 的 省 份 节点 
// 获 取 表示 地 级 市 的 节点 集合 


二 ms 


/去 除 最 后 一 个 逗号 


/输出 获取 的 地 级 市 字符 串 


(11) 在 indexjsp 页 面 中 ， 


编写 获取 地 级 市 信息 的 Ajax 回调 函数 callback_getCity0。 在 该 函数 中 ， 首 先 将 


获取 的 市 县 名 称 字符 串 分 隔 为 数组 ， 然 后 清空 地 级 市 下 拉 列 表 (防止 下 拉 列 表 框 的 内 容重 复 添加 )， 再 通过 循环 
将 数组 中 的 市 县 名 称 添加 到 下 拉 列 表 中 ， 最 后 当下 拉 列 表 的 第 一 个 选项 不 为 空 时 ， 还 需要 调用 获取 县 /县 级 市 / 
区 的 方法 ， 获 取 默 认 的 县 、 县 级 市 和 区 信息 。callback_getCity0 函 数 的 具体 代码 如 下 : 

function callback getCityO{ 


if(request.readyState 一 4){ 
if(request.status 一 200){ 


cityArr=request.responseText.split(","); // 将 获取 的 市 县 名 称 字符 串 分 隔 为 数组 
document.getElementById("city").length=0; /清空 下 拉 列 表 
for(i=0;i<cityAm.length:it+){ /循环 将 地 级 市 名 称 添加 到 下 拉 列表 中 


document. getElementById("city").options[ij=new Option(cityArmfil.cityArmfiD): 


} 
if(cityAn{ol!—""){ 


getArea(document.getElementById("province").value.cityAm{[OD): 


} 
Tequest = false: 
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(12) 在 县 /直辖 市 下 拉 列 表 的 onChange 事件 中 ， 调 用 getCity0 方 法 ， 获 取 地 级 市 信息 ， 关 键 代码 如 下 : 


<select name="province" id="province" onChange—"getCity(this.value)"></select> 


(13) 在 index.jsp 页 面 中 ,编写 实例 化 Ajax 对 象 的 方法 getArea0， 用 于 向 服务 器 发 送 请 求 ， 获 取 县 、 县 级 


市 和 区 信息 ， 关 键 代 码 如 下 : 
function getArea(selProvince,selCity){ 
var url="ZoneServlet";/ 服 务 器 地 址 


var param ="action=getAreaé:parProvince="+selProvincet+"&parCity="+selCity+"&nocache=" 


+new DateO.getTime0: 
Tequest=httpRequest("post",url,true,callback_getArea,param); 
} 


/调用 请 求 方法 


(14) 在 ZoneServlet 类 中 ， 编 写 获取 县 、 县 级 市 或 区 的 getArea0 方 法 ， 关 键 代 码 如 下 : 


public void getArea(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 


Tesponse.setCharacterEncoding("UTF-8"); /设置 响应 的 编码 方式 
String fileURL = request.getRealPath("/xml/zone.xml"):; /获取 XML 文件 的 路 径 
File file = new File(fileURL):; 
Document document = null; /声明 Document 对 象 
String result = ""; 
这 (file.existsO) { /如 果 文 件 存在 ， 则 读 取 该 文件 
SAXReader reader = new SAXReader(); /实例 化 SAXReader 对 象 
try{ 
document = readerread(new File(fileURL)): /获取 XML 文档 对 象 
Element country = document.getRootElementO: /获取 根 节点 
String selProvince = request.getParameter("parProvince"); 。 // 获 取 选 择 的 省 份 
String selCity = request.getParameter("parCity"); /获取 选择 的 地 级 市 
selProvince = java.net.URLDecoder.decode(selProvince,"UTF-8"); 
selCity = java.net.URLDecoder.decode(selCity,"UTF-8"); 
Element item = (Element) country.selectSingleNode("/country/province[@name=" 
+ selProvince + "]"); 

List<Element> cityList = item.elements("city"); // 获 取 表示 地 级 市 的 节点 集合 
/获取 指定 的 地 级 市 节点 
Element itemArea = (Element) item_selectSingleNode("city[@name=" + selCity + "]"); 
Tesult = itemArea.attributeValue("area"); /获取 县 、 县 级 市 或 区 

} catch (DocumentException e) { 


e.printStackTrace(); 

1 
Tesponse.setContentType("text/html"); 
PrintWriter out = response.getWriter(); 
out.print(result): 
out.flushO; 
out.closeO; 


} 


(15) 在 indexjsp 页 面 中 ， 编 写 回调 函数 callback_getArea()。 在 该 函数 中 ， 首 先 将 获取 的 县 、 县 级 市 和 


// 输 出 获取 的 县 、 县 级 市 或 区 字符 串 


Xl 


名 称 字符 串 分 隔 为 数组 ， 然 后 清空 县 /县 级 市 /区 下 拉 列 表 〈 防 止 下 拉 列 表 框 的 内 容重 复 添加 )， 最 后 通过 循环 将 
数组 中 的 县 、 县 级 市 和 区 名 称 添加 到 下 拉 列 表 中 。callback_getArea0 函 数 的 具体 代码 如 下 : 


function callback_getAreaO{ 
if(request.readyState 一 4){ 
if(request.status 一 200){ 
areaArr=request.responseText.split("."); 
document.getElementById("area").length=0; 
for(i=0:i<areaArr.length:i+){ 


// 将 获取 的 市 县 名 称 字符 串 分 隔 为 数组 
/清空 下 拉 列表 
/循环 将 县 、 县 级 市 和 区 名 称 添加 到 下 拉 列 表 中 


document.getElementById("area").options[i]=new OptionareaArrfil.areaArfi)、 


Tequest =false: 


(16) 在 地 级 市 下 拉 列 表 框 的 onChange 事件 中 调用 getArea0 方 法 ， 获 取 县 、 县 级 市 和 区 信息 ， 关 键 代码 


如 下 : 
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<select name="city" id="city" 


onChange="getArea(document.getElementById('province").value,this.value)"> 
</select> 


国 秘笈 心 法 
本 实例 在 重新 为 地 级 市 下 拉 列 表 和 县 /县 级 市 /区 下 拉 列 表 添 加 选项 时 ， 首 先 需要 清空 该 下 拉 列 表 ， 否 则 下 拉 
列表 的 选项 值 会 出 现 错误 。 例 如 ， 清 空地 级 市 下 拉 列 表 可 以 使 用 下 面 的 代码 : 


document.getElementById("city").length=0; /清空 下 拉 列 表 
清空 县 /县 级 市 /区 下 拉 列 表 可 以 使 用 下 面 的 代码 : 
document.getElementById("area") length=0; /清空 下 拉 列 表 
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让 第 12 章 文件 的 批量 管理 
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文件 基本 操作 及 文件 上 传 下 载 


ml 文件 的 基本 操作 

MW 无 组 件 的 文件 上 传 

站 通过 组 件 实现 文件 上 传 
WI 文件 下 载 


第 11 章 文件 基本 操作 及 文件 上 传 下 载 


11.1 文件 的 基本 操作 


无 论 开发 Web 应 用 程序 还 是 桌面 应 用 程序 ， 在 实现 一 些 功 能 模块 时 ， 对 文件 的 操作 是 不 可 避免 的 。 所 以 ， 
在 学 习 文件 上 传 技术 之 前 ， 首 先 应 该 了 解 一 下 如 何 对 文件 进行 基本 操作 ， 如 文件 的 读 取 、 写 入 、 解 压缩 操作 、 


图 实例 说 明 

在 对 文件 进行 操作 之 前 ， 首 先 应 该 确定 文件 是 否 存在 ， 如 果 被 操作 的 文件 不 存在 ， 那 么 程序 运行 时 将 会 出 
现 异常 。 本 实例 将 介绍 如 何 判断 指定 位 置 的 文件 是 否 存 在 。 运 行 本 实例 ， 在 “输入 文件 路 径 ” 文 本 框 中 输入 
“Di:\test.txt”， 单 击 “ 查 找 ” 按 钮 ， 如 果 磁 盘 D 目录 下 不 存在 test.txt 文本 文件 ， 将 弹出 “文件 不 存在 ”的 提示 
对 话 框 ， 如 图 11.1 所 示 。 


输入 文件 路 径 : D: \test. txt 例如 : D:\test, txt 二 我 ] 
该 文 件 不 存在 ! 


图 11.1 查看 文件 是 否 存 在 


图 关键 技术 

本 实例 主要 应 用 java.io.File 类 的 exists0 方 法 ， 该 方法 用 于 测试 File 对 象 表示 的 抽象 路 径 名 表示 的 文件 或 目 
录 是 否 存在 。 在 测试 文件 是 否 存在 之 前 ， 首 先 应 该 创建 一 个 表示 文件 和 目录 路 径 名 的 File 对 象 ， 然 后 通过 File 
对 象 的 exists0 方 法 判断 该 文件 是 否 存在 ， 如 果 存 在 ，exists0 方 法 返回 tue， 和 否则 返回 false， 示 例 代码 如 下 : 


File file = new File("D:\test\test.txt"); 
boolean isHas = file.exists|: 


图 设计 过 程 
(1) 新 建 Servlet 实现 类 FileServlet， 在 该 类 的 doPost0 方 法 中 获取 表单 请 求 的 文件 路 径 信息 ， 并 判断 该 广 


件 是 否 存在 。doPost0 方 法 的 具体 代码 如 下 : 
public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


String filePath = request.getParameter("filePath"); 1/ 获取 请 求 中 的 文件 路 径 
File file = new File(filePath): /根据 文件 路 径 创建 File 对 象 
boolean bool= fleexists0: /检查 文件 是 否 存在 
String str="™". 
if(bool 一 jE 
str= 沪 六 件 存在 bs 
else 
str = "该 文件 不 存在 !"; 
Tequest.setAttribute("Msg”, str); /向 request 对 象 中 添加 信息 


Tequest.getRequestDispatcher("index.jsp").forward(request, response):// 请 求 转发 
} 
(2) 在 index.jsp 页 中 将 判断 后 的 结果 输出 ， 关 键 代 码 如 下 : 
<tr> 


<td align="center">&nbsp:</td> 
<%if(request.getAttribute("Msg") != null) {96> 

<td align="center "><%out. print(request.getAttribute("Msg")):} 96></td> 
<td align="1eft” valign="tfop ">&enbsp:</td> 
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国 秘笈 心 法 
File 对 象 既 可 以 表示 文件 ， 也 可 以 表示 目录 ， 在 程序 中 一 个 File 对 象 可 以 代表 一 个 文件 或 目录 。 它 可 用 来 
对 文件 或 目录 及 其 属性 进行 基本 操作 。 


实例 254 


图 实例 说 明 

在 应 用 程序 对 文件 进行 操作 时 ， 有 时 可 能 会 将 文件 名 称 填写 错误 ， 此 时 需要 重 命名 文件 。 本 实例 将 介绍 如 
何 实现 对 文件 的 重 命名 操作 。 运 行 本 实例 ， 如 图 11.2 所 示 ， 在 “ 源 文件 名 ”文本 框 中 输入 文件 名 称 和 文件 位 置 ， 
在 “新 文件 名 ”文本 框 中 输入 新 的 文件 名 称 〈 直 接 输 入 文件 名 即 可 ， 不 包含 路 径 )， 单 击 “ 提 交 ” 按 钮 ， 即 可 实 
现 对 指定 文件 的 重 命名 。 


命名 文件 
天 文件 用 : 。 EiVtest.tzt 
新 文件 才 : tt 


[EE 本 we 天才 功 ! 


11.2 重 命名 文件 


图 关键 技术 


本 实例 主要 应 用 File 类 的 renameTo() 方 法 实现 文件 的 重 命名 ， 该 语法 结构 如 下 : 

public boolean renameTo(File newFile) 

参数 newFile 是 一 个 File 对 象 ， 用 于 指定 文件 的 新 抽象 路 径 名 称 。 当 重 命名 成 功 时 ， 该 方法 返回 值 为 true， 
否则 返回 false。 


图 设计 过 程 
(1) 编写 名 为 RenameBean 的 JavaBean 类 ， 在 该 类 中 实现 对 文件 的 重 命 名 操作 ， 关 键 代 码 如 下 : 


public class RenameBean { 
private String fileName: // 源 文件 名 
Private String newFileName: /新 文件 名 
boolean fileInfo = false: 
public boolean renameFile() { 
File file = new File(fileName): /根据 源 文 件 名 创建 File 对 象 
证 (file.existsO) { 1/ 判 断 文 件 是 否 存 在 
/根据 源 文件 的 父 目录 和 新 文件 名 ， 组 合 创建 一 个 新 的 File 对 象 
File newFile = new File(file.getParentO+File.separator+newFileName): 


boolean res = file.renameTo(newFile); /1/ 对 源 文件 进行 重 命名 
证 (res) 
fileInfo = true: // 重 命名 成 功 ， 返 回 true 
上 
return fileInfo: 


} 
…// 省 略 了 属性 的 getXXX0 方 法 和 setXXX0 方 法 
} 
(2) 在 index.jsp 页 中 ,通过 <jsp:useBean> 动 作 导 入 RenameBean 类 ， 并 通过 <jsp:setProperty> 动 作 将 用 户 输 
入 的 源 文件 名 和 新 文件 名 赋值 给 RenameBean 对 象 中 的 属性 ， 关 键 代码 如 下 : 
jspiuseBean id="fleBean” class="bean. RenameBean”" scope="page "> 
4jsp:setProperty name="fileBean” property="fileName” value="S$ {paran fileName }"/> 
jsp:setProperty property="newFileName” name="fileBean” value="$ {param newFileName }"/> 
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ED 在 index.jsp 页 中 输出 重 命名 结果 信息 ， 关 键 代码 如 下 : 


ee 
tn ™); 
else 
out.printin(" 重 命名 失败 ! "); 
%> 


国 秘笈 心 法 

在 本 实例 中 ， 根 据 源 文件 路 径 名 来 创建 新 的 文件 对 象 时 ， 用 到 了 File 对 象 的 getParent0 方 法 和 separator 静 
态 属 性 。getParent() 方 法 用 于 返回 File 对 象 表示 的 路 径 名 中 的 父 目 录 的 路 径 字 符 串 。 例 如 ， 创 建 一 个 File 对 象 路 
径 为 E:\test\a.txt， 调 用 getParent0 方 法 则 返回 Ei\test 字符 串 。separator 表示 与 系统 有 关 的 默认 名 称 分 隔 符 。 在 
UNIX 系统 上 ， 此 字段 的 值 为 “/”， 在 Microsoft Windows 系统 上 ， 它 为 “\\”。 


x | se 
实用 指数 :良友 
图 实例 说 明 


本 实例 将 介绍 如 何 完成 对 文件 夹 的 复制 操作 , 复制 包括 文件 夹 下 的 子 文件 夹 以 及 文件 。 运行 本 实例 , 如 图 11.3 
所 示 ， 在 “ 源 文件 来” 文本 框 中 输入 要 复制 的 文件 夹 路 径 ， 在 “目标 文件 夹 ”文本 框 中 输入 目标 文件 夹 路 径 ， 


单 击 “ 复 制 ” 按 钮 ， 程 序 将 复制 整个 文件 夹 内 容 到 目标 文件 夹 中 。 i 
国 关键 技术 So 
文件 162.sql 2 
本 实例 主要 应 用 java.io.FileInputStream 类 和 java.io.FileOutputStream 人 目 
类 来 实现 文件 夹 的 复制 。 首 先 通过 File 对 象 中 的 listFiles0 方 法 获取 文件 夹 娃 ea 人 
路 径 下 的 所 有 文件 对 象 组 成 的 数组 ， 然 后 循环 文件 对 象 数组 ， 通 过 Ea 


FileInputStream 类 读 取 文 件 内 容 ， 最 后 通过 FileOutoutStream 类 将 读 出 的 
文件 内 容 写 到 目标 文件 夹 中 。 下 面 对 这 两 个 类 进行 详细 介绍 。 

1.， 创建 用 于 读 取 指 定 文件 内 容 的 数据 流 对 象 

FileInputStream 类 用 于 从 文件 系统 中 的 某 个 文件 中 获得 输入 字 节 ， 称 为 文件 输入 流 。 创 建 该 类 对 象 的 语法 
9 

参数 file 为 File 类 的 实例 对 象 ， 用 于 表示 一 个 文件 路 径 

2.， 创建 文件 输出 流 对 象 


FileOutputStream 类 用 于 向 文件 中 写 入 字 节 流 数据 ， 称 为 文件 输出 流 。 创 建 该 类 对 象 的 语法 结构 如 下 : 
FileOutputStream fos = new FileOutputStream(File file): 


参数 flle 为 File 类 的 实例 对 象 ， 用 于 表示 一 个 文件 路 径 

3. 读 取 文 件 字 节 流 

读 取 文件 字 节 流 是 通过 FileInputStream 对 象 的 read0 方 法 , 该 方法 每 次 只 从 文件 中 读 取 一 个 字 节 数据 ， 如果 
读 取 的 数据 是 文件 的 末尾 ， 那 么 read0 方 法 则 返回 -1。 

4.， 向 文件 中 写 入 字 节 流 数 据 

通过 FileOutputStream 对 象 的 write0 方 法 向 文件 中 写 入 字 节 流 数 据 。 
图 设计 过 程 

(1) 创建 index.jsp 页 ， 编 写 复制 文件 夹 的 copy0 方 法 ， 关 键 代码 如 下 : 


11.3 ”复制 文件 夹 
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< 一 961 
Pprivate void copy(File[] s File ){ /定义 复制 文件 夹 的 方法 
ildexistsO) /如 果 指 定 的 目标 目录 不 存在 
dmkdir0; /创建 目录 
for(int i=0:i<s.length:i++){ 1/ 循环 遍历 源 文件 夹 
if(s{i] isFileO){ // 如 果 为 文件 
try{ 
FileInputStream fis=new FileInputStream(s[i]): /根据 文件 路 径 名 创建 文件 输入 流 
File newFile = new File(d.getPath()+File.separator+s[i].getNameO); // 根 据 目 标 文 件 路 径 创建 文件 输出 流 
FileOutputStream out=new FileOutputStream(newFile); 
int count: 
if((count=fis.readO)>—0){ 1/ 从 源 文件 中 读 取 单个 字 节 数据 
out-write(count); // 将 字 节 数据 写 入 目标 文件 中 
} 
outclose0: /关闭 流 
fis.closeO; 
}catch(Exception e){ 
e.printStack Trace(): 
} 
} 
if(s[i] isDirectoryO){ // 如 果 为 文件 夹 
File des=new File(d.getPath()+File.separator+s[i].getName()); 
des.mkdir(); 1/ 创建 目标 文件 目录 
copy(s[i] .listFiles|,des); 1/ 继续 调用 copy0 方 法 
} 
} 
} 
%> 


(2) 从 请 求 中 获取 源 文件 夹 和 目标 文件 夹 信息 ,创建 对 应 的 File 类 对 象 ， 并且 检 测 输入 的 文件 夹 信息 是 否 
存在 ， 确 定 所 有 信息 正确 输入 后 ， 调 用 copy0 方 法 实现 文件 夹 复制 ， 关 键 代 码 如 下 : 


<% 
File sourFolder=null,targetFolder=null; 
String source=request.getParameter("sourFolder"); // 获 取 用 户 输入 的 源 文件 夹 地 址 
String target=request.getParameter("targetFolder"): /获取 用 户 输入 的 目标 文件 夹 地 址 
if(source!=nulD){ 
sourFolder=new File(source); /创建 源 文件 夹 对象 
if('sourFolderisDirectoryOl|l'sourFolderexistsO){ /如 果 该 文件 不 存在 
out.print("<script language='javascript>alert( 源 文件 夹 不 存在 ')</script>"); 
} 
} 
if(target!=nulD){ 
targetFolder=new File(target); /创建 目标 文件 夹 对 象 
if(!targetFolder.existsO){ // 如 果 目 标 文件 不 存在 
out.print("<script language='javascript>alert(' 目 标 文件 夹 不 存在 ')</script>"): 
jelsef 


copy(sourFolderlistFilesO.targetFolder): /调用 复制 文件 夹 的 方法 
} 


小 
%> 

(3) 在 “ 源 文件 夹 内 容 ” 列 表 框 中 显示 源 文件 夹 的 内 容 ， 关 键 代码 如 下 : 
<% 


if(sourFolder'=nulD{ 
File[] files=sourFolder.listFiles(); 
for(int i=0;i<files.length:it+){ 
out.printin((files[i].isDirectory0?" 文 件 夹 \t":" 文 件 \t")+ files[i].getNameO); 
} 


} 
%> 


国 秘笈 心 法 
在 本 实例 的 复制 文件 夹 的 copy0 方 法 中 ， 需 要 循环 源 文件 夹 的 目录 来 获取 源 文件 夹 目录 下 的 所 有 文件 。 这 
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些 文件 有 可 能 是 一 个 文件 夹 ， 需要 通过 File 对 象 的 isDirectpry0 方 法 来 判断 是 否 为 文件 来， 如果 是 文件 夹 则 继续 
调用 copy(0 方 法 进行 循环 ) 如 果 是 一 个 文件 ， 见 文件 内 容 ， 并 将 其 写 入 到 目标 文件 中 。 


实例 256 


图 实例 说 明 

文件 是 存储 在 磁盘 上 的 一 组 数据 的 集合 ， 它 在 磁盘 上 有 固定 的 存储 格式 和 属性 。 其 中 属性 包含 文件 名 称 、 文 
件 所 在 的 路 径 、 文 件 是 否 只 读 或 隐藏 以 及 文件 大 小 等 信息 。 本 实例 将 介绍 如 何 获取 文件 的 相关 信息 。 运 行 本 实例 ， 
如 图 11.4 所 示 ， 在 “输入 文件 位 置 ”文本 框 中 输入 完整 的 文件 路 径 ， 单 击 “ 提 交 ” 按 钮 ， 将 获取 该 文件 的 信息 。 


【获取 文件 信息 


龟 入 文件 位 寺 EF: \tt. txt [Ez3| 


文件 名 称 : tt.txt 
文件 路 径 : E:\tt. txt 
上 加 目录 
只 读 属 性 : 可 写 
隐藏: 未 隐 巷 
最 后 修改 日 期 ; 2010-7-7 10:36:13 
文件 长 度 : 0.00K 


图 11.4 获取 文件 信息 


javaio File 类 的 对 象 用 于 表示 文件 和 目录 路 径 名 的 抽象 表示 形式 , File 类 中 提供 了 一 些 用 于 获取 文件 的 相关 
属性 信息 的 方法 。 在 File 类 中 包括 的 获取 文件 信息 的 常用 方法 及 说 明 如 表 11.1 所 示 。 
表 11.1 用 于 获取 文件 属性 信息 的 常用 方法 及 说 明 
说 明 
返回 由 抽象 路 径 名 表示 的 文件 或 目录 的 名 称 。 该 名 称 是 路 径 名 名 称 序列 中 的 最 后 一 个 名 称 
返回 文件 的 全 路 径 。 如 果 发 生 IO 错误 ， 则 抛 出 IOException 异常 


_public String getName() 


public File getCanonicalFile() 


throws IOException 
_public File getparentFile0 返回 父 目录 的 抽象 路 径 名 ; 如 果 没 有 指定 父 目录 ， 则 返回 null 
ublic boolean isHiddent 判断 File 对 象 表示 的 文件 是 否 是 一 个 隐藏 文件 。 返 回 true 说 明 是 隐藏 文件 
_Public boolean canWrite() 判断 文件 是 否 可 被 写 入 。 返 回 tme 说 明文 件 可 以 进行 写 入 操作 
_Ppublic long lastModified() 返回 文件 的 最 后 修改 时 间 的 long 值 ， 返 回 值 以 修改 时 间 的 毫秒 值 表示 
ublic long len; 以 字 节 为 单位 返回 文件 的 大 小 
图 设计 过 程 


(1) 创建 用 于 获取 文件 信息 的 JavaBean 类 ShowFileInfoBean， 关 键 代码 如 下 : 
Ppublic class ShowFileInfoBean { 
Private String filePath: /文件 路 径 字符 串 
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Map<String, String> fileInfo = new HashMap<String. String>0: /定义 存储 文件 对 象 的 Map 集合 


public Map getFileInfo() { 
try{ 
File file = new File(filePath): // 创 建文 件 对 象 
让 (fileisFileO) 1/ 判断 是 否 为 文件 
return null; 


/以 下 代码 表示 将 文件 信息 添加 到 Map 集合 中 
fileInfo.put("name", file .getNameO): 
fileInfo.put("absPath", file.getCanonicalPathO): 
fileInfo put("parentDir", file.getParentFile().getParent(); 
fileInfo.put("hidden", file.isHidden0?" 隐 藏 ":" 未 隐藏 
fileInfo.put("readOnly", file.canWiite02" 可 写 ":" 只 读 "); 
fileInfo.put("lastModified", new Date(file lastModifiedO).toLocaleStringO): 
fileInfo.put("length", Stringformat("%#,.2fK",file.length|/1024.0)); 
} catch (IOException e) { 
eprintStackTrace0: 
} 


return fileInfo; 


} 
*…// 此 处 省 略 了 属性 的 getXXX0 方 法 和 setXXX0 方 法 
} 


(2) 在 index.jsp 页 中 ， 通 过 <jsp:useBean> 动 作 导 入 ShowFileInfoBean， 然 后 通过 <jsp:setProperty> 动 作 将 用 
户 输入 的 文件 路 径 字符 串 赋值 给 ShowFileInfoBean 对 象 中 的 属性 ， 关 键 代 码 如 下 : 


<jsp:useBean id="fileBean" class="bean.ShowFileInfoBean” scope="page"/> 
‘<jsp:setProperty name="fileBean" property="filePath" value="$ {param.fileStr }"/> 
(3) 在 indexjsp 页 中 ， 获 取 ShowFileInfoBean 对 象 中 的 Map 集合 属性 ， 然 后 从 Map 集合 中 获取 文件 的 信 


息 ， 关 键 代 码 如 下 : 
<table width="400" height="196" border="]" cellpadding="0" cellspacing="0" 
bordercolorlight="#444444" bordercolordark="#FFFFFF"> 

<t> 

<td width="120" align="right"> 文 件 名 称 : </td> 

<td align="left">$ {fileBean.fileInfo['name’] }&nbsp:</td> 
</t> 
<t> 

<td align="ight"> 文 件 路 径 : </td> 

<td align="1eft">$ {fileBean.fileInfo['absPath'] }&nbsp;</td> 
</tr> 
<t> 

<td align="right”> 上 级 目录 </td> 

<td align="left">$ {fileBean.fileInfo['parentDir] }énbsp;</td> 
</tr> 
<t> 

<td align="right 吃 只 读 属性 : </td> 

<td align="1eft">$ {fileBean.fileInfo['readOnly’]} &-nbsp:</td> 
</tr> 
<t> 

<td align="right 守 隐藏 ，</td> 

<td align="1eft">$ {fileBean fileInfo['hidden']} &nbsp:</td> 
</tr> 
<t> 

<td align="right 吃 最 后 修改 日 期 :</td> 

<td align="1eft">$ {fileBean .fileInfo['last Modified"] }&nbsp:</td> 
</t> 
<t> 

<td align="right 吃 文件 长 度 : </td> 

<td align="1eft">$ {fileBean.fileInfo[ length'] }&-nbsp;</td> 
<t> 

</table> 


国 秘笈 心 法 

本 实例 在 JavaBean 类 中 获取 文件 信息 时 ， 用 到 HashMap 集合 来 保存 文件 的 属性 信息 。HaspMap 类 实现 自 
Map 接口 ， 它 允许 任何 类 型 的 键 和 值 对 象 ， 并 允许 将 null 用 作 键 或 值 。HashMap 使 用 put0 方 法 存放 键 / 值 对 象 ， 
使 用 get0 方 法 获取 键 的 值 。 
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国 实例 说 明 


在 Web 应 用 程序 的 远程 管理 中 ， 有 时 需要 读 取 服 务 器 的 驱动 器 信息 。 本 
实例 将 介绍 如 何 查询 服务 器 上 驱动 器 的 分 配 情况 。 运 行 本 实例 , 如 图 11.5 所 示 ， 服务 雪村 动 器 信息 如 下 
显示 当前 服务 器 中 驱动 器 的 列表 。 


图 关键 技术 

本 实例 主要 应 用 java.io File 类 的 listRoots0 方 法 获取 磁盘 驱动 器 的 分 配 情 
况 ，listRoots() 方 法 返回 一 个 File 对 象 的 数组 ， 该 数组 中 包含 所 有 驱动 器 和 映 图 11.5 获取 驱动 器 信息 
射 的 网 络 驱动 器 。listRoots() 方 法 的 语法 结构 如 下 : 

public static File[] listRootsO 
图 设计 过 程 

创建 获取 驱动 器 信息 的 index.jsp， 在 该 页 中 获取 驱动 器 信息 并 显示 在 表格 中 ， 关 键 代 码 如 下 : 

< 


File file[] = File.listRootsO; 
for(int 二 0:i<file.length:i++){ 


An 


%> 


<td align="center"><%=file[i] %></td> 
</tr> 


国 秘笈 心 法 


通过 File 类 的 listRoots0 方 法 可 以 遍历 “我 的 电脑 ”中 的 所 有 驱动 器 ， 包 括 网 络 驱动 器 的 映射 、 移 动 硬盘 、 
光驱 和 软驱 等 。 


力 实例 说 明 


Java 提供 了 Properties 类 来 操作 存储 信息 的 属性 文件 ， 属 性 文件 以 键 / 值 对 的 方式 存储 信息 。 本 实例 将 介绍 
如 何 从 已 经 存在 的 属性 文件 中 读 取信 息 。 运 行 本 实例 ， 如 图 11.6 所 示 ， 从 属性 文件 中 读 取 连 接 数据 库 的 配置 
信息 。 


属性 文件 键 名 属性 值 属性 说 用 

DB_CLASS_NANE on. aysql. jdbe. Driver 数据 庄 3E 动 类 
BRL jdbe-nysql’//locslhost:3306/db_databasel0 连接 VRL 
DB_USER root 数据 库 用 户 名 
DB_PmD 111 教 据 库 密码 


11.6 读 取 属 性 文件 
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图 关键 技术 


本 实例 在 实现 时 主要 应 用 了 java.io FileInputStream 类 和 java.util.Properties 类 。FileInputStream 对 象 表示 文 
件 输入 流 对 象 ， 它 是 将 文件 内 容 以 流 的 形式 读 取 到 内 存 中 。Properties 类 表示 一 个 持久 的 属性 集 ， 它 可 保存 在 流 中 
或 从 流 中 加 载 。 属 性 列表 中 每 个 键 及 其 对 应 值 都 是 一 个 字符 串 ，Properties 类 的 常用 方法 及 说 明 如 表 11.2 所 示 。 


表 11.2 Properties 类 的 常用 方法 及 说 明 


方 ” 法 说 明 

用 指定 的 键 在 属性 文件 的 列表 中 搜索 属性 。 如 果 在 此 属性 列表 中 未 找 
到 该 键 , 则 接着 递归 检查 默认 属性 列表 及 其 默认 值 , 如 果 未 找到 属性 ， 
则 此 方法 返回 null 

从 InputStream 对 象 表示 的 输入 流 中 读 取 属性 列表 〈 键 和 元 素 对 ) 

从 Reader 对 象 表示 的 输入 字符 流 中 读 取 属性 列表 〈 键 和 元 素 对 ) 
设置 属性 列表 的 键 和 值 

返回 属性 列表 中 所 有 键 的 枚 举 , 如 果 在 主 属性 列表 中 未 找到 同名 的 键 ， 
则 包括 默认 属性 列表 中 不 同 的 键 

将 指定 输入 流 中 由 XML 文档 所 表示 的 所 有 属性 加 载 到 此 属性 表 中 
以 字 节 为 单位 返回 文件 的 大 小 


public String getProperty(String key) 


ublic void load(InputStream inStream) 
_public void load(Reader reader) 
Public Object setProperty(String key.String value) 


public Enumeration<?> propertyNames() 


(1) 创建 名 为 connDB.properties 的 属性 文件 ， 在 该 文件 中 定义 连接 数据 库 的 配置 参数 ， 关 键 代码 如 下 : 
DB_CLASS_NAME=com.mysqljdbc.Driver 
DB_URL=jdbc:mysql://localhost:3306/db_database10 
DB_USER=root 
DB_PWD=111 


(2) 新 建 index.jsp 页 ， 在 该 页 中 通过 FileInputStream 对 象 建立 文件 输入 流 ， 然 后 通过 Properties 对 象 的 
load() 方 法 读 取 属性 文件 ， 关 键 代码 如 下 : 
<% 


FileInputStream fis=new FileInputStream(application.getRealPath("connDB.properties")); 
Properties properties=new Properties(); 
Properties.load(fis): 


%> 
(3) 通过 Properties 对 象 的 getProperty0 方 法 获取 指定 的 属性 值 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 
<table width="500" height="214” border="0" background="bg.gif” align="center "> 
<tr> 
<td height="32" align="center> 属 性 文件 键 名 </td> 
<td align="center 必 属性 值 </td> 
<td align="center 必 属性 说 明 </td> 
</tr> 
<tr> 
<td align="center”>DB_CLASS_NAME</td> 
<td align="center "><%=properties.getProperty("DB_CLASS_NAME") %></td> 
<td align="center> 数 据 库 驱 动 类 </td> 
</tr> 
<tr> 
<td align="center">DB_URL</td> 
<td align="center "><%=properties.getProperty("DB_URL") %></td> 
<td align="center > 连接 URL</td> 
</tr> 
<tr> 
<td align="center">DB_USER</td> 
<td align="center "><%=properties.getProperty("DB_USER") %></td> 
<td align="center ~ 数据 库 用 户 名 </td> 
</tr> 
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<tr> 
<td align="center">DB_PWD</td> 
<td align="center"><%=properties.getProperty("DB_PWD") %></td> 
<td align="center"~ 数 据 库 密码 </td> 

</tr> 


</table> 
图 秘笈 心 法 
在 读 取 文 件 信息 时 ， 除 了 应 用 读 取 字 节 流 的 javaio FileInputstream 类 以 外 ， 还 可 以 应 用 读 取 字符 流 的 


java.io.BufferedReader 类 和 java.io.FileReader 类 ， 这 两 个 类 都 是 Reader 抽象 类 的 子 类 。 它 们 可 以 通过 字符 流 的 
方式 读 取 文 本 文件 ， 并 使 用 缓冲 区 ， 提 高 了 读 文本 文件 的 效率 。 


国 实例 说 明 
文件 作为 存储 数据 的 单元 ， 会 根据 数据 类 型 产生 很 多 分 类 ， - 
也 就 是 所 谓 的 文件 类 型 。 在 对 数据 文件 进行 操作 时 ， 常 常 需要 i 
根据 不 同 的 文件 类 型 来 做 不 同 的 处 理 。 本 实例 实现 的 是 读 取 文 TE (起 为 : Ddus) 
件 夹 指 定 类 型 的 文件 并 显示 到 表格 控件 中 。 这 对 项 目 开发 中 的 。 | 于 EE 
文件 分 类 起 到 了 抛砖引玉 的 作用 ， 读 者 可 以 对 该 实例 进行 相应 Ee ee 
的 扩展 ， 实 例 运行 效果 如 图 11.7 所 示 。 pache-tomcat-60 20.2p 379113 [2009-10-21 10 有 0 
图 关键 技术 本 
mysql-5.1.40-win32. 108191836 2010-1-22 13:28;48 
File 类 位 于 Javaio 类 包 中 ， 它 提供 了 多 种 对 应 文件 和 文件 。 | m2 二。 05 9 
夹 相关 的 操作 ， 而 本 实例 需要 利用 对 文件 夹 相关 的 操作 实现 读 图 11.7 显示 指定 类 型 的 文件 


取 文 件 列表 ， 并 使 用 过 滤器 进行 过 滤 。 所 以 只 能 选用 File 类 的 
listFiles(FileFilter filter) 方 法 ， 该 方法 的 语法 结构 如 下 : 
public File[] listFiles(FileFilter filter) 
功能 : 返回 抽象 路 径 名 数组 ， 这 些 路 径 名 表示 此 抽象 路 径 名 表示 的 目录 中 满足 指定 过 滤器 的 文件 和 目录 。 
参数 说 明 
filter: 实现 FileFilter 接口 的 实例 对 象 ， 该 对 象 的 accept0 方 法 用 于 实现 文件 的 过 滤 。 
图 设计 过 程 
(1) 创建 java.io.FileFilter 接口 的 实现 类 CustomFilter， 在 该 类 中 包含 一 个 重 写 FileFilter 接口 的 accept() 方 
法 。 在 accept0 方 法 中 ， 根 据 用 户 输入 的 扩展 名 来 实现 过 滤 所 有 不 符合 要 求 的 文件 。CustomFilter 类 的 具体 代码 
如 下 : 
public class CustomF ilter implements FileFilter { 
Private String extentName: /用 户 设置 的 指定 扩展 名 
@Overide 
Ppublic boolean accept(File pathname) { 
if (extentName 一 null || extentName.isEmptyO) 


return false: 
if (!extentName.startsWith(".")) 1/ 判断 扩展 名 前 级 
extentName ="." + extentName: 1/ 添加 扩展 名 前 组 


extentName = extentName.toLowerCase(); 
过 (pathname.getName().toLowerCaseO.endsWith(extentName)) /判断 扩展 名 与 过 滤 文件 名 是 否 符合 要 求 
return true: 


return false: 
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} 
Ppublic String getExtentNameO { 
Teturn extentName; 
1 void setExtentName(String extentName) { 
this.extentName = extentName: 
+ 
} 
(2) 创建 ndexjsp 页 ， 在 该 页 添加 一 个 输入 文件 夹 路 径 和 文件 扩展 名 的 表单 ， 然 后 将 表单 提交 到 本 页 。 在 
本 页 中 获取 文件 夹 路 径 字符 串 和 扩展 名 字符 串 ， 然 后 根据 文件 夹 路 径 字 符 串 创建 一 个 File 对 象 ， 调 用 该 对 象 的 


listFiles(FileFilter filter) 方 法 ， 获 取经 过 CustomFilter 对 象 过 滤 后 的 文件 对 象 数 组 ， 关 键 代码 如 下 : 
<96@ page import="com.Ih.util. CustomFilter” 96> 


BE Page import="java.io. +" %> 
String filePath = request.getParameter("fileStr"); 1/ 获取 文件 夹 路 径 字 符 串 
String extendStr = request.getParameter("extendStr"): /获取 文件 扩展 名 字符 串 
File files[J=null; /声明 File 对 象 数组 
if(filePath!=null&-&-extendStr!=null){ 
CustomFilter fileFilter = new CustomFilter(); /创建 CustomFilter 对 象 
fileFilter setExtentName(extendStr); /为 customFilter 对 象 属性 赋值 
File dir = new File(filePath): /创建 文件 路 径 的 File 对 象 
if(dirisDirectoryO){ 1/ 判断 是 否 为 文件 夹 
files = dir.listFiles(fileFilter); // 获 取经 过 过 滤 后 的 文件 


} 


%> 
(3) 在 indexjsp 页 中 ， 循 环 过 滤 后 的 File 对 象 数组 ， 在 表格 中 输出 文件 名 称 、 文 件 大 小 以 及 最 后 修改 时 
间 ， 关 键 代码 如 下 : 


<table border="1> 


<td> 文 件 名 称 </td><td> 文 件 大 小 </td><td> 修 改 日 期 <Itd> 


if(files!=nulD{ 
for(File file:files){ 


<td><9%=file.getName0 %></td> 
<td><9%=file.lengthO %></td> 
<td><%=new Date(filelastModifiedO)toLocalesting0 %></td> 
</t> 
<% } 
}%> 
</table> 


图 秘笈 心 法 

本 实例 主要 是 利用 了 java.io.FileFilter 接口 。 首 先 自 定义 一 个 类 实现 自 该 接口 ， 然 后 重 写 accept0 方 法 , 最 后 
在 调用 File 对 象 的 listFiles(Filter filter) 方 法 时 ， 会 自动 执行 实现 自 FileFilter 接口 的 accept0 方 法 ， 从 而 实现 最 终 
目的 。 


初级 


实例 260 | 
实用 指数 ， 育 育 庚 家 


图 实例 说 明 

文本 替换 几乎 是 所 有 文本 编辑 器 都 支持 的 功能 ， 但 是 要 限制 在 编辑 器 中 才 可 以 执行 该 功能 。 本 实例 实现 了 
指定 文本 文件 的 内 容 蔡 换 ， 并 且 不 需要 在 编辑 器 中 打开 文本 文件 ， 实 例 运行 效果 如 图 11.8 和 图 11.9 所 示 。 读 者 
可 以 将 这 个 实例 进行 扩展 ， 实 现 多 文件 内 容 的 替换 ， 这 样 就 更 能 体现 实用 价值 。 
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【查找 普 换 文本 文件 内 容 ] 
| 选择 文本 文件 : EMt.txt EP 
搜索 文本 : Java 
蔡 换 为 : C## 
图 11.8 实例 运行 效果 


文件 中” 纺 扣 日 可 式 (0) 查看 WW 帮助 (H 
之 长 之 c# 编 程 


ed 


多 -oo 入 


图 11.9 替换 前 文本 ( 左 ) 与 替换 后 文本 〈 右 ) 


对 文本 文件 的 内 容 进行 蔡 换 ， 离 不 开 字符 串 的 操作 ， 而 对 于 大 量 字 符 串 的 操作 ，StringBuilder 类 是 最 快 的 。 
它 可 以 动态 改变 字符 串 内 容 和 不 断 向 尾部 追加 新 字符 串 。 下 面 介绍 本 实例 用 到 的 StringBuilder 类 追加 字符 串 的 


方法 和 String 类 替换 字符 串 的 方法 。 
(1) append0 方 法 


StingBuilder 类 的 append0 方 法 可 以 向 北 类 的 对 象 尾 部 追加 字符 串 文本 ， 该 方法 的 声明 如 下 : 


public StringBuilder append(String 


该 方法 的 作用 是 在 字符 惠 构 建 器 的 尾部 追加 参数 指定 的 字符 册 。 


(2) replace0 方 法 


替换 字符 串 要 通过 String 类 的 replace0 方 法 实现 ， 该 方法 的 声明 如 下 : 
public String replace(CharSequence target, CharSequence replacement) 


参数 说 明 


@ target: 是 要 被 替换 的 char 值 序列 ， 即 字符 串 。 


@ replacement: 是 替换 的 新 字符 串 。 
图 设计 过 程 


(1) 创建 ReplaceFile 类 ， 在 该 类 中 包含 


public class ReplaceFile { 
/44 
* 普 换 指定 文件 中 的 内 容 
*+ @param filepath 文件 路 径 
* @param sourceStr 文件 中 包含 的 源 内 容 
* @param targetStr 蔡 换 后 的 内 容 
* @return ” 普 换 成 功 返 回 tue， 和 否则 返回 false 
Eh 


-个 用 于 蔡 换文 本 内 容 的 方法 ， 关 键 代 码 如 下 : 


Public static boolean replaceFileStr(String filepath.String sourceStr, String targetStr){ 
try{ 


FileReader fis = new FileReader(filepath):; 


BufferedReader br = new BufferedReader(fis): 


char[] data = new char[1024]: 

int m= 0: 

StringBuilder sb=new StringBuilderO:; 

while ((m = fis.read(data)) > 0) { 
String str=String.valueOf data.0.mm); 
sb.append(str): 

} 

fis.close|; 

/从 构建 器 中 生成 字符 串 ， 并 蔡 换 搜索 文本 


/创建 文件 输入 流 
/创建 缓冲 字符 数组 


/创建 字符 串 构建 器 
/ 读 取 文件 内 容 到 字符 串 构建 器 


/ 凑 闭 输入 流 


String str = sbtoStringO replace(sourceStr targetStr): 


FileWiiter fout = new FileWriter(filepath): 
fout.write(str. toCharArrayO): 
foutclose0: 
return true: 

} catch (FileNotFoundException e) { 
eprintstackTraceO: 
return false: 

} catch (IOException e) { 


// 创 建文 件 输出 流 
/把 普 换 完成 的 字符 串 写 入 文件 内 
/关闭 输出 流 
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(2) 创建 index.jsp 页 ， 在 该 页 中 包含 一 个 选择 文件 的 文本 框 和 两 个 输入 文本 框 的 表单 。 表 单 信息 直接 提交 
到 本 页 ， 在 本 页 中 获取 表单 元 素 的 值 ， 并 调用 ReplaceFile 类 中 实现 的 方法 替换 文本 文件 中 的 内 容 ， 关 键 代 码 


如 下 : 
<“%(@® page import="java.io. *" %> 
<“%@ page import="Java.net. *" %> 
<%@ page import="com.Ih.util.ReplaceFile” %> 
<% 
String filePath = request.getParameter("pathStr"); 1/ 获取 文件 路 径 字符 串 
String sourceStr = request.getParameter("sourceStr"); /获取 文件 扩展 名 字符 串 
String targetStr = request.getParameter("targetStr"); // 获 取 文 件 扩展 名 字符 串 
boolean res =false; 
if(filePath!=nullé-é&:sourceStr!=nullé-&targetStr!'=nulD){ 
String path = new String(filePath.getBytes("ISO-8859-1"),"UTF-8"); 
String source = new String(sourceStr.getBytes("ISO-8859-1"),"UTF-8"); 
String target = new String(targetStr.getBytes("ISO-8859-1"),"UTF-8"); 
res = ReplaceFile.replaceFileStr(path,source,target); 。 // 调 用 蔡 换 文本 的 方法 
} 
%> 
图 秘笈 心 法 


在 应 用 程序 开发 过 程 中 ， 经 常 需要 使 用 StringBuffer 来 动态 构造 字符 串 ， 其 中 append0 是 最 常用 的 方法 ， 因 
此 建议 读者 掌握 StringBuffer 的 应 用 。 
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图 实例 说 明 
在 Web 应 用 开发 过 程 中 ， 在 程序 的 后 台 有 很 多 文件 夹 需要 管理 ， 


经 常 需要 添加 新 的 文件 夹 来 归 类 档案 和 网 站 资源 ， 而 且 需 要 删除 临时 了 pr 
文件 夹 或 无 用 的 文件 夹 。 运 行 本 实例 ， 如 图 11.10 所 示 ， 输 入 文件 夹 em 
的 路 径 ， 单 击 “ 创 建文 件 夹 ” 或 “删除 文件 夹 ”按钮 ， 可 以 对 文件 夹 二 
进行 创建 和 删除 操作 。 EE 

耳 取 文件 文件 者 除 成 功 纪 。 


图 关键 技术 


本 实例 主要 应 用 java.io.File 类 的 mkdir0 方 法 和 delete0 方 法 ,它们 11.10 ”对 文件 夹 创建 、 删 除 的 操作 
都 是 非 静态 方法 ， 需 要 创建 File 类 的 实例 对 象 才能 被 调用 ， 具 体 介 绍 
如 下 。 
(1) mkdir0 方 法 
该 方法 的 语法 结构 如 下 : 
public boolean mkdir0 
功能 : 创建 File 类 表示 的 抽象 路 径 名 指定 的 目录 ， 相 当 于 创建 文件 夹 目录 。 
(2) delete0 方 法 
该 方法 的 语法 结构 如 下 : 
public boolean delete0) 
功能 : 删除 此 抽象 路 径 名 表示 的 文件 或 目录 。 如 果 此 路 径 名 表示 一 个 目录 ， 则 该 目录 必须 为 空 才能 删除 。 
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图 设计 过 程 
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(1) 创建 用 于 对 文件 夹 创建 和 删除 的 工具 类 FolderUtil， 在 该 类 中 实现 了 两 个 主要 方法 ， 分 别 是 创建 文件 
夹 的 静态 方法 createFolder0 和 删除 文件 夹 的 静态 方法 deleteFolder0。FolderUtil 类 的 关键 代码 如 下 : 


public class FolderUtil { 
4 
* 创建 文件 夹 
* @param filepath 创建 文件 夹 的 路 径 
* @return 创建 成 功 返回 trtue， 否 则 返回 false 
机 
public static boolean createFolder(String filepath){ 
boolean res =false; 
File file = new File(filepath); 
Tes = file.mkdirO); 
return res; 
} 
4 
* 删除 文件 夹 
* @param filepath 删除 文件 夹 的 路 径 
* @return 删除 成 功 返回 true， 否 则 返回 false 
2 
public static boolean deleteFolder(String filepath){ 
boolean res = false; 
File file = new File(filepath); 
if(file existsO&c&fileisDirectoryO){ 
res =file.delete(); 
; 
return res; 
} 
} 


/声明 一 个 布尔 值 变 量 ， 用 于 保存 方法 返回 值 
// 根 据 路 径 字符 串 创建 File 对 象 
1/ 创建 文件 夹 


/声明 一 个 布尔 值 变量 ， 用 于 保存 方法 返回 值 
/根据 路 径 字符 串 创建 File 对 象 

1/ 判断 是 否 存在 此 路 径 

/1/ 删 除 文件 夹 


(2) 在 index.jsp 页 中 获得 表单 的 文件 夹 路 径 ， 然 后 判断 单 击 的 按钮 是 “创建 文件 夹 ” 还 是 “删除 文件 夹 ” 
调用 FolderUtil 类 中 的 方法 执行 相应 的 操作 ， 关 键 代码 如 下 : 


<%(0 page import="com. lh.util.FolderUtil” %> 
<%(0 page import="java.io. *"%0> 
<% 
request.setCharacterEncoding("UTF-8"); 
String filepath1 = request.getParameter("createDir"); 
String filepath2 = request.getParameter("deleteDir"); 
String submit = request.getParameter("Submit"); 
boolean createRes = false: 
boolean delRes = false: 
if(filepath1!=nullé&-é-!filepath1.equals(™")){ 
if(submit!=null&-&submit.equals(" 创 建文 件 夹 ")){ 
createRes =FolderUtil.createFolder(filepath1); 
; , 
if(filepath2!=null&c&c!filepath2.equals("")){ 
f(submit!=null&&esubmit.equals(" 删 除 文 件 夹 ")){ 
delRes =FolderUtil.deleteFolder(filepath2); 
} 


} 
%> 


图 秘笈 心 法 


/设置 请 求 编码 

/获取 表单 的 创建 文件 夹 路 径 

// 获 取 表 单 的 删除 文件 夹 路 径 
/获取 提交 按钮 值 

1/ 声明 创建 文件 夹 是 否 成 功 的 变量 
/声明 删除 文件 夹 是 否 成 功 的 变量 
/1/ 判 断 是 否 为 空 

1/ 判断 是 否 为 “创建 文件 夹 ”的 按钮 
/调用 方法 创建 文件 夹 


/判断 是 否 为 空 
1/ 判断 是 否 为 “删除 文件 夹 ” 的 按钮 
/调用 方法 删除 文件 夹 


当 File 对 象 表 示 的 路 径 名 为 多 级 目录 时 , 例如 ，D:\test\testl\test2\test3， 那 么 使 用 File 对 象 的 mkdir0 方 法 则 
不 能 够 创建 这 个 多 级 目录 结构 。 可 以 使 用 File 对 象 中 的 另 一 个 方法 mkdirs0， 该 方法 表示 创建 抽象 路 径 名 指定 
的 目录 ， 包 括 所 有 必需 但 不 存在 的 父 目 录 。 当 且 仅 当 已 创建 目录 以 及 所 有 必需 的 父 目 录 时 ， 返 回 true; 否则 返 


回 false。 
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图 实例 说 明 

文件 是 系统 中 保存 数据 的 存储 单元 , 它们 可 以 设置 不 同 的 属性 以 保护 
关键 文件 ， 如 把 重要 的 配置 文件 设置 为 “只 读 ” 或 “隐藏 ” 属性、 把 系统 a 
调用 的 文件 设置 为 “系统 ”属性 ， 从 而 避免 误 操作 删除 需要 使 用 的 文件 。 
本 实例 实现 了 对 选 定 文件 的 属性 设置 ， 实 例 运行 效果 如 图 11.11 所 示 。 EN Ee 
重 关键 技术 = 

本 实例 使 用 了 Runtime 类 来 执行 系统 命令 ， 这 是 Java 提供 的 一 个 运 a 


行 环境 交互 的 类 ， 它 可 以 执行 系统 命令 。 每 个 Java 应 用 程序 都 有 一 个 ， - 
Runtime 类 的 实例 , 它 不 能 创建 ,只 能 通过 该 类 的 静态 方法 获取 实例 对 象 。 1 设置 Windows 的 文件 属性 
该 方法 的 声明 如 下 : 

public static Runtime getRuntime() 

该 方法 返回 与 当前 Java 应 用 程序 相关 的 运行 时 对 象 。Runtime 类 的 大 多 数 方法 是 实例 方法 ， 并 且 必 须根 据 
当前 的 运行 时 对 象 对 其 进行 调用 。 

该 类 的 exec0 方 法 可 以 执行 相应 的 系统 命令 ， 该 方法 的 声明 如 下 : 

public Process exec(String command) throws IOException 

该 方法 将 返回 一 个 Process 类 的 实例 对 象 ， 它 代表 本 机 进程 ， 通 过 该 实例 的 方法 可 以 获取 进程 的 输入 流 ， 从 
这 个 输入 流 中 可 以 获取 命令 的 返回 结果 。 该 方法 的 声明 如 下 : 

public abstract InputStream getInputStream() 

使 用 该 方法 返回 的 输入 流 读 取 命令 的 返回 结果 ， 然 后 对 该 结果 进行 解析 ， 从 而 获取 指定 文件 的 属性 。 


图 设计 过 程 

(1) 创建 用 于 设置 Windows 文件 属性 的 类 FileAttributeUtl， 该 类 主要 包含 两 个 方法 ， 分 别 是 读 取 文件 属 
性 的 方法 和 保存 文件 属性 的 方法 ， 读 取 文 件 的 属性 信息 主要 是 用 于 设置 网 页 中 复 选 框 的 选择 状态 。 
FileAttributeUtil 类 的 关键 代码 如 下 : 


public class FileAttributeUtil { 


Private boolean read = false: // 只 读 属 性 
Private boolean hidden = false: /隐藏 属性 
Private boolean sys = false: /系统 属性 
Private boolean doc = false: /归档 属性 
Private String fileName=""; /文件 名 
Private String filePath=""; // 文 件 路 径 
2 

* 读 取 文件 属性 


*# @param filepath 文件 路 径 
Ei 


Public void setFileAttribute(String filepath){ 
File file = new File(filepath); /获取 用 户 选 择 文件 
fileName = file.getName0: 
filePath = file.getAbsolutePathO): 
String command = "attrib " + file.getAbsolutePathO: // 创 建 命令 文本 
try{ 
Process exec = Runtime.getRuntime().exec(command): // 执 行 命令 文本 
Scanner in = new Scanner(exec.getInputStream()); /创建 命令 执行 环境 的 文本 扫描 器 
证 (in hasNextLineO) { 
String line = in.nextLine(): / 读 取 命令 执行 结果 
int of = line.indexOf(file.getPathO): 
String attribstr = line.substring(0. ob trim0: /截取 命令 结果 中 文件 的 属性 信息 
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doc = attribStr.contains("A"); // 根 据 属性 设置 各 复 选 框 选中 状态 
hidden = attribStr.contains("H"): 
read = attribStr.contains("R"): 
sys = attribStr.contains("S"); 
} 
} catch (IOException el) { 
el.printStackTrace(); 
了 
4 
4 
* 保存 文件 的 属性 设置 
* @param filepath 文件 路 径 
*+ @param str 文件 属性 的 命令 字符 串 
* @return 保存 成 功 返回 tue， 否 则 返回 false 
上 
public static boolean saveFileAttribute(String filepath.String str){ 
File file = new File(filepath):; // 根 据 文件 路 径 创建 File 对 象 
String command = "attrib "+file.getPathO+str /设置 文件 属性 的 命令 
try{ 
Runtime .getRuntimeO.exec(command); // 执 行 命令 
return true; 
} catch (IOException el) { 
el.printStackTraceO: 
return false; 


} 
} 
(2) 新 建 ndexjsp 页 ， 该 页 中 主要 包含 一 个 选择 文件 的 表单 ， 在 系统 中 选择 文件 后 ， 将 提交 表单 到 本 页 并 


调用 FileAttributeUtil 类 的 setFileAttribute0 方 法 获取 文件 的 属性 信息 ， 关 键 代码 如 下 : 
<%(0 page import="com. lh.util. FileAttributeUtil” %> 
<% 


Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 格式 

String filePath = request.getParameter("pathStr"); /获取 文件 路 径 字符 串 

FileAttributeUtil fileAttr = new FileAttributeUtilO; // 创 建 用 于 操作 文件 属性 的 类 

if(filePath!=nullé-&:!filePath.equals(™"){ /判断 字符 串 是 否 为 空 
fileAttr.setFileAttribute(filePath); 1/ 调用 方法 获取 文件 属性 


} 
%> 


(3) 在 index.jsp 页 中 ,根据 获取 的 文件 属性 设置 复 选 框 是 否 为 选中 状态 ， 关 键 代码 如 下 : 
<input type="checkbox" id="read” value="read” <%if(fileAttrisReadO){out.printin("checked='checked"):} %> /> 只 读 
<input type="checkbox” id="hidden” value="hidden” <%if(fileAttrisHiddenO) {out.printin("checked='checked");} 9%> /> 隐 蕊 
<input type="checkbox” id="doc" value="doc" <%if(fileAttrisDocO)) {out.printin("checked='checked");} %>/> 归 档 
<input type="checkbox” id="sys" value="sys” <%if(fileAttr.isSysO) {out.printin("checked='checked"):} %>/> 系 统 

(4) 应 用 JavaScript 方法 , 设置 选中 复 选 框 的 命令 参数 字符 串 , 也 就 是 设置 文件 属性 的 命令 参数 值 。 JavaScript 

方法 的 关键 代码 如 下 : 
function getCheckboxValueO{ 
var readBox = document.getElementById("read"): // 只 读 属 性 
var hiddenBox = document.getElementById("hidden"); /隐藏 属性 
Var docBox = document.getElementById("doc"): /归档 属性 
Var sysBox = document.getElementById("sys"): // 系 统 属性 
Var str=""; 
if(readBox.checked){ 
str+=" +7"; // 只 读 属 性 命令 
jelsef 
Str+=" -Ir"; 
} 
if(hiddenBox.checked){ 
str+=" +h"; /隐藏 属性 命令 
jelse{ 
str+=—" -h"; 


下 
if(docBox.checked){ 

strt—" +a"; /归档 属性 命令 
jelset 

stri=" -ar 
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/系统 属性 命令 


(5) 设置 完 文件 属性 之 后 ， 单 击 “ 提 交 ” 按 钮 将 表单 信息 提交 到 savejsp 页 中 ， 在 该 页 中 获取 文件 路 径 字 
符 串 和 复 选 框 的 值 ， 调 用 FileAttributeUtil 类 的 saveFileAttribute0 方 法 保存 文件 属性 设置 。savejsp 页 的 关键 代码 


如 下 : 
<9%6@ page import="com. Ih.util. FileAttributeUtil" %> 
<% 


Tequest.setCharacterEncoding("UTF-8"); 1/ 设置 请 求 编码 
String str = request.getParameter("checkboxStr"); /获取 复 选 框 字符 串 
String filePath = request.getParameter("pathStr"); /获取 文件 路 径 字符 串 
boolean res = false; 
if(filePath!=null&-&!filePath.equals("")){ 1/ 判断 字符 串 是 否 为 空 
res = FileAttributeUtil.saveFileAttribute(filePath,str); /调用 方法 保存 文件 属性 
} 
if(res) {9%> // 如 果 保 存 方法 返回 值 为 true 
‘<script type="text/avascript”> 
alert(" 文 件 属性 修改 成 功 !"); // 弹 出 提示 对 话 框 
window.location.href="index.jsp"; // 页 面 跳 转 到 index.jsp 
</script> 
<%} 
%> 
图 秘笈 心 法 


Runtime 类 的 exec( 方 法 执行 时 ， 相 当 于 在 系统 中 应 用 命令 行 工具 cmd.exe 来 执行 命令 。 例 如 ， 在 系统 的 D 
盘 中 有 一 个 名 为 test.txt 的 文件 ， 如 果 要 对 该 文件 加 只 读 属 性 ， 在 cmd.exe 中 的 命令 为 “attrib Di:\test.txt +r”， 在 
程序 中 ，Runtime 类 的 exec0 方 法 同样 执行 的 是 该 命令 。 


初级 
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实用 指数; 友 太 家 | 


国 实例 说 明 


在 实际 开发 中 ， 经 常 需要 访问 一 些 资源 文件 ， 这 些 资 源 一 


般 都 存储 在 Web 应 用 的 指定 类 路 径 中 。 本 实例 将 介绍 如 何 从 类 区 

人 程序 的 运行 结果 如 图 11.12 所 示 。 a ee 
本 实例 主要 应 用 了 ServletContext 接口 的 getRealPath(String 人 ee 

path) 方 法 ， 该 方法 根据 参数 path 指定 的 虚拟 路 径 ， 返 回 文件 系 ed 

统 中 的 一 个 真实 的 路 径 。 SR a 
设计 过 程 

图 设计 过 程 11.12 访问 类 路 径 上 的 资源 文件 


(1) 创建 FileUtil 类 ， 在 该 类 中 实现 了 一 个 用 于 读 取 文 件 
内 容 的 方法 ， 关 键 代码 如 下 : 


public class FileUtil { 
Ppublic static String getFileTxt(String filePath){ 
File file = new File(filePath): /| 创建 File 对象 
String fileTxt=""; // 声 明 字符 串 对 象 ， 用 于 保存 文件 内 容 
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if (file.exists() && filejisFileO) { // 判 断 是 否 为 文件 
try{ 
FileReader fr = new FileReader(file); 1/ 创建 字符 输入 流 对象 
BufferedReader br = new BufferedReader(fi):; /1/ 从 字符 输入 流 中 读 取 文 本 
String line = brreadLine0; 1/ 读 取 一 行文 本 
StringBuffer sb = new StringBuffer(™"); 
while(line!=nul) { /如 果 当 前 行 不 为 空 
sb.append(line); // 将 读 取 出 的 文本 添加 到 StringBuffer 对 象 中 
line = brreadLine0: / 读 取 下 一 行 
上 
brclose0: /关闭 文 件 流 
ti.closeO; 
fileTxt = sb.toStringO; 
} catch (Exception e) { 
e.prints ; 
jelsef 


fileTxt= "文件 "+file.getName0+" 不 存在 ! "…: 
} 
return fileTxt; 
} 
} 


(2) 新 建 ndexjsp 页 ,在 该 页 中 调用 FileUtil 类 的 getFileTxt0 方 法 , 获取 文件 的 内 容 并 赋值 给 变量 fileTxt， 


关键 代码 如 下 : 
<% 
String fileTxt ="; 
Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 编码 格式 
String filePath = request.getParameter("fileStr"); /获取 用 户 输入 的 地 址 
if (filePath != nulD { 1/ 判断 是 否 为 空 
String path = pageContext.getServletContext0.getRealPath(filePath); // 获 取 文 件 真实 路 径 
fileTxt = FileUtil.getFileTxt(path); 1/ 调用 方法 读 取 文 本 内 容 
} 
%> 
(3) 在 index.jsp 页 的 表格 中 输出 变量 fileTxt 的 值 ， 关 键 代码 如 下 : 
<td><%=fileTxt %>&nbsp:</td> 
图 秘笈 心 法 


本 实例 在 读 取 文本 中 应 用 到 了 BufferedReader 类 ， 该 类 用 于 从 字符 输入 流 中 读 取 文 本 ， 缓 冲 各 个 字符 ， 从 
而 实现 字符 、 数 组 和 行 的 高 效 读 取 。 
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实用 指数 : 走穴 让 刘 


图 实例 说 明 
网 站 的 计数 器 有 很 多 种 实现 方式 ， 如 将 计数 值 累加 到 系统 变量 、 


session、Servlet 上 下 文 以 及 数据 库 和 文件 中 。 本 实例 以 读 写 文件 的 方式 
实现 永久 性 的 计数 器 , 无 论 是 关闭 浏览 器 还 是 重启 服务 器 , 即使 关闭 数 欢迎 进入 本 网 站 元 是 本 站 第 32 位 访客 1 
据 库 都 不 会 影响 计数 器 的 计数 信息 ， 实 例 的 运行 效果 如 图 11.13 所 示 。 
图 关键 技术 图 11.13 实现 永久 计数 器 


本 实例 首先 通过 FileReader 类 的 reader0 方 法 读 取 计数 值 ， 并 将 数 
值 加 1， 再 将 计数 值 通过 FileWiriter 类 的 write0 方 法 写 入 保存 计数 值 的 文件 中 。 下 面 对 这 两 个 类 进行 具体 介绍 。 
(1) FileReader 类 
该 类 可 以 通过 字符 流 的 方式 读 取 文 本 ， 并 使 用 缓冲 区 提高 读 文本 文件 的 效率 。FileReader 类 实现 自 Reader 
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接口 ， 其 中 包含 一 个 read(char[] cbuD 实 现 方法 ， 该 方法 用 于 将 字符 读 入 数组 ， 并 返回 读 取 的 字符 数 ， 如 果 已 到 
达 流 的 末尾 ， 则 返回 -1。read0 方 法 的 语法 结构 如 下 : 

public int read(char[] cbuf) throws IOException 

参数 说 明 

cbuf: 目标 缓冲 区 。 

(2) FileWriter 类 

该 类 是 字符 输出 流 Writer 抽象 类 下 的 子 类 。 通 过 FileWiriter 可 以 以 字符 流 的 方式 并 通过 缓冲 区 把 数据 写 入 
文本 文件 ， 这 也 提高 了 写 文本 文件 的 效率 。 该 类 中 包含 一 个 实现 Writer 抽象 类 的 write0 方 法 ， 该 方法 的 语法 结 
和 void write(String str) throws IOException 

参数 说 明 

str: 要 写 入 的 字符 串 。 


图 设计 过 程 
(1) 新 建 一 个 计数 器 文件 counttxt， 为 了 方便 读 取 ， 将 该 文件 放 到 与 JSP 文件 的 同一 目录 下 。 
(2) 创建 indexjsp 页 ， 在 该 页 中 定义 一 个 long 型 全 局 变量 count 作为 计数 器 ， 关 键 代码 如 下 : 


<%!long count; %> 
(3) 在 index.jsp 页 中 ， 从 文中 读 取 上 次 访问 的 计数 值 ， 将 其 加 1 后 再 写 入 count 文件 中 ， 关 键 代码 如 下 : 

<% 
File file=new File(getServletContext|.getRealPath("count.txt")); 1/ 创建 文件 对 象 
FileReader reader=new FileReader(file); 
char[] cbuf=new char[(int)file.lengthO]; // 创 建 字符 数组 
reader.read(cbuf); // 读 取 指 定 文件 
reader.closeO:; 1/ 关闭 流 
count=Long.valueOf(new String(cbuf)).longValueO+1; // 将 文件 数据 加 1 
FileWriter write=new FileWriter(file); 
write.write(new String(count+"")); // 向 文件 中 写 数据 
write.closeO: /关闭 流 

%> 


(4) 在 index.jsp 页 中 显示 全 局 变量 count 为 当前 网 页 访问 量 ， 关 键 代码 如 下 : 
<tr> 您 是 本 站 第 <%=count %> 位 访客 </tr> 


图 秘笈 心 法 


为 了 更 好 地 让 访问 者 知道 当前 网 站 的 访问 量 ， 在 设计 网 页 时 可 以 更 明显 地 突出 网 站 的 访问 量 的 问题 ， 这 样 
可 以 更 好 地 增加 网 站 的 访问 量 。 
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图 实例 说 明 

在 网 站 中 ， 如 果 用 户 想 进 行 注册 ， 在 其 要 注册 时 ， 首 先 跳 转 的 页 面 不 会 是 直接 填写 注册 信息 的 注册 页 面 ， 
而 是 需要 先 将 拟定 好 的 “服务 条 款 ” 或 “注册 协议 ”显示 给 用 户 ， 让 用 户 了 解 应 该 遵守 的 协议 和 能 够 享受 到 的 
服务 ， 但 是 其 内 容 有 时 是 复杂 且 庞 大 的 ， 如 果 直 接 写 在 网 页 中 ， 对 网 站 的 维护 会 增加 难度 。 为 了 解决 这 一 问题 ， 
本 实例 实现 了 将 其 写 到 文件 中 ， 再 由 页 面 动态 加 载 文件 内 容 。 如 果 要 对 文本 内 容 进行 修改 ， 直 接 在 文本 文件 中 
修改 即 可 。 运 行 效果 如 图 11.14 所 示 。 
图 关键 技术 


实现 本 实例 可 以 使 用 FileReader 类 的 read0 方 法 ， 它 能 够 以 字符 流 的 方式 读 取 文件 的 文本 信息 。read0 方 法 
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的 语法 结构 在 实例 264 中 已 经 介绍 过 ， 此 处 不 再 袭 述 。 


会 员 服务 条 款 


本 
( ne 


四 
一 用 四 日 编程 
让 多 人 人 科 人 人 和 加 全 人 人 人 
对 交 此 产生 的 后 果 作 负 全 
各 作用 和 和:j 有 事后 责 。 al 
码 。 ee 9 情 只， 立即 通知 明日 坊 
有 服务 内 容 - 


和 有 | 下拉 


图 11.14 读 取 注册 服务 条 款 
图 设计 过 程 
(1) 创建 一 个 xieyitxt 文件 ， 其 内 容 就 是 “服务 条 款 ” 或 “注册 协议 ”的 内 容 。 
(2) 创建 ndexjsp 页 ， 在 该 页 面 中 定义 读 取 文本 信息 所 需 的 全 局 变量 ， 关 键 代码 如 下 : 


<%! 
File file; /定义 File 对 象 
FileReader reader: /定义 FileReader 对 象 
char[] cbuf /定义 字符 数组 变量 
%> 
(3) 实例 化 FileReader 类 ， 并 设 定数 组 的 长 度 为 文本 文档 的 大 小 ， 最 后 调用 read(0 方 法 读 取 文 本 信息 ， 关 
键 代码 如 下 : 
<% 
file=new File(getServletContextO.getRealPath("s.txt")); // 创 建文 件 对 象 
cbuf=new char[(int)file.lengthO]; /创建 字符 数组 
reader=new FileReader(file); // 创 建 FileReader 对 象 
Teader.read(cbuf); 1/ 从 文件 读 取 数 据 


%> 
(4) 将 字符 数组 生成 字符 串 显示 到 页 面 中 ， 关 键 代码 如 下 : 


<textarea cols="75" rows="14"><%=String.valueOf(cbuf)%6></textarea> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 还 可 以 实现 在 开发 在 线 论坛 中 的 用 户 注册 模块 时 ， 显 示 用 户 应 遵守 的 网 站 协议 。 
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国 实例 说 明 

在 网 站 的 应 用 中 ， 有 时 有 很 多 的 数据 要 大 量 地 进行 录入 。 例 如 ， 一 些 公 司 的 员工 信息 ， 由 于 员工 人 数 可 能 
很 多 不 方便 进行 手工 录入 ， 因 此 ， 需 要 使 用 原 有 的 一 些 存储 员工 信息 的 文件 ， 利 用 程序 将 这 些 文件 信息 导入 到 
数据 库 中 。 本 实例 将 实现 从 文件 导出 数据 到 数据 库 中 的 功能 ， 运 行 本 实例 ， 如 图 11.15 所 示 ， 单 击 “执行 ” 按 
钮 即 可 将 指定 的 文件 信息 导入 数据 库 中 。 文 本 文件 的 内 容 如 图 11.16 所 示 。 


图 关键 技术 


本 实例 在 读 取 文件 信息 时 , 应 用 到 了 javaio .FileReader 类 , 该 类 可 以 通过 字符 流 的 方式 读 取 文件 FileReader 
类 的 用 法 在 实例 264 中 已 经 介绍 过 ， 此 处 不 再 袭 述 。 


Java Web 开发 实例 大 全 (基础 卷 ) 


本 tabletd -记事 本 Ee 


文件 。 编 科 虽 
【 访 取 文本 文件 内 容 到 数据 库 】 
苞 型 
图 11.15 读 取 文件 内 容 到 数据 库 图 11.16 文 


图 设计 过 程 
(1) 本 实例 应 用 的 是 MySQL 数据 库 ， 在 数据 库 db_databasell 中 人 包 
name、sex 和 age 4 个 varchar 型 的 字段 。 


RD) 二 看 


本 文件 的 内 容 


建 数 据 表 tb_emp， 在 该 表 中 定义 id、 


(2) 创建 一 个 包含 员工 信息 的 文本 文件 table.txt， 每 一 行为 一 个 员 了 
分 隔 。 
(3) 创建 数据 库 连 接 类 DBCon， 关 键 代 码 如 下 : 


public class DBCon { 
Private static Connection conn = null; 


[信息 ， 而 每 个 员工 信息 的 字段 用 空格 


public static Connection getConn(){ 
try{ 
ClassforName("com.mysql.jdbc.Driver"); // 加 载 数据 库 连 接 驱 动 
/用 户 名 
; /密码 
String url="jdbc:mysqlWlocalhost:3306/db_databasell": /连接 URL 
conn=DriverManager.getConnection(url, user pwd); /获取 连接 
} catch (Exception e) { 
eprintStackTraceO; 
} 
return conn; 


} 
} 


(4) 创建 数据 库 操作 类 EmpDao， 在 该 类 中 主要 包含 一 个 读 取 文本 文件 内 容 保存 到 数据 库 的 方法 ， 该 方法 


包含 一 个 表示 文件 路 径 的 String 类 型 的 参数 ， 关 键 代码 如 下 : 
public boolean readDataToMySQLDB(String filePath) throws SQLException{ 
Connection conn = null: 
boolean res = false; 


try{ 
com = DBCon.getConn(); // 创 建 数据 库 连 接 
File file=new File(filePath); /创建 File 对 象 
FileReader reader=new FileReader(file); 1/ 创建 字符 流 对象 
char[] cbuf=new char[(int)filelengthO]: /根据 文件 长 度 创建 字符 数组 
Teader.read(cbuf): // 读 取 文件 信息 
Teader.close(): // 关 闭 流 
String[] table=new String(cbuf).split ("i\n"): // 分 割 文本 数据 
String[][] row=new String[table.length][]: 
int num=0; 
String sql = "insert into tb_emp values(?.7.2.2)"; /SQL 语句 
PreparedStatement stmt=conn.prepareStatement(sq]); // 创 建 预 编译 SQL 语句 对 象 
for(int i=0:i<table.length:i++){ /循环 每 一 行 
row[i]=table[i].split(™" "): // 对 每 一 行进 行 分 割 
stmit.setString(1, row[i][o]); /| 每 一 行 中 的 编号 
stmit.setString(2, row[il[1]): /每 一 行 中 的 姓名 
stmt.setString(3, row[i][3]): /每 一 行 中 的 年 龄 
stmt.setString(4, row[i][2]): /| 每 一 行 中 的 性 别 
num=numrrstmtexecuteUpdateO: // 累 加 更 新 所 影响 的 行 数 
} 
ifoum>0) 
Tes = true; 
Jeatch(Exception ex){ 
ex.printStackTraceO: 
jfinally{ 
conn close0: 
} 
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return res; 
了 
(5) 创建 index.jsp 页 ， 在 该 页 中 获取 table.txt 文件 的 路 径 ， 然 后 调用 EmpDao 类 的 方法 ， 将 文本 文件 内 容 
保存 到 数据 库 ， 关 键 代 码 如 下 : 


=% 
Tequest.setCharacterEncoding("UTF-8"); /1/ 设 置 请 求 编码 
String submit = request. getParameter("submit"); /获取 按钮 的 值 
String flePath = application.getRealPath("table.txt"); /获取 文件 路 径 
if(submit!'=nul) { 

EmpDao.getInstance() .readDataToMySQLDB(filePath); 1/ 调用 方法 保存 文件 内 容 到 数据 库 

} 

%> 

图 秘笈 心 法 


在 读 取 文 本 内 容 时 ， 也 可 以 应 用 BufferedReader 类 结合 FileReader 类 一 起 使 用 。 它 们 都 是 Reader 抽象 类 的 
子 类 ， 它 们 可 以 使 用 缓冲 区 ， 提 高 读 文本 文件 的 效率 。 
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图 实例 说 明 

在 向 数据 库 保存 数据 的 过 程 中 ， 可 能 会 遇 到 如 图 片 、 声 音 等 字 节 文件 。 通 常 将 这 类 文件 存 入 到 数据 库 中 有 
两 种 方法 ， 本 实例 演示 第 一 种 ， 即 将 图 片 转换 成 字 节 流 插 入 到 表格 对 应 的 列 中 ， 另 一 种 将 在 实例 270 中 介绍 。 
利用 这 种 方式 可 以 实现 对 图 片 安全 性 的 保护 ， 实 例 运行 效果 如 图 11.17 所 示 。 


【将 图 片 保存 到 数据 床 】 


选择 图 片 : CUsers\Public\Pictures\Sample Pictures\mx jpg EE. | 


[保存 图 片 ] 


图 11.17 将 图 片 保存 到 数据 库 


< 全 注意 : 保存 图 片 的 列 的 类 型 与 使 用 的 数据 库 有 关 ， 本 实例 使 用 的 是 MySQL 数据 库 ， 列 类 型 使 用 的 是 
LONGBLOB 类 型 ， LONGBLOB 是 一 个 二 进 制 大 对 象 ， 可 容纳 可 变数 量 的 数据 。 读 者 可 以 根据 自己 
使 用 的 数据 库 来 决定 列 的 类 型 。 


图 关键 技术 


FileInputStream 可 以 从 文件 系统 中 的 某 个 文件 中 获得 输入 字 节 流 。 它 用 于 读 入 诸如 图 像 数 据 之 类 的 原始 字 节 
流 。FileInputStream 类 常用 的 方法 如 表 11.3 所 示 。 


表 11.3 FilelnputStream 类 常用 的 方法 


方 法 名 作 用 
通过 打开 一 个 到 实际 文件 的 连接 来 创建 一 个 FileInputStream, 该 文件 通过 文件 系统 中 的 File 对 
象 file 指定 
_public intavailable0 | 返回 下 一 次 对 此 输入 流 调用 的 方法 可 以 不 受阻 塞 地 从 此 输入 流 读 取 (或 跳 过 ) 的 估计 剩余 字 节 数 
_public int read(byte[] b) | 从 此 输入 流 中 将 最 多 blength 个 字 节 的 数据 读 入 一 个 byte 数组 中 


close0) 关闭 此 文件 输入 流 并 释放 与 此 流 有 关 的 所 有 系统 资源 


FileInputStream(File file) 
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图 设计 过 程 
(1) 创建 名 为 PictureInfo 的 JavaBean 类 ， 该 类 用 于 封装 图 片 信息 ， 关 键 代码 如 下 : 
public class PictureInfo { 
Private int id; /| 编号 
Pprivate String pictureName; // 图 片 名 称 
Private String pictureType; // 图 片 类 型 
Pprivate File picturePath:; /图 片 文件 对 象 
…// 省 略 了 属性 的 getXXXO 和 setXXX0 方 法 


} 
(2) 创建 数据 库 操作 类 PictureDao， 在 该 类 中 主要 包含 一 个 保存 图 片 的 方法 saveImage0， 关 键 代码 如 下 : 
public boolean saveImage(PictureInfo picture) throws SQLException{ 

Connection conn = null 

boolean res = false; 


try{ 
File pic = picture.getPicturePath(); /获取 图 片 文件 对 象 
FileInputStream fs = new FileInputStream(pic); 1/ 创建 图 片 文件 输入 流 
byte[] b=new byte[(inpic.lengthO]: // 用 来 保存 图 片 的 字 节 数组 
fs.read(b); // 读 取 图 片 字 节 保存 到 字 节 数组 
com = DBCon.getConn(); /获取 数据 库 连接 


String sql = "insert into tb_img(name .typejimg) values(?.7.7)"; 
PreparedStatement pstmt = conn.prepareStatement(sql); // 创 建 预 编译 对 象 
pstmt.setString(1, picture.getPictureName()); /设置 图 片 名称 
pstmt.setString(2, picture.getPictureType()); /设置 图 片 类 型 
pstmt.setBinaryStream(3, fs,(int)pic.lengthO); /设置 图 片 原始 字 节 流 
inti= pstmt.executeUpdateO: /| 执行 SQL 语句 
if(i>0) 
Tes =true; 
pstmt.close(); 
fs.closeO; 
}catch(Exception ex){ 
ex.printStackTrace(); 
}finally{ 
conn.closeO; 
} 
return res: 
} 
(3) 创建 savejsp 页 ， 在 该 页 中 获取 图 片 的 路 径 信息 ， 将 图 片 信息 封装 到 PictureInfo 对 象 中 ， 然 后 调用 


PictureDao 类 的 saveImage0 方 法 ， 将 图 片 信息 保存 到 数据 库 ， 关 键 代码 如 下 : 


<% 
Tequest.setCharacterEncoding("UTF-8"); 
String filePath = request.getParameter("pathStr"): /获取 文件 路 径 字符 串 
PictureInfo picture = new PictureInfo0: // 圭 装 图 片 信息 的 JavaBean 对 象 
if(filePath!=null&-&!filePath.equals(™")){ 
File file = new File(filePath): /根据 文件 路 径 创建 File 对 象 
String type = file.getName().substring(file.getName() .lastIndexOf(".")): 
picture.setPictureName(file.getName()): // 图 片 名 称 
picture.setPictureType(type): /图 片 类 别 
Picture.setPicturePath(file): /图 片 文件 
了 PictureDao.getInstanceO.saveImage(picture): /保存 图 片 
了 
%> 
图 秘笈 心 法 


由 于 直接 将 图 片 数据 保存 到 数据 库 会 对 数据 库 以 及 应 用 程序 造成 很 大 的 负担 ， 因 此 笔者 不 建议 采用 这 种 方 
法 保存 图 片 ， 除 非 一 些 重要 机 密 的 图 片 ， 否 则 最 好 不 要 采取 这 种 方法 。 可 以 在 数据 库 中 保存 图 片 的 路 径 ， 而 图 
片 只 是 存储 在 服务 器 的 磁盘 目录 中 。 
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力 实例 说 明 
数据 的 备份 功能 是 数据 管理 系统 的 重点 ， 它 主要 涉及 两 种 
技术 : 首先 是 从 数据 库 中 读 取 需 要 备份 的 数据 ， 通 常 是 一 个 表 
格 ; 其 次 是 将 数据 写 入 到 本 地 文件 。 本 实例 通过 程序 编码 也 实 寺 笃 才 所 库 : [0_databas610 区 


现 了 该 功能 。 运 行 本 实例 ， 如 图 11.18 所 示 ， 在 下 拉 列 表 中 选 | 
择 需 要 备份 的 数据 库 ， 然 后 输入 数据 库 备 份 文件 的 路 径 ， 单 击 备份 路 径 及 名 称 : |Dtdalabasetdb10 sql 将 式 (Datatest sdl) 


“备份 ”按钮 后 将 在 指定 的 路 径 中 生成 备份 文件 。 
图 关键 技术 
实现 本 实例 主要 应 用 到 了 Java API 中 提供 的 Runtime 类 和 11.18 备份 数据 库 文件 


Process 类 ,通过 Runtime 对 象 的 exec0 方 法 执行 MySQLDUMP 
命令 , 并 返回 一 个 Process 实例 来 控制 进程 并 获得 相关 信息 , 使 用 该 实例 中 提供 的 getInputStream0 方 法 获得 执行 
命令 所 输出 的 控制 台 输 出 流 ， 然 后 将 备份 信息 写 到 文件 中 。 

在 读 取 数 据 库 备份 数据 并 写 入 文件 时 ， 主 要 应 用 到 了 java.io 包 中 的 InputStreamReader、BufferedReader、 
FileOutputStream 和 OutputStreamWriter 4 个 类 。 下 面 对 这 几 个 类 进行 简单 介绍 。 

口 InputStreamReader 类 

该 类 的 构造 方法 如 下 : 

public InputStreamReader(InputStream in,String charsetName) throws UnsupportedEncodingException 

InputStreamReader ee ea 它 使 用 的 字符 集 可 以 由 名 称 指定 或 显 
式 给 定 ， 或 者 可 以 接受 平台 默认 的 字符 集 。 在 创建 nputStreamReader 对 象 时 ， 至少 应 该 指定 一 个 InputStream 类 
型 的 参数 ， ws 

口 BufferedReader 类 

该 类 的 构造 方法 如 下 : 

public BufferedReader(Reader in) 

BufferedReader 用 于 从 字符 输入 流 中 读 取 文 本 .每 次 调用 InputStreamReader 中 的 一 个 read0 方 法 都 会 导致 从 
底层 输入 流 读 取 一 个 或 多 个 字 节 。 要 启用 从 字 节 到 字符 的 有 效 转 换 ， 可 以 提前 从 底层 流 读 取 更 多 的 字 节 ， 使 其 
超过 满足 当前 读 取 操作 所 需 的 字 节 。 为 了 达到 最 高 效率 ， 需 要 考虑 在 BufferedReader 内 包装 InputStreamReader。 

口 、FileOutputStream 类 

该 类 的 构造 方法 如 下 : 

public FileOutputStream(File file) throws FileNotFoundException 

FileOutputStream 俗称 文件 输出 流 ， 它 的 作用 是 把 内 存 中 的 数据 输出 到 文件 中 。 它 是 一 个 字 节 输出 流 
OutputStream 抽象 类 下 的 一 个 子 类 。FileOutputStream 用 于 写 入 诸如 图 像 数 据 之 类 的 原始 字 节 的 流 。 

口 OutputSteamWriter 类 

该 类 的 构造 方法 如 下 : 

public OutputStreamWriter(OutputStream out) 

OutputStreamWriter 是 字符 流通 向 字 节 流 的 桥梁 ， 可 使 用 指定 的 charset 将 要 写 入 流 中 的 字符 编码 成 字 节 。 
它 使 用 的 字符 集 可 以 由 名 称 指定 或 显 式 给 定 ， 否 则 将 接受 平台 默认 的 字符 集 。 


图 设计 过 程 
(1) 新 建 用 于 备份 数据 库 的 操作 类 BackupDao， 在 该 类 中 编写 获取 MySQL 数据 库 名 称 的 方法 ， 主 要 查询 
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MySQL 数据 库 系 统 表 schemata， 关 键 代码 如 下 : 


/时 
* 查询 schemata 系统 数据 库 表 中 的 所 有 数据 库 名 
@return 返回 包含 所 有 数据 库 名 的 集合 
public List<String> getDatabaseNameO{ 
List<String> list = new ArrayList<String>0): 
Connection conn = nall ; 


try{ 


conn =DBCon.getConn() ; /创建 数据 库 连接 
String sql = "select schema_name from schemata"; /查询 语句 
PreparedStatement stmt = conn.prepareStatement(sql):; // 创 建 预 编 译 SQL 对 象 
ResultSet rs = stmt.executeQueryO; /执行 查询 并 返回 结果 集 
while(rs.nextO){ 
list.add(rs.getString(1)); // 所 有 的 数据 库 名 添加 到 集合 中 
} 
rs.close|); 
}catch(Exception ex){ 
ex.printStackTrace(); 


conn.close():; 
}catch (SQLException e) { 

e.printStackTraceO); 
; 


} 
return list ; 
} 


(2) 创建 用 于 备份 数据 库 backup.jsp 页 ， 在 该 页 中 读 取 所 有 数据 库 名 ， 并 添加 到 下 拉 列 表 中 ， 关 键 代 码 
如 下 : 


‘<select name="dbName" id="dataBaseName" class="fontStyle2"> 
<% 
List<String> list = BackupDao.getInstance().getDatabaseName(); 
if(list!=null&-&list.size()>0){ 
for(String databaseName:list){ 


<option value="<%=databaseName %>"><%=databaseName %></option> 
<%} 
} 
%> 
‘</select> 
(3) 在 BackupDao 类 中 编写 数据 库 备 份 的 方法 ， 将 数据 库 信息 导出 到 .sql 文件 中 ， 关 键 代码 如 下 : 
4 
* 执行 备份 的 方法 
+ @param database 将 备份 的 数据 库 
* @param path 备份 文件 的 完整 路 径 名 
* @return 备份 成 功 返回 tme， 否 则 返回 false 
*/ 
Ppublic boolean backupDB(String database ,String path){ 


try{ 
String command = "cmd.exe /c mysqldump -uroot -p111 "+database+" "; /备份 命令 
Process p =Runtime.getRuntime().exec(command): /执行 备份 命令 
InputStreamReader isr =new InputStreamReader(p.getInputStream()."utf8"); 
BufferedReader br = new BufferedReader(isr); // 创 建 BufferedReader 对 象 读 取 控制 台 备份 信息 
StringBuffer sb = new StringBuffer(™"); /创建 StringBuffer 对 象 ， 用 于 动态 添加 每 行 信息 
String line: 
while((line=br.readLineO)!=nul) { 
sb.append(linet "i\n"); 
} 
FileOutputStream fs = new FileOutputStream(path); /1/ 创 建文 件 输出 流 ， 用 于 保存 备份 信息 
OutputStreamWriter writer = new OutputStreamWriter(fs,"utf8"): 
writer write(sb .toStringO): /将 备份 数据 写 入 .sql 文件 
writerflushO; 
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isrcloseO: 1/ 关闭 相关 的 文件 流 


(4) 创建 dobackup.jsp 页 ， 在 该 页 中 获取 表单 请 求 信息 ， 并 调用 BackupDao 类 的 backupDBO 方 法 执行 数 
据 库 备份 ， 关 键 代 码 如 下 : 


< 


String databaseName = request.getParameter("dbName”): /数据库 名 
String path = request. getParameter("path"); /备份 路 径 
BackupDao.getInstance().backupDB(databaseName.path); /调用 备份 方法 执行 备份 
%> 
国 秘笈 心 法 


本 实例 中 使 用 的 MYSQLDUMP 命令 实现 备份 的 是 数据 库 中 所 有 数据 ， 该 命令 的 语法 结构 如 下 : 


mysqldump —uUser -pPassword DataBase 
MYSQLDUMP 命令 的 常用 参数 及 说 明 如 表 11.4 所 示 。 


表 11.4 MYSQLDUMP 命令 的 常用 参数 及 说 明 


参数 说 明 
-UUser 用 户 名 
-pPassword 密码 
-hHost 备份 数据 库 的 IP 地 址 
-d 只 备份 表 结构 而 不 备份 表 的 数据 
- 只 备份 表 的 数据 
-F 执行 备份 命令 之 前 ， 使 用 它 刷新 MySQL 服务 器 的 lo 

在 备份 文件 Insert 语句 中 加 上 Lock Table 和 UnLock Table 语句 ，Lock Table 锁定 用 于 当前 线程 的 表 ， 

los UnLock Table 释放 表 的 锁定 
--add-drop-table | 在 备份 文件 的 Create 语句 之 前 包含 Drop Table IF EXISTS 语句 ， 和 避免 在 导入 时 出 错 


实例 269 


图 实例 说 明 
在 使 用 流 的 方式 将 图 片 存 入 到 数据 库 中 之 后 ， 该 怎样 利用 存储 的 数据 来 还 原 成 原来 的 图 片 呢 ? 本 实例 将 展 
示 这 个 过 程 ， 实 例 运行 效果 如 图 11.19 所 示 。 


【显示 数据 库 中 的 图 片 信息 


11.19 ”显示 数据 库 中 的 图 片 信息 
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图 关键 技术 


在 JSP 页 面 中 将 字 节 信息 还 原 为 图 片 时 ， 需 要 应 用 ServletOutputStream 类 的 write(0 方 法， 该 方法 允许 将 数 
据 以 字 节 的 形式 输出 ，ServletOutputStream 对 象 是 通过 response 对 象 获取 的 , 通过 ServletOutputStream 对 象 可 以 


响应 生成 二 进 制 的 正文 数据 。 
图 设计 过 程 


(1) 创建 封装 图 片 信息 的 JavaBean 类 PictureInfo， 关 键 代码 如 下 : 


public class PictureInfo { 
private int id: 
private String pictureName; 
Private String pictureType; 
Private byte[] picByte:; 

} 


/编号 
/图 片 名 称 
/图 片 类 型 
/图 片 的 字 节 


(2) 创建 PictureDao 类 ， 在 该 类 中 编写 读 取 图 片 信息 的 方法 ， 该 方法 返回 PictureInfo 类 型 的 对 象 ， 关 键 代 


码 如 下 : 
public PictureInfo getImage() throws SQLException{ 

Connection conn = null; 

PictureInfo pic = new PictureInfo(); 

try{ 
conn = DBCon.getConn(); 
String sql = "select * from tb_img where id=2"; 
Statement stmt = conn.createStatement(); 
ResultSet rs = stmt.executeQuery(sql); 
if(rs.nextO){ 


pic.setPictureName(rs.getString("name")); 


Pic.setPictureType(rs.getString("type")); 
pic.setPicByte(rs.getBytes("img")); 
本 放生 汪汪 ex){ 
ex.printStackTraceO); 
Yinally{ 
conn.closeO; 
} 


return pic; 


} 


1/ 创建 用 于 封装 图 片 信息 的 对 象 


// 创 建 数据 库 连 接 

/查询 SQL 

/创建 Statement 对 象 
/执行 SQL 并 返回 结果 集 


/图 片 名 称 


/图 片 类 型 
/图 片 原始 字 节 


(3) 创建 imgjsp 页 ， 该 页 面 用 于 生成 图 片 。 首 先 设置 响应 正文 类 型 为 image/jpeg， 表 示 生 成 一 个 图 片 ， 然 
后 调用 PictureDao 类 的 方法 获取 图 片 的 字 节 数 据 , 最 后 通过 ServletOutputStream 的 write0 方 法 将 字 节 数据 输出 ， 


关键 代码 如 下 : 


<%@ page contentType—"image/jpeg" pageEncoding—"utf-8"96> 


<%@0 page import = ava.io.*" %> 

<%(0 page import="com. Ih.dao.PictureDao”" %> 

<%(0 page import="com. Ih.model. PictureInfo” %> 

<% 
/设置 页 面 不 缓存 
response.setHeader("Pragma"."No-cache"); 
Tesponse.setHeader("Cache-Control"."no-cache”); 
response.setDateHeader("Expires", 0); 
PictureInfo pic = PictureDao.getInstance().getImage( : 
OutputStream output=response.getOutputStream(); 
output.write(pic.getPicByteO); 
‘output.flushO: 
output.closeO: 

%> 


/调用 方法 获取 图 片 信息 
/获取 输出 二 进 制 数据 的 对 象 
// 输 出 图 片 字 节 数据 


(4) 创建 index.jsp 页 ， 在 该 页 中 添加 <img> 标 签 ， 设 置 该 标签 的 sre 属性 值 为 img.jsp， 在 该 页 执行 时 会 调 


用 imgjsp 页 生成 图 片 ， 关 键 代码 如 下 : 


<img alt="" sre="imgjsp ”> 
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国 秘笈 心 法 
显示 数据 库 中 图 片 的 过 程 就 是 将 字 节 流 还 原 成 图 片 的 过 程 ， 这 个 过 程 涉及 很 多 转换 ， 读 者 可 以 将 其 单独 提 
取出 来 并 制作 成 一 个 方法 ， 方 便 以 后 使 用 。 


初级 
实用 指数 : 让 三 宙 


实例 270 


图 实例 说 明 

在 实例 267 中 ， 实 现 了 将 图 片 存 入 到 数据 库 的 第 一 种 方法 ， 即 利用 流 将 文件 写 入 到 数据 库 中 。 本 实例 将 展 
示 另 一 种 方法 ， 即 将 图 片 的 路 径 保存 到 数据 库 中 ， 当 需要 使 用 图 片 时 ， 利 用 路 径 进行 查询 。 在 不 必 考 虑 安全 性 
等 问题 时 ， 使 用 这 种 方式 更 加 合理 ， 可 以 节约 大 量 的 磁盘 空间 ， 实 例 运 行 效果 如 图 11.20 所 示 。 


【该 取 文 件 路 径 到 数据 库 】 ] 


随 择 图 片 : C:\Users\Public\Pictures\Sample PicturesWoalajpg | 


人 保存 图 片 ] | 


图 11.20 读 取 文 件 路 径 到 数据 库 
图 关键 技术 
本 实例 主要 根据 获取 的 文件 路 径 来 创建 File 对 象 , 然后 通过 File 对 象 的 getAbsolutePath0 方 法 获得 文件 的 绝 
对 路 径 ， 最 后 将 文件 的 路 径 信息 存 入 到 数据 库 中 即 可 。 
图 设计 过 程 


(1) 创建 封装 图 片 信息 的 JavaBean 类 PictureInfo， 关 键 代码 如 下 : 


public class PictureInfo { 


private int id; // 编 号 

private String pictureName; /图 片 名称 
Private String pictureType; /图 片 类 型 
Private String picturePath: /图 片 路 径 


…/ 此 处 省 略 了 属性 的 eeccx0 方 法 和 setXXX0 方 法 
} 
(2) 创建 PictureDao 类 ， 该 类 主要 包含 一 个 将 图 片 信息 保存 到 数据 库 的 方法 saveImage0， 关 键 代 码 如 下 : 
public boolean saveImage(PictureInfo picture) throws SQLException{ 
Connection conn = null: 
boolean res = false; 


try{ 
conn = DBCon.getConn(); // 获 取 数据 库 连接 
String sql = "insert into tb_picture(name.type.path) values(2.?.2)": 
PreparedStatement pstmt = conn.prepareStatement(sql); // 创 建 预 编译 对 象 
pstmt.setString(1, picture.getPictureName()); // 设 置 图 片 名 称 
pstmit.setString(2. picture.getPictureTypeO): // 设 置 图 片 类 型 
pstmt.setString(3, picture.getPicturePathO): /1/ 设 置 图 片 路 径 
inti = pstmt.executeUpdate():; /执行 SQL 语句 
ii>0) 

Tes =true: 

pstmtcloseO: 

jcatch(Exception ex){ 

{ 

conn.closeO: 
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} 
return res; 
} 


(3) 创建 savejsp 页 ， 该 页 用 于 获取 请 求 ， 然 后 调用 PictureDao 类 的 saveImage0 方 法 保存 图 片 信 息 ， 关 键 


代码 如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"): 
String filePath = request.getParameter("pathStr"); /获取 文件 路 径 字 符 串 
PictureInfo picture = new PictureInfo0: /封装 图 片 信息 的 JavaBean 对 象 
if(filePath!=null&é&!filePath.equals("™"){ 
File file = new File(filePath); // 根 据 文件 路 径 创建 File 对 象 
String type = file.getName().substring(file.getName() lastIndexOf(".")): 
picture.setPictureName(file.getName()); /设置 图 片 名 称 
picture.setPictureType(type); /设置 图 片 类 别 
picture.setPicturePath(file.getAbsolutePath()): 1/ 设置 图 片 路 径 
PictureDao.getInstance().saveImage(picture): /调用 保存 图 片 的 方法 
} 
%> 
秘笈 心 法 


将 图 片 保存 到 数据 库 中 有 两 种 方法 : 第 一 种 是 将 图 片 转 换 成 字 节 流 写 入 到 数据 库 中 ; 第 二 种 是 将 图 片 所 在 
的 路 径 写 入 到 数据 库 ， 当 需要 显示 图 片 时 ， 可 以 利用 这 个 路 径 来 读 取 。 在 实际 应 用 中 ， 第 二 种 比较 常见 ， 因 为 
可 以 提高 数据 库 的 利用 率 ， 也 方便 读 取 。 


实例 
实效 实用 指数 : 让 让 让 让 
国 实例 说 明 
用 户 在 使 用 电脑 的 过 程 中 ， 一 定 使 用 过 查找 功能 ， 根 据 输 
入 的 关键 字 不 同 ， 操 作 系统 会 在 指定 的 文件 夹 下 进行 查找 ， 并 ei 
返回 查找 的 结果 。 本 实例 利用 了 File 类 将 指定 的 文件 夹 下 ( 包 文人 Evest 
括 子 文件 夹 》 所 有 文件 的 绝对 路 径 存储 到 数据 库 中 ， 再 利用 es 自 
MySQL 的 索引 功能 ， 方 便 用 户 对 指定 文件 进行 查询 ， 实 例 运行 Borat/ cont/estne ce | 
效果 如 图 11.21 所 示 。 E:/test/test2/indexPath. txt 
输入 关键 他: test2 
图 关键 技术 LR] 


File 类 包括 了 与 文件 管理 系统 相关 的 大 量 方法 , 本 实例 用 到 图 11.21 在 数据 库 中 建立 磁盘 文件 索引 
的 方法 如 表 11.5 所 示 。 


表 11.5 File 类 的 常用 方法 


方 法 名 作 用 
File(String pathname) 通过 将 给 定 路 径 名 字符 串 转换 为 抽象 路 径 名 来 创建 一 个 新 File 实例 


_getAbsoluteFileO | 返回 此 抽象 路 径 名 的 绝对 路 径 名 形式 
_getAbsolutePath() | 以 字符 串 的 形式 返回 该 File 对 象 的 绝对 路 径 
isDirectol 测试 该 File 对 象 是 不 是 一 个 文件 夹 ， 是 则 返回 true 


如 果 给 定 的 File 对 象 是 一 个 文件 夹 ， 则 将 其 转换 成 File 数组 ， 数 组 中 包括 该 文件 夹 中 的 


listFiles() 文件 和 子 文件 夹 ， 否 则 抛 出 NullPointerException 
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图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 编 写 获取 文件 夹 中 所 有 文件 路 径 的 方法 getFilePathO， 参 数 list 用 于 保存 迭代 出 
的 文件 路 径 ，rootFile 用 来 指明 迭代 开始 的 文件 夹 ， 关 键 代 码 如 下 : 


Private static List<String> getFilePath(List<String> list File rootFile) { 


File[] files = rootFile.listFiles|; /W/ 列 出 用 户 选择 的 文件 夹 下 的 所 有 文件 ( 夹 ) 
if (files — null) // 如 果 是 空 文件 夹 直接 返回 

return list 
for (File file : files) { /遍历 用 户 选 择 的 文件 夹 下 所 有 的 文件 夹 ) 

if (file.isDirectoryO0) { /如 果 是 一 个 文件 夹 则 进行 迭代 

ist file); 
jelsef 
listadd(file getAbsolutePathO .replace(™\", "/")); /否则 保存 路 径 

} 
} 
return list; 


} 


89 技巧 : 在 获取 文件 的 路 径 过程 中 ， 会 遇 到 文件 夹 中 还 有 文件 夹 的 情况 ， 如 果 使 用 和 迭代 就 能 够 简化 编码 ， 只 
需要 考虑 文件 夹 和 文件 两 种 情况 即 可 。 

(2) 编写 创建 磁盘 文件 索引 的 方法 createFileIndex0， 参 数 folderPath 表示 要 创建 索引 的 磁盘 文件 夹 路 径 。 
在 该 方法 中 ， 调 用 步骤 (1) 中 编写 的 获取 文件 夹 中 所 有 文件 路 径 的 方法 getFilePathO0， 然 后 循环 该 方法 返回 的 
路 径 集 合 ， 在 循环 中 定义 查询 SQL 语句 ， 调 用 自 定义 的 查询 方法 ， 查 询 数据 库 判 断 是 否 存 在 这 些 文件 路 径 的 信 
息 ， 如 果 不 存在 则 调用 保存 信息 的 方法 将 这 些 文件 路 径 保存 到 数据 库 ， 关 键 代 码 如 下 : 


public static void createFileIndex(File folderPath) throws Exception { 


List<String> list = new ArrayList<String>():; /创建 List 集合 
getFilePath(list, folderPath): // 调 用 查询 所 有 文件 路 径 的 方法 ， 将 文件 路 径 保 存 到 List 集合 中 
for (inti= 0; i< listsizeO: i++) { /循环 List 集合 
String sql = "select id from tb_directories where path =" + list.get(i) + ™;"; /根据 文件 路 径 字符 串 ， 定 义 查询 SQL 语句 
int maxId= DBHelper.getMaxID("tb_directories"); 
List<Object[]> results = DBHelper.query(sql); /调用 自 定义 的 查询 方法 
if (results.size|) — 0) { // 如 果 没 有 返回 查询 结果 
sql = "insert into tb_directories (path) values (" + list.get(i) + "):"; /定义 执行 添加 信息 的 SQL 语句 
DBHelper.update(sql); 1/ 调 用 自 定义 的 方法 ， 将 文件 路 径 保存 到 数据 库 


} 
。 } 
(3) 编写 根据 关键 字 搜 索 文件 的 方法 searchFilePathByKey()， 参 数 key 为 用 户 输 入 的 搜索 关键 字 。 在 该 方 
法 中 定义 模糊 查询 的 SQL 语句 ， 调 用 自 定义 的 数据 库 查询 方法 ， 查 询 数据 库 文件 索引 信息 并 返回 List 集合, 关 


键 代码 如 下 : 
public static List<Object[]> searchFilePathByKey(String key) { 
String sql = "select * from tb_directories where path like '96" + key + "96":"; /1/ 模 糊 查询 的 SQL 语句 
List<Object[]> results = DBHelper.query(sqD): // 调 用 自 定义 的 查询 方法 ， 返 回 List 集合 
return results: 


} 
[加 说 明 : 数据 库 操作 的 相关 方法 是 在 DBHelper 类 中 定义 的 ， 由 于 这 部 分 内 容 比较 简单 ， 所 以 这 里 不 进行 具体 
介绍 ， 详 细 代 码 请 参见 本 书 附带 的 光盘 。 
(4) 创建 indexjsp 页 ,在 该 页 中 获取 用 户 输入 的 文件 夹 路 径 以 及 搜索 关键 字 , 然后 调用 FileUtil 类 的 方法 ， 
在 数据 库 中 建立 磁盘 文件 索引 ， 关 键 代码 如 下 : 
<% 


List<Object []> filePaths = null: 


Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 

String filePath = request.getParameter("filepath"); 1/ 获取 文件 夹 路 径 

String key = request.getParameter("key"): /获取 关键 字 

if(filePath'=null&&!filePath.equals("))f 1/ 判断 是 否 为 空 
FileUtil.createFileIndex(new File(filePath)): // 调 用 创建 文件 索引 的 方法 
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filePaths = FileUtil.searchFilePathByKey(key): /调用 文件 查询 的 方法 ， 返 回 List 集合 


} 
%> 


(5) 在 页 面 的 文本 域 <textarea> 中 ， 循 环 遍历 返回 查询 结果 的 List 集合 ， 输 出 与 搜索 关键 字 匹 配 的 文件 路 
径 信 息 ， 关 键 代码 如 下 : 


<textarea rows="5" cols="30" id="/fileIndex"><% 
if(filePaths!=nulD){ 
for(Object[] row:filePaths){ // 人 遍历 查询 结果 的 List 集合 
out.printin(row{1]); /输出 文件 路 径 
中 
} 
%></textarea> 


图 秘笈 心 法 

迭代 是 编程 中 一 种 常用 的 技巧 ， 正 确 使 用 友 代 能 大 幅度 简化 编程 。 本 实例 就 是 使 用 欠 代 来 获得 一 个 给 定 文 
件 夹 下 所 有 文件 〈 包 括 子 文件 夹 中 的 文件 ) 的 路 径 。 进 代 编 程 一 定 要 注意 退出 迭代 的 条 件 ， 否 则 很 可 能 出 现 死 
循环 。 
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图 实例 说 明 

对 磁盘 文件 进行 加 密 与 解密 是 一 项 很 常见 的 技术 。 这 样 可 以 保护 文件 的 安全 性 。 通 过 使 用 Java 中 的 流 技术 
可 以 很 轻松 地 实现 文件 的 加 密 与 解密 。 但 需要 注意 的 是 ， 对 文件 实现 加 密 后 ， 必 须 通 过 相应 的 方法 才能 正确 地 
解密 。 本 实例 的 运行 结果 如 图 11.22 所 示 。 加 密 后 的 文件 如 图 11.23 所 示 。 


【文件 简单 加 密 解 密 ] 


选择 文件 : EAIbd 


保存 地 址 : EN2,txt 
[ 芝 F  [ 文 全 弟 志 


图 11.22 ”实例 的 运行 结果 图 11.23 ”加密 后 的 文件 


国 关键 技术 


本 实例 实现 的 文件 加 密 与 解密 很 简单 ， 就 是 将 通过 流 从 文件 中 读 取 的 数据 进行 处 理 ， 然 后 写 入 到 新 的 文件 
中 ， 当 解密 时 通过 对 应 的 方式 对 加 密 的 文件 进行 处 理 即 可 。 

本 实例 中 对 从 文件 中 读 取 的 字 节 进行 处 理 ， 从 而 实现 文件 加 密 ， 关 键 代码 如 下 : 

int ibt = bufferfi]; 

ibt += 100; 

ibt %= 256; 

在 对 文件 实现 解密 时 ， 再 从 读 取 的 字 节 中 进行 对 应 的 运行 ， 关 键 代 码 如 下 : 

int ibt = bufferfi]; 

ibt -= 100; 

ibt += 256; 

ibt %= 256: 


力 设计 过 程 
(1) 创建 类 EncryptFile， 在 该 类 中 用 于 定义 文件 加 密 、 解 密 的 方法 。 其 中 encry0 方 法 为 加 密 方 法 ， 该 方法 
有 两 个 String 类 型 的 参数 ， 分 别 用 于 指定 要 进行 加 密 的 文件 路 径 与 加 密 后 文件 的 保存 地 址 ， 代 码 如 下 : 
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public static boolean encry(String frontFile. String backFile) { 


try{ 

File f= new File(frontFile): /根据 加 密 文 件 地 址 创建 文件 对 象 
FileInputStream fileInputStream = new FileInputStream(f): /创建 FileInputStream 对 象 
byte[] buffer = new byte[fileInputstream available0]:; /从 流 中 获取 可 读 的 字 节 数 
fileInputStream read(buffer); // 从 流 中 读 取 字 节 
fileInputStream.closeO:; /关闭 流 
for (inti=0:i<bufferlength: i++) { /循环 遍历 从 流 中 读 取 的 数组 

int ibt = buffer[i]:; 

ibt += 100; // 将 数组 中 的 数据 做 相 加 运算 

ibt %= 256; 


buffer[i] = (byte) ibt; 


FileOutputStream fileOutputStream = new FileOutputStream(new File( 

backFile)); /根据 加 密 后 文件 的 保存 地 址 创建 输出 流 对 象 
fileOutputStream write(buffer 0, bufferlength): /向 输出 流 中 写 数据 
fileOutputStream.close(); // 将 流 关闭 
return true; 


} catch (Exception e) { 
e.printStackTrace(); 
return false; 
} 
} 


(2) 创建 unEncry0 方 法 ， 该 方法 用 于 实现 文件 解密 。 该 方法 有 两 个 String 类 型 的 参数 ， 分 别 用 于 指定 要 
进行 解密 的 文件 与 加 密 后 文件 的 保存 地 址 ， 具 体 代 码 如 下 : 


public static boolean UnEncry(String frontFile, String backFile) { 


try{ 
File f= new File(frontFile); /创建 要 解压 的 文件 对 象 
FileInputStream fileInputStream = new FileInputStream(f); // 创 建文 件 输入 流 对 象 
byte[] buffer = new byte[fileInputStream.availableO)]; /从 流 中 获取 可 读 的 字 节 数 
fileInputStream.read(buffer); /从 流 中 读 取 字 节 
fileInputStream closeO: /关闭 流 
for (inti= 0; i< buffer.length; i++) { 
int ibt = buffer[i]:; 
ibt -= 100; /对 从 流 中 读 取 的 数据 进行 运算 处 理 
ibt 1= 256; 
ibt %= 256; 
buffer[ = (byte) ibt 
FileOutputStream fileOutputStream = new FileOutputStream(new File(backFile)); 。 “”// 根 据 要 写 入 的 文件 地 址 创建 输出 流 
fileOutputStream. write(buffer, 0, buffer.length): // 向 输出 流 中 写 数 据 
fileOutputStream.closeO: // 将 流 关闭 
return true; 
} catch (Exception e) { 
eprintStackTraceO: 
return false: 


} 
} 
(3) 创建 savejsp 页 ， 该 页 用 于 处 理 请 求 ， 根 据 请 求 参 数 的 不 同 来 调用 EncryptFile 类 的 方法 ， 实 现 文件 的 
加 密 和 解密 ， 关 键 代 码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"); 
String sourcePath = request.getParameter("sourcePath"): /获取 文件 路 径 字符 串 
String targetPath = request.getParameter("targetPath"): /获取 文件 路 径 字 符 串 
String flag = request.getParameter("flag"”): 
if(sourcePath!=nullé&targetPath!=nul) { 
if(flag!=nullSéflag.equals("1") { 
boolean res = false: 


Tes = EncryptFile.encry(sourcePath.targetPath):; 1/ 文件 加 密 
} 
if(flag!=null&-&-flag.equals("2"){ 

boolean res = false: 

Tes = EncryptFile.unEncry(sourcePath.targetPath); /文件 解密 
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国 秘笈 心 法 
本 实例 实现 文件 加 密 时 ， 主 要 是 对 从 文件 中 检索 出 来 的 字 节 进行 处 理 ， 解 密 时 再 通过 相应 的 算法 来 获取 文 
件 的 初始 字 节 数据 。 加 密 算法 是 将 字 节 进行 加 100 后 ， 对 256 取 余 。 当 然 ， 读 者 也 可 以 根据 其 他 运算 实现 加 密 。 
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图 实例 说 明 


XML 文件 是 以 节点 的 形式 保存 信息 ， 以 树 形 分 层 结构 排列 。 元 


素 可 以 嵌 套 在 其 他 元 素 中 。 在 XML 文件 中 可 以 保存 各 种 信息 ， 也 a 
可 以 当 作 数据 库 来 使 用 。 本 实例 使 用 XML 文件 保存 连接 数据 库 的 
相关 信息 ， 并 实现 读 取 XML 文件 中 的 内 容 ， 将 其 显示 在 网 页 中 ， i leo msnl be Drier 
实例 的 运行 结果 如 图 11.24 所 示 。 URL: jdbcmysqiWlocalhost3306/db_database11 
关键 技术 Pe 
使 用 开源 的 DOM 和 SAX 组 件 都 可 以 操作 XML 文件 。 但 是 都 = 


需要 下 载 相关 的 文件 ， 并 将 其 添加 到 项 目 中 。 为 了 简便 操作 ， 本 实 11.24 从 XML 文件 中 读 取 数据 
例 使 用 JDK 内 置 类 来 实现 从 XML 文件 中 读 取 数 据 。 实 现 本 实例 的 
功能 主要 涉及 以 下 几 个 重要 的 类 与 方法 。 

口 DocumentBuilderFactory 类 

该 类 表示 工厂 API， 可 以 使 应 用 程序 能 够 从 XML 文档 获取 生成 DOM 对 象 树 的 解析 器 。 

口 DocumentBuilder 类 

使 用 此 类 可 以 从 XML 文件 读 取 一 个 Document 对 象 。 

口 Document 接口 

该 接口 表示 整个 HTML 或 XML 文档 。 从 概念 上 讲 ， 该 接口 表示 文档 树 的 根 。 

通过 Document 接口 的 getElementsByTagName0 方 法 ， 从 XML 文档 中 读 取 具 有 指定 标记 名 称 的 所 有 程序 元 
素 的 有 序 集合 NodeList 对 象 ， 具 体 语法 如 下 : 

getElementsByTagName(String tagname) 

参数 说 明 

tagname: 要 匹配 的 标记 名 称 。 对 于 XML 文件 ， 该 参数 值 是 区 分 大 小 写 的 。 


图 设计 过 程 
(1) 本 实例 实现 的 是 显示 连接 数据 库 的 相关 信息 ， 这 些 信息 都 是 从 XML 文件 中 读 取 出 来 的 。 创 建 工 具 类 
ReadXMLData， 在 该 类 中 定义 读 取 XML 文件 的 方法 ， 具 体 代码 如 下 : 


public class ReadXMLData { 


Private Document document: // 定 义 Document 对 象 

private File xmlFile; // 定 义 File 对 象 

public ReadXMLData(File xmlFile){ // 带 参数 的 构造 方法 
this.xmlFile=xmlFile; 


} 
public String readXml(String str) { 
DocumentBuilderFactory factory = DocumentBuilderFactory.newlnstance0:// 定 义 从 XML 文档 获取 生成 DOM 对 象 的 解析 器 
try{ 
DocumentBuilder builder = factorynewDocumentBuilder0: 
document = builderparse(xmlFile): /根据 XML 获取 DOM 文档 实例 
} cateh (Exception e) { 
e.printStackTrace():; 
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} 
String subNodeTag = document .getElementsByTagName(str) item(0).getFirstChild|.getNodeValueO: /获取 指定 节点 保存 的 值 
return subNodeTag; /1/ 返 回 读 取 的 信息 
» 
} 


(2) 新 建 index.jsp 页 ， 在 该 页 中 获取 XML 文件 的 路 径 ， 创 建 ReadXMLData 类 ， 关 键 代码 如 下 : 
<“%@ page import="java.io.*" %> 
<%@® page import="com.Ih.util. ReadXML.Data” %> 
<% 


String path = application.getRealPath("conn.xml"); 
File file = new File(path); 
ReadXMLData readData = new ReadXMLData(file); 
(3) 在 indexjsp 页 中 调用 ReadXMLData 对 象 的 readXml0 方 法 , 读 取 XML 文档 数据 并 赋值 给 文本 框 ， 关 
键 代码 如 下 : 
<input id="databaseClass" type="text" value="<%=readData.readXml("driverClassName")%>" /> 
<input id="ur1" type="tfext” value="<9%=readData.readXml("connection_url")9%>" /> 
<input id="hserName" type="text” value="<%=readData .readXml("user")%>" /> 
<input id="pwd" type="text” value="<%=readData.readXml("password")9%>" /> 
图 秘笈 心 法 
对 于 数据 库 连 接 的 相关 信息 ， 将 其 写 在 XML 或 其 他 格式 的 文件 中 ， 这 样 如 果 项 目 连接 的 数据 库 需要 修改 ， 
直接 修改 相应 的 XML 文件 即 可 ， 不 用 对 项 目 进行 修改 。 因 此 掌握 本 实例 中 介绍 的 读 取 XML 文件 的 方法 是 非常 
有 用 的 。 
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图 实例 说 明 

大 的 文件 在 传输 时 不 太 方便 ， 为 了 便于 携带 ， 很 多 软件 都 提供 了 将 大 的 文件 进行 分 割 的 功能 。 这 样 就 可 以 
实现 将 一 个 较 大 的 文件 分 割 成 若干 个 小 的 文件 ， 方 便携 带 。 运 行 本 实例 ， 如 图 11.25 所 示 ， 选 择 一 个 较 大 的 zip 
文件 ， 并 指定 分 割 大 小 ， 单 击 “ 分 割 ” 按 钮 即 可 实现 文件 的 分 割 。 


【文件 分 割 ] 
源 文件 : Ei\hibemate-3.2.0.ga.zip Em 
分 天 大 小 : 1 MB 
存 路 径 : EYest 格式 为 : Dtest 
区 到 区 到 


图 11.25 文件 分 割 
[由 说明 本 实例 就 是 将 较 大 的 文件 分 割 成 若干 个 小 的 文件 ， 但 是 分 割 后 的 文件 不 能 作为 单独 的 文件 运行 。 
力 关键 技术 
实现 本 实例 的 关键 是 通过 输入 流 读 取 要 分 割 的 文件 ， 再 分 别 从 流 中 读 取 相 应 的 字 节 数 ， 将 其 写 入 到 以 tem 
为 后 级 的 文件 中 。 通 过 FileInputStream 类 的 read0 方 法 可 以 实现 读 取 文件 ， 该 方法 的 语法 格式 如 下 。 


(1) 语法 一 : 以 byte 数组 为 参数 。 表 示 从 输入 流 中 将 数组 长 度 或 字 节 读 取 到 byte 数组 中 。 
int read(byte[] b) 
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(2) 语法 二 : 从 输入 流 中 读 取 指 定 的 字 节 到 数组 中 。 
int read(byte[] bint off int len) 
参数 说 明 


@ b: 存储 读 取 数据 的 字 节 数组 。 
@ off: 目标 数组 b 中 的 开始 偏 移 量 。 
昌 len: 读 取 的 最 大 字 节 数 。 


< 全 注意 : 在 使 用 read0 方 法 读 取 字 节 时 ， 都 会 抛 出 IJOException 异常 ， 因 此 在 使 用 该 方法 读 取 字 节 时 要 处 理 该 
异常 。 


图 设计 过 程 
(1) 创建 工具 类 ComminuteUtil， 在 该 类 中 编写 实现 文件 分 割 的 方法 ， 关 键 代码 如 下 : 


4 
* 将 大 文件 进行 分 割 
*+ @param commFile 分 割 文 件 的 地 址 
* @param untieFile 分 割 后 文件 的 保存 地 址 
* @param filesize 分 割 文 件 的 大 小 
3 


public void splitFile(File commFile, File untieFile, int filesize) { 
FileInputStream fis = null; 


int size = 1024 * 1024; // 用 来 指定 分 割 文件 要 以 MB 为 单位 
try{ 

if (!untieFile.isDirectory0) { /如 果 要 保存 的 分 割 文件 地 址 不 是 路 径 

untieFile mkdirs0): // 创 建 该 路 径 

} 

size = size * filesize; 

int length = (int) commFile.length(); /获取 文件 大 小 

int num = length / size; /获取 文件 大 小 除 以 MB 的 得 数 

int yu = length % size; /获取 文件 大 小 与 MB 相 除 的 余数 


String newfengeFile = commFile.getAbsolutePath0; // 获 取保 存 文件 的 完整 路 径 信息 
int fileNew = newfengeFile.lastIndexOf("."); 
String strNew = newfengeFile.substring(fileNew, newfengeFile 


‘lengthO); /截取 字符 串 
fis = new FileInputStream(commFile): // 创 建 FileInputStream 类 对 象 
File[] fl = new File[num + 1]; // 创 建文 件数 组 
int begin = 0; 


for (inti=0;i<num; itt) { /循环 遍历 数组 
fl[i] = new File(untieFile.getAbsolutePathO + "\" +(i+1) 
+ strNew + ".tem"); // 指 定 分 割 后 小 文件 的 文件 名 
if (!fI[i] isFile0) { 
了 li].createNewFileO: /创建 该 文件 


} 
FileOutputStream fos = new FileOutputStream(fI[i]); 
byte[] bl = new byte[size]: 


fis.read(b)): // 读 取 分 割 后 的 小 文件 
fos .write(bD; // 写 文件 
begin = begin + size * 1024 * 1024: 
fos.closeO: /1/ 关 闭 流 
} 
i (yu!=0){ /文件 大 小 与 指定 文件 分 割 大 小 相 除 的 余数 不 为 0 


了 [num] = new File(untieFile.getAbsolutePathO + "\" 
+Cum+1)+staNew+"tem"): /指定 文件 分 割 后 数组 中 的 最 后 一 个 文件 名 
证 (HI[num]isFileO) { 
了 [num].createNewFileO: /新 建文 件 


} 

FileOutputStream fyu = new FileOutputStream(fl[num]); 
byte[] byt = new byte[yu]: 

fis.read(byt): 

fyu-write(byt); 

fyu.closeO0; 


1 
} catch (Exception e) { 
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eprintstackTrace0: 
} 


(2) 创建 savejsp 页 ， 用 于 获取 表单 请 求 信息 ， 并 调用 ComminuteUtil 类 的 文件 分 割 的 方法 ， 实 现 文件 分 
割 ， 关 键 代码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 

String sourcePath = request.getParameter("sourcePath"):; /获取 文件 路 径 字符 串 

String savePath = request.getParameter("savePath"); /获取 文件 的 保存 路 径 

String fileSize = request.getParameter("fileSize”): /分 割 文件 的 大 小 

if(sourcePath'-null&c&csavePath'-null&c&fileSizet-nulD{ 
File sourceFile = new File(sourcePath); // 根 据 源 文件 路 径 创建 File 对 象 
File saveFile = new File(savePath); /根据 保存 后 的 路 径 创 建 File 对 象 
int size = IntegerparseInt(fileSize): /分 割 文件 的 大 小 
ComminuteUtil.splitFile(sourceFile,saveFile,size); // 调 用 方法 实现 文件 分 割 

} 

%> 
国 秘笈 心 法 


在 程序 中 获取 到 的 文本 框 的 值 都 是 String 类 型 。 本 实例 中 splitFile0 方 法 指定 分 割 文件 的 大 小 是 int 类 型 , 可 
以 通过 Integer 对 象 的 parseInt0 方 法 将 字符 串 类 型 转换 为 mt 类 型 。 


实用 指数 : 丰 廊 让 全 
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图 实例 说 明 
在 实例 274 中 为 大 家 介绍 了 如 何 实现 将 较 大 的 文件 进行 分 割 ,分 
割 后 的 文件 是 不 能 运行 的 , 此 时 需要 通过 程序 对 相应 的 文件 进行 重新 tx 
合并 。 本 实例 将 介绍 如 何 将 分 割 后 的 文件 进行 合并 , 运行 结果 如 图 11.26 NN Er 
所 示 。 要 进行 合 并 的 文件 列表 ; 1 zip.ten 到 
图 关键 技术 3 
本 实例 在 实现 文件 合并 时 ， 仍 然 是 通过 文件 字 节 输入 /输出 流 。 MANE, EM 
在 进行 文件 合并 时 , 需要 将 要 进行 合并 的 所 有 文件 全 部 读 取 之 后 , 写 
入 到 新 文件 中 。 图 11.26 将 分 割 后 的 文件 进行 合并 
图 设计 过 程 
(1) 创建 写 工具 类 UniteUtil， 在 该 类 中 定义 文件 合并 的 方法 heBing0， 具 体 代码 如 下 : 
A 
* 文件 合并 


*@param file ”要 合并 的 文件 数组 

* @param cunDir 文件 保存 路 径 

* @param hz 合并 后 文件 的 格式 

*@return 合并 成 功 返回 tme， 否 则 返回 false 
| 


public static boolean heBing(File[] file. File cunDir, String hz { 
try{ 


File heBingFile = new File(cunDirgetAbsoluteFile0 + "NUNTIE" + hz); /指定 分 割 后 文件 的 文件 名 
这 (heBingFileisFileO) { 


heBingFile.createNewFileO: 
} 
FileOutputStream fos = new FileOutputStream(heBingFile); /创建 FileOutputStream 对 象 
for (inti=0:i< filelength: i++) { /循环 遍历 要 进行 合并 的 文件 数组 对 象 


Java Web 开发 实例 大 全 (基础 卷 ) 
Filemnputstream fis — new FileInputStream(file[i]): 


int len = (int) filefi].lengthO: /获取 文件 长 度 
byte[] bRead = new byte[len]: 
fis.read(bRead): // 读 取 文 件 
fos.write(bRead); /1/ 写 入 文件 
fis.close0: /将 流 关闭 
人 
return true; 
} catch (Exception e) { 
eprintStackTraceO: 
return false; 
} 
(2) 新 建 savejsp 页 ， 在 该 页 中 处 理 表单 请 求 信息 ， 然 后 调用 UniteUtil 类 的 heBing0 方 法 ,实现 文件 合并 ， 
关键 代码 如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 
String sourcePath = request.getParameter("filePath"); /获取 文件 路 径 字 符 串 
String savePath = request.getParameter("savePath"); /获取 文件 的 保存 路 径 
if(sourcePath!=null&-&:savePath!=null){ 
File sourceFile = new File(sourcePath); 1/ 根据 源 文件 路 径 创建 File 对 象 
File saveFile = new File(savePath); 1/ 根据 保存 后 的 路 径 创建 File 对 象 
if(!saveFile.exists()) 
saveFile.mkdir(); 
boolean res = false: 
res = UniteUtil.heBing(sourceFile .listFiles().saveFile.".zip"): 
f(res) {%> 
‘<script type="text/javascript”> 
alert(" 文 件 合并 成 功 ! "); 
window.location.href="index.jsp"; 
</script> 
<%} 
} 
%> 
国 秘笈 心 法 


细心 的 读者 可 以 发 现 , 本 实例 在 for 循环 语句 中 创建 了 FileInputStream 对 象 , 并 在 for 循环 中 将 输入 流 关闭 。 
而 FileOutputStream 对 象 只 创建 了 一 个 ， 是 因为 要 合并 成 一 个 文件 的 小 文件 有 很 多 个 ， 需 要 读 取 每 个 小 文件 ， 就 
要 分 别 创建 FileInputStream 对 象 。 而 合并 的 文件 只 有 一 个 ， 因 此 只 需 创建 一 个 FileOutputStream 对 象 。 


niz 六 让 字 高 级 : 
实例 276 izer 统计 文件 的 字符 数 高 | 
实用 指数 ， 良 雪 去 家 ， 
力 实例 说 明 
在 常见 的 文本 编辑 器 中 ， 有 一 些 提供 了 对 字数 的 统计 ， 如 Word。 
但 有 些 文本 编辑 器 是 没有 提供 字数 统计 的 ， 如 记事 本 工具 。 为 了 方便 【统计 td 文件 字符 数 ] 
使 用 记事 本 的 用 户 可 以 快速 地 统计 记事 本 文件 中 的 字符 数 , 可 以 开发 | 
专门 的 小 工具 ，Java 中 的 StreamTokenizer 类 可 以 实现 该 功能 。 本 实 。 【ena 
例 实现 的 是 统计 记事 本 文件 的 字符 数 ， 运 行 结果 如 图 11.27 所 示 。 为 
四 他 标记 为 : 7 
图 关键 技术 有 和 六 :3 
javaio 包 中 的 StreamTokenizer 类 可 以 获取 输入 流 并 将 其 解析 为 11.27 统计 文件 的 字符 数 


标记 ,可 以 通过 该 类 的 nextToken0 方 法 读 取 下 一 个 标记 。 该 类 的 构造 
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方法 如 下 : 
StreamTokenizer(Reader 1) 
参数 说 明 


IT: 提供 输入 流 的 Reader 对 象 。 


文件 基本 操作 及 文件 上 传 下 载 


该 类 有 几 个 非常 重要 的 常量 来 标记 读 取 文 件 的 内 容 ， 这 些 常量 及 说 明 如 表 11.6 所 示 。 
表 11.6 StreamTokenizer 类 中 的 常量 及 说 明 


常 量 名 常量 说 明 

TT EOF 表示 读 取 到 文件 末尾 

TT WORD 指示 读 到 一 个 文字 标记 的 常量 
TT NUMBER 表示 已 读 到 一 个 数字 标记 的 常量 


图 设计 过 程 


(1) 创建 工具 类 StatUtil， 在 该 类 中 定义 statis0 方 法 ， 获 取 读 取 文件 的 字符 数组 ， 该 类 有 一 个 String 类 型 


的 参数 ， 用 于 指定 文件 地 址 ， 返 回 值 为 保存 读 取 结果 的 int 数组 ， 关 键 代码 如 下 : 


public static int[] statis(String fileName) { 
FileReader fileReader = null; 
try{ 
fileReader = new FileReader(fileName); 


// 创 建 FileReader 对 象 


StreamTokenizer stokenizer = new StreamTokenizer(new BufferedReader( 


fileReader)); 
stokenizer.ordinaryChar(\"): 
stokenizer.ordinaryChar(\"): 
stokenizer.ordinaryChar('/"); 
int[] length = new int[4]: 
String str; 
int numberSum = 0; 
int symbolSum = 
int wordSum = 0; 
int sum = 0; 
While (stokenizer.nextToken() != StreamTokenizer.TT EOF) { 
switch (stokenizer.ttype) { 
case StreamTokenizer.TT_NUMBER: 
DumberSum + 一 1; 
length[0] = numberSum:; 
break: 
case StreamTokenizer.TT_WORD: 
str = stokenizer.sval: 
wordSum += strlengthO: 
length[1] = wordSun 
break: 
default: 
str = String.valueOf(char) stokenizer.ttype): 
symbolSum += str.length(): 
length[2] = symbolSum: 


} 
} 
sum = symbolSum + numberSum + wordSum:; 
length[3] = sum 
Teturn length: 
} cateh (Exception e) { 
e.printStackTraceO: 
return null: 
} 
} 


(2) 创建 index.jsp 页 ， 在 该 页 中 获取 表单 请 求 信息 中 的 文件 路 径 ， 然 后 调用 StatUtil 类 的 statis0 方 法 获取 


文件 的 字符 数 ， 关 键 代码 如 下 : 


// 创 建 StreamTokenizer 对 象 

// 将 单 引号 当 作 是 普通 字符 

// 将 双 引 号 当 作 是 普通 字符 

// 将 “/” 当 作 是 普通 字符 

// 定 义 保存 计算 结果 的 int 型 数组 


// 定 义 保存 数字 的 变量 
/定义 保存 英文 标点 数 的 变量 


/定义 保存 总 字符 数 的 变量 

// 如 果 没 有 读 到 文件 的 末尾 

1/ 判断 读 取 标记 的 类 型 

// 如 果 用 户 读 取 的 是 一 个 数字 标记 
1/ 计算 读 取 的 数字 长 度 

// 设 置 数组 中 的 元 素 

// 退 出 语句 

// 如 果 读 取 的 是 文字 标记 
/获取 该 标记 

1/ 计算 该 文字 的 长 度 


// 如 果 读 取 的 是 其 他 标记 
// 读 取 该 标记 

1/ 计算 该 标记 的 长 度 
/设置 mt 数组 中 的 元 素 


/获取 总 字符 数 


Java Web 开发 实例 大 全 (基础 卷 ) 


Tequest.setCharacterEncoding("UTF-8"): // 设 置 请 求 编码 
String filePath = request.getParameter("sourcePath”): /获取 文件 路 径 
int count[]=new int[4]: /创建 nt 数组 
if(filePath!=null&&!filePath.equals(""){ /判断 字符 串 是 否 为 空 
count = StatUtil.statis(filePath); // 调 用 方法 获取 文件 的 字符 数 
} 
%> 


(3) 在 index.jsp 页 的 表格 中 输出 数组 变量 count 中 的 元 素 值 ， 关 键 代码 如 下 : 
<td align="Ieft" colspan="2"> 
统计 结果 如 下 : <br/> 
数字 总 数 为 ，<%%= count[0]%><br/> 
文字 总 数 为 ，<%=count[1] %><br/> 
其 他 字符 为 ，<%%=count[2] %><br/> 
总 字符 数 为 ，<%=count[3] 9%e><br> 
<td> 


图 秘笈 心 法 
在 统计 文件 的 字符 数 时 ， 不 能 简单 地 统计 标记 数 ， 因 为 字符 数 不 等 于 标记 ， 按 照 标记 的 规定 ， 引 号 中 的 内 


容 10 页 算是 一 个 标记 。 所 以 要 使 引号 的 内 容 都 算 作 一 个 标记 ， 就 要 使 用 StreamTokenizer 类 的 ordinaryChar() 方 
法 将 单 引号 和 双 引 号 当 作 普通 字符 处 理 。 


实用 指数 : 廊 女 女 从 ， 


图 实例 说 明 
对 于 一 个 大 的 应 用 程序 需要 使 用 很 多 的 对 象 ， 由 于 虚拟 机 内 存 有 
限 ， 有 时 不 可 能 将 所 有 有 用 的 对 象 都 放 在 内 存 中 ， 因 此 ， 需 要 将 不 党 sis 


用 的 对 象 暂时 持久 化 到 文件 中 ， 这 一 过 程 就 称 为 对 象 的 序列 化 ; 当 需 。 xt: Ei GD 
要 使 用 对 象 时 ， 再 从 文件 中 把 对 象 恢复 到 内 存 ， 这 个 过 程 被 称 为 对 象 实现 对象 到 原 列 化 ， 广 取 榴 肉 容 为: < 
的 反 序 列 化 。 本 实例 实现 的 是 将 对 象 序列 化 到 文件 ， 然 后 再 从 文件 反 nn 

序列 化 到 对 象 ， 实 例 运行 结果 如 图 11.28 所 示 。 


图 关键 技术 Ei 
需要 被 序列 化 的 对 象 必须 实现 java.io.Serializable 接口 , 需要 注意 图 11.28 ”实例 运行 结果 


的 是 该 接口 中 没有 定义 任何 的 方法 。 对 象 输出 流 ObjectOutputStream 
可 以 将 对 象 写 入 到 流 中 ， 该 类 的 构造 方法 如 下 。 
口 语法 一 : 创建 写 入 指定 OutputStream 的 ObjectOutputStream。 
Object Outputstream(Outputstream out) 
参数 说 明 
out: 要 写 入 数据 的 输出 流 。 
口 语法 二 : 完全 实现 ObjectOutputStream 的 子 类 提供 的 方法 。 
Object Outputstream0) 
对 象 输入 流 ObjectInputStream 类 可 以 从 流 中 读 取 对 象 到 内 存 ， 该 类 的 构造 方法 如 下 。 
口 语法 一 : 创建 从 指定 InputStream 读 取 的 ObjectInputStream。 
Object InputStream(InputStream in) 
参数 说 明 
h: 要 从 中 读 取 的 输入 流 。 
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Objectimputstream0 


图 设计 过 程 


文件 基本 操作 及 文件 上 传 下 载 


口 语法 二 : 完全 实现 ObjectInputStream 的 子 类 。 


(1) 创建 工具 类 SerializeObject, 在 该 类 中 定义 内 部 类 Bowel, 表示 被 序列 化 的 对 象 , 该 类 实现 了 Serializable 


接口 ， 具 体 代 码 如 下 : 
static class Bowel implements Serializable{ 
Private int numberl.number2: 
Private transient int number3; 
Pprivate static int number4; 


public Bowel(int numberl ,int number2.int c,int number3){ 


this.numberl = numberl: 
this.number2 = number2; 
this.number3 = number3; 
this.number4 = number4:; 
} 
} 


/定义 普通 的 实例 变量 
/定义 不 会 被 序列 化 和 反 序列 化 的 对 象 


/构造 方法 


(2) 在 该 类 中 定义 serialize0 方 法 ， 该 方法 用 于 实现 对 象 的 序列 化 ,在 该 方法 中 通过 ObjectOutputStream 类 


的 writeObjectO 方 法 将 对 象 写 入 到 文件 中 ， 有 具体 代码 如 下 : 


public static void serialize(String fileName){ 


try{ 
File file = new File(fileName); /根据 文件 地 址 创建 文件 对 象 
if(!file.existsO){ /如 果 该 对 象 不 存在 
file.createNewFileO: // 创 建 该 文件 对 象 
} 
‘ObjectOutputStream out = new ObjectOutputStream(new FileOutputStream(fileName)); 1/ 创建 对 象 输出 流 对 象 
out.writeObject(" 今 天 是 :"); // 向 文件 中 写 入 对 象 数 据 
out.writeObject(new DateO): 
Bowel my1 = new Bowel(5.6.7.3); /定义 内 部 类 对 象 
out.writeObject(my1); // 将 对 象 写 入 到 文件 中 
out.close(); // 将 流 关闭 
} catch (Exception e) { 
e.printStackTraceO; 
1 
} 
(3) 创建 deserialize0 方 法 用 于 实现 对 象 的 反 序列 化 ， 具 体 代码 如 下 : 
public static Object[] deserialize(String fileName){ 
try{ 
File file = new File(fileName); /根据 文件 地 址 创建 文件 对 象 
if(!file.existsO){ /如 果 该 文件 不 存在 
file.createNewFileO: /新 建文 件 
} 
ObjectInputStream in = new ObjectInputStream(new FileInputStream(fileName)); // 创 建 对 象 输入 流 
String today = (String)(in readObjectO): // 从 流 中 读 取 对 象 信息 
Date date = (Date)(in readObjectO): // 从 流 中 读 取 对 象 信息 
Object[] object = {today.date}: // 将 读 取出 的 对 象 添 加 到 对 象 数组 中 
Bowel myl = (Bowel)(in.readObjectO):; 
in.close(): /关闭 流 
return object:; 
} catch (Exception e) { 
eprintStackTraceO: 
return null; 
} 
} 
秘笈 心 法 


在 对 象 序列 化 时 , 对 象 是 按照 writeObject0 方 法 的 调用 顺序 存储 在 文件 中 的 , 先 被 序列 化 的 对 象 在 文件 的 前 
面 ， 后 被 序列 化 的 对 象 在 文件 的 后 面 。 因 此 ， 在 反 序列 时 ， 先 读 到 的 对 象 就 是 先 被 序列 化 的 对 象 。 
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11.2 无 组 件 的 文件 上 传 


文件 上 传 几乎 是 所 有 网 站 都 具有 的 功能 ， 用 户 可 以 将 文件 上 传 到 服务 器 的 指定 文件 夹 中 ， 也 可 以 保存 在 数 
据 库 中 。 下 面 将 介绍 几 个 无 组 件 的 文件 上 传 的 实例 。 


实 高 级 
实例 278 ey 
实用 指数 : 食 食 食 

图 实例 说 明 

在 Web 应 用 中 ， 用 户 经 常 需要 上 传 个 人 资料 文件 或 图 片 。 本 实 
例 将 介绍 如 何 将 指定 文件 上 传 到 服务 器 的 数据 库 中 。 运 行 本 实例 ， tn 
如 图 11.29 所 示 ， 单 击 “ 浏 览 ” 按钮 选择 要 上 传 的 文件 ， 单 击 “ 提 交 ” 请 的 w 作 
按钮 ， 文 件 将 被 保存 到 数据 库 中 。 Re 

E53 

图 关键 技术 一 一 一 一 -一 


上 11.29 ” 单 表单 元 素 上 传 文件 到 数据 库 
本 实例 使 用 自 定义 的 UploadBean 类 来 解析 Form 表单 的 Input 


Stream 输入 流 , 并 从 中 获取 文件 信息 。 在 UploadBean 类 中 使 用 类 输入 流 对 象 的 read0 方 法 来 读 取 文件 的 字 节 数据 。 
图 设计 过 程 

(1) 创建 工具 类 UploadBean， 在 该 类 中 主要 包含 一 个 用 于 解析 Form 表单 的 方法 ， 表 单 类 型 为 multipart/ 
form-data， 并 且 将 数据 存放 在 Map 集合 类 的 实例 对 象 中 ， 关 键 代 码 如 下 : 


Ppublic class UploadBean { 


Private InputStream InputStreamState; // 输 入 流 
Private HttpServletRequest request; /从 了 JSP 页 面 传 入 的 Request 
Private Map<String, String> parameter = new HashMap<String, String>0; /创建 Map 集合 
4 
* 解析 Form 表单 
机 
Private void resolverForm() { 
InputStream inputStream = null 
try{ 
inputStream = request.getInputStream(): // 获 取 请 求 的 输入 流 
} catch (IOException e2) { 
, 2.printStackTraceO:; 
String contentType = request.getContentTypeO): /获取 请 求 正 文 类 型 


int data; 
StringBuffer datastr = new StringBuffer0: // 创 建 StringBuffer 对 象 
parameter clear0: // 移 除 Map 集合 中 的 映射 关系 
try{ 

while ((data = inputStream.read|) != -1) { /1/ 从 输入 流 中 读 取 单个 字 节 

datastr.append((char) data): // 将 数据 添加 到 stringBuffer 对 象 中 

} 

inputStream.closeO: /1/ 关 闭 输入 流 

String split = "boundary="; 

String splitStr = "--" 

+ contentType.substring(content Type.indexOf(split) 
十 splitlengthO): 


String[] formFileds = datastr.toString().split( 
"Content-Disposition: form-data: ") // 分 隔 表 单数 据 
for (inti= 0; i< formFileds.length; i++) { // 解 析 表 单数 据 
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it index = new int[4]: 
if (!formFileds[i].startsWith(splitStr)) { 
index[o] = -1: 
index[1] = formFileds[i] indexOf("\n", index[0]): 
index[2] = formFileds[i] indexOf("\n", index[1] + 1); 
index[3] = formFileds[i] indexOf("\n", index[2] + 1); 
String name =""; 
for (int lc =0; lc <index.length- 1; c++) { 
String line = formFileds[i].substring( 
indexflc]+ 1, index[lc + 1]); 
String[] lineFields = line.split("; "); 
for (intj = 0; j < lineFields.length; j++) { 
if (lineFields[j].startsWith("name=")) { 
name = lineFields[j].substring( 
lineFields[j].indexOf(™\"™") + 1, 
lineFields[i] lastIndexOf(™\"™")): 


+ lineFields[j].substring(0, 
lineFields[j].indexOf("=")); 
String argContent = lineFields[j] 
.substring(lineFields[j] 
-indexOf(™"\"") + 1, 
lineFields[j] 
‘lastIndexOf(™\"")); 
Parameter.put(arg, argContent); 
} 
if (line.equals("\")) { 
parameter.put(name, formFileds[i].substring( 
index[lc + 1]+ 1, formFileds[i] 
.lastIndexOf(splitStr) - 2)): 
break: 


} 


} 
} catch (Exception e) { 
e.printStack Trace(); 
1 


} 


…// 此 处 省 略 了 属性 的 getXXX0 方 法 和 setXXX0 方 法 
} 
(2) 创建 数据 库 操作 类 FileUploadDao， 在 该 类 中 编写 将 信息 保存 到 数据 库 的 方法 ， 关 键 代码 如 下 : 
public boolean saveFile(String file) throws SQLException{ 
Connection conn = null: 
boolean res = false; 


try{ 
com = DBCon.getConn(); // 创 建 数据 库 连 接 
String sql = "insert into tb_file(file) values(?)"; /SQL 语句 
PreparedStatement stmt = conn.prepareStatement(sql); // 创 建 预 编译 对 象 
stmt.setBytes(1. file.getBytes("ISO-8859-1")): /设置 文件 的 原始 字 节 
inti = stmtexecuteUpdateO: /执行 SQL 命令 
if(i>0) 

res=true; 

}catch(Exception ex){ 
ex.printStackTraceO); 

}finally{ 
conn close0: 

} 

return res; 


} 
(3) 创建 savejsp 页 ， 在 该 页 中 调用 UploadBean 类 的 方法 解析 Form 表单 数据 ， 然 后 调用 FileUploadDao 
类 的 saveFile0 方 法 保存 文件 到 数据 库 ， 关 键 代码 如 下 : 
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<96@ page import="com.Ih.dao. FileUploadDao” %> 
<%@® page import="com.Ih.model. UploadBean” %> 
<% 


UploadBean uploadBean = new UploadBean0: /创建 UploadBean 对 象 ， 用 于 解析 表单 数据 
uploadBean.setRequest(request): // 将 请 求 传 入 UploadBean 对 象 
FileUploadDao.getInstance().saveFile(myFile):; // 调 用 方法 保存 到 数据 库 
%> 
国 秘笈 心 法 


由 于 在 UploadBean 类 中 需要 获取 请 求 的 输入 流 InputStream， 所 以 在 调用 UploadBean 类 的 方法 解析 Form 
表单 数据 时 ， 需 要 将 JSP 页 面 的 request 对 象 传 入 到 UploadBean 中 ， 然 后 在 UploadBean 中 再 根据 请 求 对 象 进行 


相应 的 处 理 。 这 样 可 以 避免 将 大 量 的 Java 代码 编写 在 JSP 页 面 中 ， 有 利于 程序 的 维护 。 


实例 279 
国 实例 说 明 
在 网 站 中 的 用 户 注册 页 面 中 , 除了 基本 的 用 户 信息 以 外 , 可 能 还 
会 包含 上 传 用 户 照片 的 表单 元 素 , 用户 注册 后 会 将 用 户 息 以 及 用 户 姓名 
的 照片 保存 到 数据 库 中 。 本 实例 实现 的 就 是 这 一 功能 ， 运 行 本 实例 ， 4， 昌明 0 女 
如 图 11.30 所 示 ， 输 入 用 户 信息 并 选择 用 户 照片 ， 单 击 “ 提 交 ” 按 钮 用， 本 
后 ， 用 户 信 息 以 及 照片 将 保存 到 数据 库 中 。 读 择 照片 ，G Be GE 
图 关键 技术 图 11.30 “多 表单 元 素 上 传 文件 到 数据 库 


本 实例 同样 是 设置 Form 表单 的 提交 类 型 为 multipart/form-data， 


然后 根据 请 求 的 输入 流 来 解析 表单 元 素 的 数据 ,包括 文件 数据 。 从 InputStream 输入 流 中 解析 表单 数据 的 方法 与 


实例 278 中 UploadBean 类 的 解析 方法 相同 ， 此 处 不 再 效 述 。 
图 设计 过 程 


(1) 创建 JavaBean 类 UserInfo， 用 于 封装 用 户 的 注册 信息 ， 关 键 代码 如 下 : 


public class UserInfo { 


private String userName; // 姓 名 
private String userSex; /性 别 
private int userAge: /年 龄 


Private String userPic; /照片 
/和 用 隐 了 属性 的 getXXX0 方 法 和 setXXX0 方 法 


} 
(2) 创建 数据 库 操作 类 FileUploadDao， 在 该 类 中 编写 保存 用 户 注 册 信息 的 方法 ， 关 键 代码 如 下 : 


public boolean saveFile(UserInfo user) throws SQLException{ 
Connection conn = null: 
boolean res = false: 


try{ 
conmn = DBCon.getConn(); 1/ 创建 数据 库 连 接 
String sql = "insert into tb_user(name.sex.age.pic) values(?.2.2.2)"; ” //SQL 语句 
PreparedStatement stmt = conn.prepareStatement(sql): /创建 PreparedStatement 对 象 


stmt.setString(1. user.getUserName()): 
stmt setString(2. user getUserSexO): 
stmt.setInt(3, user.getUserAgeO): 


stmt setBytes(4. user.getUserPic|.getBytes("ISO-8859-1")); // 设 置 文件 的 原始 字 节 
inti= stmt.executeUpdate(): /| 执行 SQL 命令 
if(i>0) 
Tes 王 true: 
Jeatch(Exception ex){ 
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外 
(3) 创建 savejsp 页 , 在 该 页 中 调用 FileUploadUtil 类 的 方法 解析 Form 表单 数据 , 然后 调用 FileUploadDao 


类 的 saveFile0 方 法 保存 用 户 注册 信息 到 数据 库 ， 关 键 代码 如 下 : 
<%@® page import="com.Ih.dao.FileUploadDao” %> 
<%@ page import="com.Ih.model. UserInfo” %> 
<%@ page import="com.Ih.util. FileUploadUtil” %> 
<% 


FileUploadUtil uploadUtil = new FileUploadUtilO: 

uploadUrtil.setRequest(request); // 将 请 求 对 象 传 入 到 FileUploadUtil 对 象 中 
String name=uploadUtilgetParameter("name'"): 

String nameStr = new String(name.getBytes("ISO-8859-1"),"UTF-8"); 

String sex = uploadUtil.getParameter("sex"); 

String age = uploadUtil.getParameter("age"); 

String myFile = uploadUtil.getParameter("file"): 


UserInfo user = new UserInfoO); 1/ 封装 用 户 信息 的 JavaBean 对 象 
User.setUserName(nameStr); /设置 姓名 
UsersetUserSex(sex); /设置 性 别 
user.setUserAge(Integer.parseInt(age)); 1/ 设置 年 龄 
user.setUserPic(myFile); /设置 照片 
FileUploadDao.getInstance().saveFile(user); /调用 方法 保存 到 数据 库 
%> 

图 秘笈 心 法 


在 实际 的 项 目 开 发 中 , 为 了 便于 维护 以 及 提示 代码 的 重用 性 , 一 般 会 将 表单 数据 封装 到 一 个 单独 的 JavaBean 
对 象 中 。 例如， 本 实例 中 将 表单 的 信息 的 用 户 名 、 年 龄 、 性 别 以 及 照片 封装 到 UserInfo 对 象 中 ， 而 这 个 UserInfo 
对 象 中 的 属性 和 数据 库 中 用 户 信 息 表 的 字段 是 对 应 的 ， 这 种 方式 类 似 于 ORM 映射 (Object Relation Mapping， 
对 象 关 系 映射 )。 目 前 ， 体 现 ORM 映射 最 好 的 框架 之 一 就 是 Hibemate，Hibermate 框架 主要 用 于 持久 化 对 象 ， 有 
兴趣 的 读者 可 以 参考 相关 Hibemate 的 资料 ， 此 处 不 作 详 细 介 绍 。 


实例 280 


国 实例 说 明 


大 多 数 网 站 都 有 文件 上 传 的 功能 ， 如 CSDN 网 站 允许 用 户 将 一 些 程序 的 源 代 码 进 行 上 传 ， 以 便于 其 他 用 户 
下 载 。 本 实例 将 介绍 如 何 将 文件 上 传 到 服务 器 的 指定 目录 中 。 运 行 本 实例 ， 


如 图 11.31 所 示 ， 选 择 要 上 传 的 文件 ， 单 击 “ 上 传 ” 按钮 后 ， 所 选 文件 将 
会 上 传 至 服务 器 。 到 \Struts2, 0 学 习 系列 . chn [浏览 ,。, 
图 关键 技术 二 一 

本 实例 在 实现 上 传 时 ， 同 样 需要 解析 类 型 为 multiparytomm_data 的 图 1131 上 传 文件 到 服务 器 


Form 表单 数据 ， 通 过 这 种 类 型 提交 的 表单 数据 ， 需 要 从 请 求 的 mputStream 输入 流 中 进行 解析 。 
接 下 来 就 是 利用 java.io FileOutputStream 将 解析 出 的 文件 数据 写 入 到 服务 器 的 文件 中 。FileOutputStream 俗 
称 文件 输出 流 ， 它 的 作用 是 把 内 存 中 的 数据 输出 到 文件 中 ， 该 类 中 包含 一 个 write0 方 法 ， 其 语法 结构 如 下 : 
Public void write(byte[] b throws IOException 
参数 说 明 
b: 向 文件 输出 流 中 输出 的 字 节 数组 。 
功能 : 将 b.length 个 字 节 从 指定 byte 数组 写 入 此 文件 输出 流 中 。 
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图 设计 过 程 
(1) 创建 工具 类 FileUploadUtil， 编 写 上 传 文件 到 服务 器 的 方法 ， 具 体 代 码 如 下 : 
Pe 
* 上 传 文件 到 服务 器 
* @param file 要 上 传 的 文件 
*@param filename 文件 名 


* @param uploadPath 上 传 路 径 ， 此 路 径 是 服务 器 的 路 径 
村 re 上 传 成 功 返 回 tme， 否 则 返回 false 


boolean uploadToServertSting file, String filename, String uploadPath) { 


filename = System.currentTimeMillis0+ "_"+filename: // 文 件 重 命名 
TesolverFormO: 
try{ 
File dir = new File(uploadPath+"/upload/"); 
if(!dir.exists\) /测试 此 目录 是 否 存在 
dirmkdir0: // 创 建文 件 夹 
File newFile = new File(dir.getAbsolutePath()+"/"+filename); /创建 文件 
if(!newFile.exists()) /测试 此 文件 是 否 存在 
newFile.createNewFile(); 1/ 创建 文件 
FileOutputStream fos = new FileOutputStream(newFile): // 创 建文 件 输出 流 对 象 
fos.write(file.getBytes("iso-8859-1")); /向 文件 输出 流 中 输出 文件 字 节 数据 
ea // 关 闭 流 
turn true; 
} catch ss ex){ 
ex.printStacl 
return false; 
1 
(2) 创建 savejsp 页 , 在 该 页 中 获取 请 求 数据 , 然后 将 请 求 传 入 FileUploadUtil 对 象 中 , 通过 FileUploadUtil 


对 象 的 方法 来 解析 Form 表单 的 数据 ， 最 后 调用 FileUploadUtil 对 象 的 上 传 文件 的 方法 ， 实 现 将 文件 上 传 到 服务 
器 ， 关 键 代 码 如 下 : 


<%(0 page import="com. lh.util.FileUploadUrtil” %> 
<%@ page import="Java.io. 96> 
<%(MDpage import='"yava.netURLDecoder'"9%b> 


FileUploadUtil uploadUtil = new FileUploadUtil0: 


uploadUtil.setRequest(request); // 将 请 求 对 象 传 入 到 FileUploadUtil 对 象 中 
String filePath = uploadUtil.getParameter("pathStr"); // 文 件 路 径 字符 串 
filePath=URLDecoder.decode(filePath."UTF-8"); // 对 编码 过 的 字符 串 进 行 解码 
File file = new File(filePath):; // 根 据 文件 路 径 创建 File 对 象 
String fileName = file.getName(); /获取 文件 名 
String uploaFile = uploadUtil.getParameter("file”); // 要 上 传 的 文件 
String uploadPath = application.getRealPath("/"); /服务 器 路 径 作为 上 传 路 径 
uploadUtil.uploadToServer(uploaFile.fileName.uploadPath): 

%> 
图 秘笈 心 法 


大 多 数 网 站 的 文件 上 传 功能 ， 一 般 都 是 将 文件 上 传 到 服务 器 的 指定 目录 ， 而 不 是 将 文件 保存 到 数据 库 中 ， 
除非 一 些 重要 的 保密 文件 。 如 果 将 所 有 文件 都 保存 到 数据 库 中 ， 不 仅 会 给 数据 库 造 成 非常 大 的 负担 ， 而 且 也 会 
影响 程序 的 性 能 。 因 此 ， 笔 者 建议 不 要 将 上 传 文件 保存 到 数据 库 ， 将 其 上 传 至 服务 器 即 可 。 


实例 281 高 级 | 
实用 指数 : 食 食 食 合 : 
图 实例 说 明 


本 实例 实现 的 是 对 实例 280 的 改进 ， 限 制 了 上 传 文件 的 大 小 。 运 行 本 实例 ， 如 图 11.32 所 示 ， 限 制 文件 大 
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小 不 能 超过 2MB， 如 果 上 传 文件 超过 2MB，Tomcat 服务 器 会 弹出 文件 超出 大 小 限制 的 异常 提示 信息 。 


11.32 ”限制 文件 大 小 的 文件 上 传 


图 关键 技术 


本 实例 的 基本 实现 思路 和 前 几 个 实例 基本 相同 ， 唯 一 的 不 同 就 是 在 上 传 文件 时 需要 判断 文件 的 大 小 ， 如 果 
文件 超出 指定 大 小 ， 设 置 应 用 程序 抛 出 一 个 自 定义 的 异常 提示 信息 。 在 程序 中 抛 出 自 定义 的 异常 ， 语 法 格式 如 
下 

throw new Exception(String str) 

参数 说 明 

str: 自 定义 异常 的 错误 提示 信息 。 

功能 : 抛 出 一 个 自 定义 的 异常 对 象 。 

图 设计 过 程 

(1) 创建 FileUploadUtil 类 ,在 该 类 中 添加 一 个 long 类 型 的 属性 fileSize， 用 该 属性 表示 文件 的 大 小 ， 并 对 
该 属性 添加 getXXX0 方 法 和 seftXXX(0 方 法 。 然 后 在 上 传 文件 的 方法 uploadToServer0 中 ， 添 加 文件 大 小 验证 的 
代码 ， 限 制 上 传 文件 的 大 小 。uploadToServer0 方 法 的 关键 代码 如 下 : 

public boolean uploadToServer(String file, String filename, String uploadPath) 

throws Exception { 

if (file.length() > fileSize) { 1/ 判断 文件 大 小 是 否 超过 指定 的 值 
file=null: 
errorMessage = "文件 超出 大 小 限制 。"; 
parameter.put("error”", errorMessage); 
throw new Exception(" 文 件 超出 大 小 限制 。"); 
} 


filename = System.currentTimeMillis)+ "_"+filename: // 文 件 重 命名 
TesolverForm(); 
try{ 
File dir = new File(uploadPath+"/upload/"); 
if(ldirexistsO) /测试 此 目录 是 否 存在 
dirmkdir0: 1/ 创建 文件 夹 
File newFile = new File(dir getAbsolutePathO+""+filename); // 创 建文 件 
if(InewFile.existsO) /测试 此 文件 是 否 存在 
newFile.createNewFile(): 1/ 创建 文件 
FileOutputStream fos = new FileOutputStream(newFile): // 创 建文 件 输出 流 对 象 
fos.write(file.getBytes("iso-8859-1")): // 向 文件 输出 流 中 输出 文件 字 节 数据 
fos.closeO: 1/ 关闭 流 
return true; 
} catch (Exception ex) { 
ex.printStack TraceO): 
return false: 


} 


} 
(2) 在 savejsp 页 中 添加 设置 文件 大 小 的 代码 ， 主 要 是 调用 FileUploadUtil 的 setXXX0 方 法 对 fleSize 属性 
赋值 ， 注 意 代 码 中 的 粗 体 部 分 的 两 行 代码 为 设置 文件 大 小 的 代码 。savejsp 页 的 关键 代码 如 下 : 


<% 
FileUploadUtil uploadUtil = new FileUploadUtil0: 
uploadUtil.setRequest(request); 
long fileSize = 1024*1024*2: /1/ 设 置 文 件 大 小 为 2MB 
uploadUtil.setFileSize(fileSize): 
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String filePath = uploadUtil.getParameter("pathStr"); // 文 件 路 径 字 符 串 
filePath=URLDecoder.decode(filePath,"UTF-8"); // 对 编码 过 的 字符 串 进行 解码 
File file = new File(filePath); /根据 文件 路 径 创 建 File 对 象 
String fileName = file .getName0: /获取 文件 名 
String uploaFile = uploadUtil.getParameter("file"): /文件 
String uploadPath = application .getRealPath("/"); /W/ 服 务 器 路 径 作 为 上 传 路 径 
uploadUtil.uploadToServer(uploaFile,fileName.uploadPath): 
%> 
国 秘笈 心 法 


上 传 文件 的 功能 是 需要 限制 文件 大 小 的 ， 具 体 限 制 值 为 多 少 需要 根据 服务 器 性 能 而 定 。 如 果 用 户 上 传 一 个 
几 GB 的 文件 甚至 更 大 的 文件 ， 那 么 服务 器 端 在 读 取 并 写 入 这 些 数据 时 ， 如 果 处 理 不 当 会 严重 影响 服务 器 的 运 
行 效率 ， 而 且 这 个 文件 也 会 占用 服务 器 系统 很 大 的 磁盘 空间 。 


11.3 通过 组 件 实现 文件 上 传 
在 11.2 节 中 讲解 了 无 组 件 上 传 的 几 个 实例 ， 实 现 无 组 件 上 传 时 ， 和 需要 编写 大 量 的 代码 来 实现 具体 的 上 传 功 
能 。 本 节 将 向 大 家 介绍 如 何 应 用 第 三 方 的 开源 组 件 实现 文件 上 传 ， 目 前 比较 常用 的 上 传 组 件 是 jspSmartUpload 


组 件 和 commons-fileupload 组 件 ， 应 用 它们 可 以 不 必 编 写 大 量 的 代码 ， 只 是 简单 地 调用 即 可 ， 具 体 的 业务 实现 
是 在 组 件 中 完成 的 。 


实例 282 


实例 说 明 

jspSmardUpload 上 传 组 件 是 比较 常用 的 上 传 组 件 . 下 面 
将 向 读者 介绍 使 用 jspSmardUpload 上 传 组件 实 现 文件 的 上 a 
传 ， 实 例 运行 效果 如 图 11.33 所 示 。 选择 上 全文 件 : (文件 大 小 不 要 超过 10kt) 


图 关键 技术 


在 实现 本 实例 前 ， 先 介绍 一 下 jspSmardUpload 组 件 ， 
这 个 组 件 中 有 3 个 核心 类 ， 下 面 介 绍 这 几 个 类 的 用 法 。 

1，KEile 类 

该 类 包含 以 下 几 个 主要 方法 。 
getCount0 方 法 : 获取 上 传 文件 的 数目 ， 返 回 值 是 int 型。 
getSize( 方 法 : 获取 上 传 文件 的 总 长 度 ， 单 位 为 字 节 ， 返 回 值 为 long 型 。 
getFile() 方 法 : 有 一 个 int 型 参数 ， 用 于 获取 参数 指定 位 置 处 的 com.jspsmart.uploadFile 对 象 。 
getCollection0 方 法 : 将 所 有 File 对 象 以 Collection 的 形式 返回 。 
getEnumeration0 方 法 : 将 所 有 File 对 象 以 Enumeration 的 形式 返回 。 

2.，Request 类 

因为 实现 文件 上 传 时 ， 表 单 属性 enctype 设置 成 了 multipart/form-data， 这 样 只 有 通过 组 件 提供 的 Request 
类 才 可 以 获取 表单 元 素 ， 该 类 包含 以 下 几 个 主要 方法 。 

口 ”getParameter(0 方 法 : 获取 表单 中 由 参数 指定 的 表单 元 素 的 值 。 

口 ”getParameterName( 方 法 : 获取 Form 表单 中 除 <input type=“file”> 外 的 所 有 表单 元 素 的 名 称 ， 其 返回 


图 11.33 ”使 用 jspSmardUpload 组 件 实现 文件 上 传 


OOOOO 
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值 的 类 型 是 枚 举 类 型 的 。 

口 ”getpParameterValues( 方 法 : 获取 的 是 表单 中 具有 相同 名 称 的 元 素 的 值 。 方法 中 传 入 的 参数 的 类 型 是 一 个 
String 类 型 ， 参 数 是 用 来 指定 表单 中 元 素 的 名 称 。 

3. SmartUpload 类 


该 类 主要 用 于 实现 文件 的 上 传 下 载 ， 在 实现 时 要 首先 实现 initialize0 广 法， 然后 可 以 分 别 使 用 下 面 的 常用 
方法 。 
口 upload( 方 法 : 实现 本 方法 是 一 个 复杂 的 过 程 ， 首 先 要 调用 JSP 内 置 对 象 的 getInputStream0 方 法 获取 客 
户 端 输 入 流 , 然后 使 用 输入 流 的 read0 方 法 读 取 所 有 数据 写 到 字 节 数组 中 , 之 后 循环 提取 每 个 文件 的 数 
据 并 将 其 封装 到 File 对 象 中 ， 最 后 通过 Files 类 的 addFile0 方 法 添加 到 Files 对 象 中 
口 save0 方 法 : 在 实现 了 initialize0 方 法 和 upload0 方 法 后 ,通过 本 方法 将 全 部 的 上 传 文件 保存 到 指定 的 上 
录 下 面 ， 并 返回 保存 的 文件 个 数 。 


图 设计 过 程 

(1) 首先 实现 一 个 上 传 文件 的 页 面 upl.html， 在 实现 这 个 页 面 时 一 定 要 注意 的 是 ， 要 将 表单 元 素 中 enctype 
的 值 改 为 multipart/fom-data， 具 体 的 实现 代码 如 下 : 

<body> 


<form method="post" action="/Jsup/upfilejsp”" enctype="multipart/form-data"> 
<p> 上 传 的 文件 是 : (文件 大 小 不 要 超过 10KB)<br> 
<input type="file" name="file1" size="50"><br> 
<input type="submit”" value="Upload"> 
p> 
</form> 


<body> 
(2) 创建 upfilejsp 页 ， 在 该 页 中 获取 文件 上 传 数 据 ， 然 后 保存 到 服务 器 指定 目录 下 。 在 该 页 中 只 需 调用 
组 件 提供 的 方法 即 可 ， 并 不 需要 再 去 创建 自己 的 实现 方法 ， 但 一 定 要 注意 包 的 引用 ， 具 体 代 码 如 下 : 
<%(0 page language="java" import= "Jaya.utiL#" pageEncoding="Wtf-8"%0> 
<%(0 page import="com.jspsmart.upload. *" %> 
<jsp:useBean id="mySmartUpload" scope="page" class="com.jspsmart.upload.SmartUpload" /> 
<% 


mySmartUpload.initialize(pageContext); /执行 初始 化 操作 
mySmartUpload.setTotal MaxFileSize(100000); // 设 置 文 件 最 大 字 节 数 
mySmartUpload.uploadO: /上 传 文件 到 服务 器 
try{ 
mySmartUpload.save("/upload"); // 如 果 存 在 目录 就 保存 文件 ， 否 则 抛 出 异常 
out.print(" 成 功 上 传 文件 ! “"); 
} 
catch(Exception e){ 
out.print(e.toStringO); 


} 
%> 


图 秘笈 心 法 


如 果 对 上 传 功能 的 要 求 不 大 ， 读 者 完全 可 以 直接 去 使 用 组 件 提供 的 一 些 方法 ， 不 需要 大 量 地 编写 代码 ， 这 
样 可 以 在 很 大 程度 上 提高 效率 。 
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图 实例 说 明 
jspSmartUpload 上 传 组 件 是 比较 常用 的 上 传 组 件 。 但 是 在 使 用 时 如 果 有 对 中 文 文件 名 的 文件 进行 上 传 ， 那 
么 就 要 对 上 面 的 实现 方法 进行 相应 的 改进 。 本 实例 将 介绍 如 何 应 用 jspSmartUpload 组 件 处 理 中 文 名 文件 的 上 传 ， 
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实例 运行 效果 如 图 11.34 所 示 。 


【应 用 jspSmartUpload 处 理 中 文 名 文件 上 传 】 


选择 上 传 文件 : 《文件 大 小 不 要 超过 2MB) 
CAUsers\Lh\Desktop\jBPN-4.0 中 文 开发 指南 - chm 


开始 上 传 


11.34 ”使 用 jspSmartUpload 组 件 实现 中 文 名 文件 上 传 


图 关键 技术 
jspSmartUpload 组 件 没有 对 中 文 进行 处 理 ， 如 果 希 望 该 组 件 支持 中 文 ， 需 要 对 该 组 件 的 源 代 码 进 
但 是 由 于 其 官网 www.jspsmart.com 目前 已 经 停 用 ， 所 以 暂时 没有 jspSmartUpload 组 件 的 源码 文件 ， 不 


行 改进 。 


过 可 以 利 


用 Java 反 编译 器 将 jar 包 进 行 反 编译 , 然后 就 可 以 修改 其 源 代码 。 在 组 件 的 源码 中 ， 主 要 修改 SmartUpload 类 的 


upload() 方 法 和 getDataHeader() 方 法 。 


多 提示 : Java 反 编 译 器 可 以 将 .class 文件 重新 编译 为 java 源 代码 文件 . 目前 有 近 30 多 种 Java 反 编译 器 ， 如 Java 


Decompiler、JAD、JODE 等 。 这些 工 具 可 以 到 其 官网 下 载 使 用 。 


图 设计 过 程 


(1) 在 SmartUpload 类 中 找到 upload0 方 法 ， 在 最 后 一 个 else 语句 中 ， 在 将 字 节 数组 转换 为 String 字符 串 
时 ， 设 置 以 UTF-8 格式 进行 转换 。 当 然 ， 如 果 request 请 求 为 其 他 编码 格式 ， 如 GB2312， 那 么 在 upload0 方 法 


中 同样 设置 编码 为 GB2312。upload0 方 法 修改 之 后 的 关键 代码 如 下 : 
public void uploadO throws ServletException, IOException, SmartUploadException{ 

ee /此 处 省 略 了 其 他 源码 

for (this.m_currentIndex += 1; this.m _currentIndex < this.m_totalBytes: this.m_currentIndex += 2) 

{ 
String sl = getDataHeaderO; 
this.m_currentIndex += 2; 
boolean flag3 = sl.indexOf("filename") > 0; 
String s3 = getDataFieldValue(s1, "name"); 
if (flag3) 


{ 
ee /此 处 省 略 了 其 他 源码 


getDataSection(); 
if ((flag3) && (s4.lengthO > 0)) 
{ 


ee /此 处 省 略 了 其 他 源码 
} 
if (flag3) 
{ 
seen, /此 处 省 略 了 其 他 源码 
else { 
// 源 代码 中 没有 设置 UTF-8 编码 ， 所 以 需要 在 此 处 设置 UTF-8 编码 
String s11 = new String(this.m_binArray., this.m_startData. this.m_endData - this.m startData + 1,"UTF-8"): 
this.m formRequest.putParameter(s3, s11): 
); 
if ((char)this.m _binArray[(this.m _currentIndex + 1)] —"-) 


return: 
} 


(2) 在 SmartUpload 类 中 找到 getDataHeader() 方 法 ， 在 该 方法 中 同样 设置 返回 字符 串 的 编码 格式 
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Private String getDataHeaderO{ 
ee) /省 略 了 以 上 其 他 源 代码 
String header- 
try{ 
header = new String(this.m_binArray, i.j -i+ 1,"UTF-8");// 在 此 处 设置 返回 字符 串 的 编码 格式 为 UTF-8 
} catch (UnsupportedEncodingException e) { 
e.printStackTrace(); 
h 


return header; 


} 
(3) 在 操作 系统 的 cmd.exe 命令 行 工 具 中 运行 jar 命令 将 修改 过 的 jspSmartUpload 组 件 源 代码 打包 成 jar 
文件 ， 然 后 将 jar 包 复 制 到 项 目的 WEB-INF/lib 目录 中 即 可 ， 在 命令 行 中 为 文件 打包 的 命令 如 下 : 
jar cvf jspsmartupload_zh_CN.jar com 
图 秘笈 心 法 
如 果 不 想 修改 jspSmartUpload 组 件 源 代码 来 解决 中 文 名 文件 的 上 传 问题 ， 那 么 就 必须 将 文件 上 传 的 页 面 修 
改 为 html 文件 ， 应 用 html 文件 上 传 时 的 中 文 文件 名 同样 不 会 出 现 乱 码 。 


实例 284 


图 实例 说 明 

网 站 提供 的 上 传 文件 功能 ， 人 允许 客户 端 用 户 将 一 些 文件 复制 到 服务 器 中 ， 并 且 用 户 可 访问 上 传 的 文件 ， 那 
么 其 安全 性 就 出 现在 这 里 ， 如 果 用 户 上 传 了 一 些 EXE 可 执行 文件 或 者 JSP 文件 ， 这些 文件 可 能 是 用 户 专门 编写 
的 具有 获取 服务 器 重要 信息 甚至 对 服务 器 进行 破坏 功能 的 恶意 文件 ， 这 些 文件 被 执行 后 会 产生 严重 后 果 。 所 以 
在 实现 文件 上 传 的 功能 时 ， 可 限制 用 户 上 传 一 些 具 有 危险 性 的 文件 ， 如 *.exe、*:jsp、*.bat 等 。 本 实例 将 通过 
jspSmartUpload 组 件 处 理 文件 上 传 的 漏洞 ， 实 例 运 行 的 效果 如 图 11.35 所 示 ， 选 择 一 个 .exe 文件 ， 单 击 “ 上 传 ” 
按钮 ， 此 时 文件 上 传 失败 ， 并 在 页 面 中 显示 受 限制 上 传 文件 类 型 的 提示 信息 。 


。 请 选择 要 上 传 的 文件 ! 禁止 上 传 "* exe”、 
文件 1: E Versn eton ja ei exe [Ee 
文件 2: 3 
文件 3: 济 
[eal 


图 11.35 文件 上 传 页 面 ( 左 )， 显 示 限制 文件 类 型 的 提示 信息 ( 右 ) 


图 关键 技术 

实现 文件 类 型 上 传 的 限制 ， 主 要 是 应 用 jspSmartUpload 组 件 中 的 SmartUpload 类 ， 在 该 类 中 提供 了 一 个 用 
于 设置 禁止 上 传 的 文件 方法 setDeniedFilesList0， 该 方法 的 语法 格式 如 下 : 

Public void setDeniedFilesList(String deniedFilesList) throws ServletException. IOException. SQLException 

参数 说 明 

deniedFilesList: 指定 禁止 上 传 文件 的 扩展 名 ， 多 个 扩展 名 之 间 以 逗号 分 隔 。 

功能 : 设置 禁止 上 传 的 文件 类 型 ， 调 用 该 方法 时 会 抛 出 ServletException、IOException 和 SQLException。 若 
禁止 上 传 没有 扩展 名 的 文件 ， 以 “,,” 表 示 。 例 如 ，setDeniedFilesList("exe,jsp,,bat") 表 示 禁 止 上 传 *.exe、*.jsp、 
*.bat 和 不 带 扩展 名 的 文件 。 
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图 设计 过 程 
(1) 创建 选择 文件 上 传 页 面 ， 实 现代 码 如 下 : 


<form action="doupjsp” method="POST" enctype="multipart/form-data"> 


<table border="] " height="200" width="450" bordercolor="gray” bordercolorlight="gray” 


bordercolordark="white” cellspacing="0" rules="hnone”> 


<tr bgcolor="#B3DC38" height="35"><td align="center” colspan="3"><96=errors%></td></tr> 


<% for(int i=1:i<4:iHH){ %> 
<t> 
<td align="right” width="2096"> 文 件 <%=i%>: </td> 
<td align="center ><input type="file” name="file<%=it 
</r> 
<%} %> 
<tr bgcolor="#B3DC38" height="30"> 
<td align="center" colspan="2"> 
<input type="submit” value=" 上 做 "> 
<input type="reset" value=" 重 彼 "> 
<htd> 
</tr> 
</table> 
</form> 


(2) 表单 提交 给 doupjsp 进行 处 理 ， 在 doup.jsp 页 面 中 将 应 用 jspSmartUpload 组 件 上 传 文件 ， 实 现代 码 


如 下 : 
<%(@ page contentType="text/html;charset=gb2312"%> 
<%(@ page import="com.jspsmart.upload. File” %> 
<%(0 page import="com.jspsmart.upload.Files" %> 
<jsp:useBean id="myup" class="com.jspsmart.upload.SmartUpload"/> 
<center> 正 在 上 传 文件 ， 请 稍 等 ……</center> 


long maxsize=2*1024*1024; 

boolean allow=true; 

try{ 
myup.initialize(pageContext): 
myup.set MaxFileSize(maxsize); 
myup.setDeniedFilesList("exe.jsp,bat"); 
myup.uploadO; 

}catch(SecurityException e){ 
allow=false: 
errorst+=" 禁 止 上 传 \"*.exe\"、\"*jsp\"、\".bat\" 文 件 "; 
e.printStack Trace(); 


Files files=myup.getFilesO: 
for(int i=0:i<files.getCountO:i+H){ 
File singlefile=files.getFile(i); 
if(!singlefile.isMissingO){ 
String name=singlefile.getFileName(): 


"size="35"></td> 


/上 传 目标 文件 夹 

/上 传 文件 的 最 大 空间 限制 
/初始 化 
/设置 文件 的 最 大 空间 限制 


/设置 限制 的 文件 
1/ 执行 上 传 方法 


/上 传 失败 提示 信息 
/如果 上 传 成 功 
// 获 取 上 传 的 文件 对 象 


/遍历 文件 


/获取 上 传 文件 的 文件 名 


singlefile.saveAs(filedir+name.File. SAVEAS_VIRTUAL): 


errorst="<li> 文 件 "+(i+1)+" 上 传 成 功 ! </li>"; 


} 


} 
}catch(java.lang.NumberFormatException e){ 
errors=" 文 件 上 传 失 败 !1"; 
eprintStackTraceO: 


request.setAttribute("errors".errors); 
%> 


<jsp:forward page="fileupjsp"/> 


国 秘笈 心 法 


应 用 jspSmartUpload 组 件 实现 文件 上 传 时 ， 除 了 调用 SmartUpload 类 的 setDenidedFilesList0 方 法 禁止 上 传 
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的 文件 外 ， 还 可 以 通过 setAllowedFilesList(String allowedFilesLisb) 方 法 来 设置 只 允许 上 传 的 文件 ， 其 中 参数 
allowedFilesList 指定 允许 上 传 文件 的 扩展 名 ， 多 个 扩展 名 之 间 以 逗号 分 隔 。 如 果 需 要 允许 上 传 没有 扩展 名 的 文 
件 ， 以 “,,” 表 示 。 例 如 ，setAllowedFilesList("txt,doc,,") 表 示 只 允许 上 传 *.txt、*.doc 和 不 带 扩展 名 的 文件 。 


fileUpload 组 件 实现 文件 上 传 高 级 . 
实用 指数 : 女 女 女人 闪 | 
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图 实例 说 明 

commons-fileUpload 上 传 组 件 是 apache 的 一 个 开源 项 目 ， 该 组 件 对 中 文 进行 了 良好 的 处 理 ， 也 就 是 说 ， 应 
用 该 组 件 上 传 文件 不 会 出 现 中 文 乱码 问题 ， 是 目前 应 用 最 广泛 的 开源 组 件 。 该 组 件 包 文件 可 以 到 apache 的 官方 
网 站 进行 下 载 。 本 实例 就 是 通过 commons-fileUpload 组 件 实现 文件 的 上 传 ， 实 例 运行 效果 如 图 11.36 所 示 。 


【应 用 commons-fleUpload 实 现 文件 上 传 了 
选择 上 传 文件 : (文件 大 小 不 要 超过 2MB) 


| 
[RE 入 


图 11.36 使 用 commons-fileUpload 组 件 实现 文件 上 传 
图 关键 技术 


commons-fileUpload 组 件 需 要 commons-io 包 的 支持 ， 在 使 用 该 组 件 时 要 加 以 注意 。 首 先 需要 应 用 该 组 件 中 
ServletFileUpload 类 的 isMultipartContent0 方 法 判断 请 求 是 否 为 上 传 文件 的 请 求 ， 只 有 是 文件 时 才 执 行 下 面 的 一 
些 相关 操作 。ServletFileUpload 类 是 commons-fileUpload 组 件 处 理 文件 上 传 的 核心 类 ,该 类 的 常用 方法 如 表 11.7 
所 示 。 

表 11.7 ServletFileUpload 类 的 常用 方法 


方 法 名 
public boolean isMultipartContent(HttpServletRequest 


作 用 
返回 boolean 值 rue 或 false, 用 于 判断 请 求 是 否 为 上 传 文件 的 请 求 ， 
主要 是 判断 form 表单 提交 请 求 类 型 是 否 为 multipart/form-data 
该 方法 从 请 求 中 获取 上 传 文件 域 的 List 集合 
获取 FileItem 对 象 文 件 大 小 的 最 大 值 ,返回 值 为 Long 类 型 。FileItem 
对 象 为 parseRequest() 方 法 获取 的 List 集合 中 的 元 素 
设置 FileItem 对 象 文 件 大 小 的 最 大 值 ， 设 置 的 参数 为 Long 类 型 。 
FileItem 对 象 为 parseRequest0 方 法 获取 的 List 集合 中 的 元 素 


_Public List parseRequest(HttpServletRequest request) 


public Long getFileSizeMax() 


public void setFileSizeMax(Long fileSizeMax) 


public FileItemIteratorgetItemIterator(HttpServlet Request 


该 方法 从 请 求 中 获取 文件 的 迭代 器 
request. 
图 设计 过 程 
(1) 创建 index.html 页 ， 在 该 页 中 添加 一 个 文件 域 的 表单 ， 并 设置 提交 类 型 为 multipartform-data， 有 具体 代 
码 如 下 : 
<body> 
<form method="post”" action="UploadServiet” enctype="multipart/form-data”> 


<p> 上 传 的 文件 是 : 康 件 大 小 要 全 过 2MB)<br> 
<input type="file” name="file1" size="50"><br> 


423 


Java Web 开发 实例 大 全 (基础 卷 ) 


<input type="submit" value="Upload"> 
</form> 
</body> 
(2) 创建 获取 文件 上 传 请 求 的 Servlet 类 。 在 Servlet 类 的 doPost0 方 法 中 获取 请 求 ， 实 现 文件 上 传 ， 具 体 
代码 如 下 : 
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException. IOException { 
Tequest.setCharacterEncoding("UTF-8"); 
String uploadPath=getServletContextO.getRealPath("/")+"upload": /定义 上 传 文件 的 地 址 
File folder = new File(uploadPath); 
if(!folder.exists|) 
folder.mkdirs (); 
try{ 
if(ServletFileUpload.isMultipartContent(request){ 1/ 判断 获取 的 是 否 是 文件 
DiskFileItemFactory disk=new DiskFileItemFactoryO; 
disksetSizeThreshold(20+1024): /设置 内 存 可 存 字 节 数 
disk.setRepository(disk. getRepositoryO); /设置 临时 文件 目录 
ServletFileUpload up=new ServletFileUpload(disk); 
int maxsize=2*1024*1024; 
List list=up.parseRequest(request); /1/ 获 取 上 传 列 表 
Tterator i=list.iterator(); /创建 列表 的 和 迭代 器 
While(ihasNextO){ 
FileItem fm=(FileItem)i.nextO; /遍历 列表 
if(!fm.isFormFieldO){ 
String filePath = fileItem. getName(): 1/ 获取 文件 全 路 径 名 
String fileName=""; 
int startIndex = filePath.lastIndexOf(™\"); 
if(startIndex!=-1){ // 对 文件 名 进行 截取 
fileName = filePath.substring(startIndex+1); 
Jelse{ 
fileName=filePath; 
js 
if(fm.getSizeO>maxsize){ 
message=" 文 件 太 大 了 ， 不 要 超过 2MB"; 
break: 
} 
if((fileName—nulDIl( fileName.equals(""))&&(fm.getSizeQ—0){ 
message=" 文 件 名 不 能 为 空 ， 文 件 大 小 也 不 能 为 零 ! "; 
break: 
} 
File saveFile=new File(uploadPath, fileName); 
fim.write(saveFile); // 向 文件 中 写 入 数据 
message=" 文 件 上 传 成 功 !"; 
} 
} 
}catch(Exception ex){ 
ex.printStackTrace(): 


: 
Tequest.setAttribute("result".message); 
Tequest.getRequestDispatcher("message.jsp").forward(request. response): 


| 
国 秘笈 心 法 

使 用 Commons-fileUpload 组 件 时 ， 在 表单 页 面 每 一 个 元 素 的 属性 中 都 要 写 好 name 这 个 属性 ， 和 否则 
commons-fileUpload 组 件 是 不 做 处 理 的 。 


Upload 组 件 获取 其 他 表单 元 素 


实用 指数 : 但 食 食 从 


图 实例 说 明 
本 实例 实现 了 获取 表单 的 元 素 值 的 操作 。 由 于 将 表单 的 属性 enctype 设置 成 multiparVform-data， 这 样 通过 
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Tequest 对 象 的 getParameter() 方 法 就 无 法 获取 ,所 以 要 做 特别 的 处 理 。 本 实例 将 介绍 如 何 应 用 commons-fileUpload 
组 件 获 取 其 他 表单 元 素 ， 实 例 运行 效果 如 图 11.37 所 示 。 


【应 用 commons-fileUpload 萄 取 其 他 表单 元 素 】 


上 传情 况 : 文件 上 传 成 功 ! 
选择 文件 : C:\Wsers\lh\Desktop's [是 
文件 描述 : Strats2 大 助 文档 。 文件 握 述 : Stmuts2 帮 助 文档 
上 传 时 间 : 2010-06-07 
开始 上 传 上 传 时 间 : 2010.08.07 


图 11.37 使 用 commons-fileUpload 组 件 实现 获取 表单 元 素 
图 关键 技术 


commons-fileUpload 组 件 在 进行 表单 处 理 时 ， 需 要 使 用 ServletFileUpload 类 的 parseRequest(request) 方 法 获 
取 上 传 文件 的 List 集合 ， 然 后 使 用 isFormFile0 方 法 判断 是 普通 的 表单 属性 还 是 一 个 文件 ， 如 果 是 普通 的 表单 属 
性 ， 则 可 以 通过 以 下 方法 获取 表单 元 素 : 

fileItem. getFieldName(); 

功能 : 获取 表单 元 素 的 名 称 ， 返 回 值 为 String 类 型 。 

获取 表单 元 素 的 值 可 以 应 用 FileItem 对 象 的 getString0 方 法 。 在 通过 getString0 方 法 获取 表单 元 素 的 值 时 ， 
为 了 避免 出 现 乱码 ， 可 以 设置 值 的 编码 格式 ， 代 码 如 下 : 

人 

user = fileItem.getString("UTF-8"); 


图 设计 过 程 


(1) 创建 indexjsp 页 ， 在 页 面 中 添加 一 个 文件 上 传 的 表单 ， 并 且 在 表单 中 添加 关于 文件 描述 的 属性 信息 ， 
具体 代码 如 下 : 
<body> 
<%! 
Date now=new Date(); 
String form=String.format("%tF",now); 


<form method="post"action="upload" enctype="multipart/form-data”> 
<p> 上 传 的 文件 是 ，( 文 件 大 小 不 要 超过 2MB)<br> 
<input type="file” name="file1" size="50"><br> 
<p> 文 件 描述 
<input type="text” name="upDe" size="50"><br> 
<p> 上 传 时 间 
<input type="text" name="uptime” size="50" value=<%=form%>><br> 
<input type="submit” value=" 存 净 > 

</form> 


<body> 

(2) 创建 处 理 上 传 文件 请 求 的 Servlet 实现 类 。 在 Servlet 类 的 doPost0 方 法 中 ， 从 请 求 中 获取 上 传 文件 的 
List 集合 ， 然 后 迭代 集合 中 的 元 素 ， 判 断 元 素 是 普通 表单 项 还 是 文件 ， 如 果 是 文件 则 保存 到 服务 器 指定 目录 下 ， 
如 果 是 普通 表单 元 素 ， 则 获取 表单 元 素 的 值 并 保存 到 request 对 象 域 中 。doPost0 方 法 的 具体 代码 如 下 : 


public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 

String uploadPath=this. getServletContext(|.getRealPath("/"); /证 义 了 全 文件 的 地 直 

String message=null.content=null.dtme=null: 

try{ 

if(ServletFileUpload isMultipartContent(request)){ // 判 断 获 取 的 是 否 是 文件 

DiskFileItemFactory disk=new DiskFileItemFactory(); 
disk.setSizeThreshold(20*1024):; /设置 内 存 可 存 字 节 数 
disk.setRepository(disk.getRepositoryO): // 设 置 临时 文件 目录 
ServletFileUpload up=new ServletFileUpload(disk); 
int maxsize=2*1024*1024:; 
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List list=up.parseRequest(request); /获取 上 传 列表 
Tterator i=listiteratorO: /创建 列表 的 迭代 器 
while(ihasNextO){ 
FileItem fim=(FileItem)i.next|: /遍历 列表 
if(!fim isFormFieldO){ 
String filePath = fileItem_getName0: /获取 文件 全 路 径 名 
String fileName=""; 
int startIndex = filePath.lastIndexOf("\"); 
if(startIndex!—1){ // 对 文件 名 进行 截取 
fileName = filePath.substring(startIndex+1); 
yelse{ 
fileName=filePath: 
} 
if(fm.getSize)>maxsize){ 
message=" 文 件 太 大 了 ， 不 要 超过 2MB"; 
break: 


} 

String fileSize=new Long(fim getSize|).toStringO; 

if((fileName —nulD|l( fileName.equals(""))&-&(fileSize.equals("0"){ 
message=" 文 件 名 不 能 为 空 ， 文 件 大 小 也 不 能 为 零 !"; 
break: 

saveFile=new File(uploadPath, fileName); 

fim.write(saveFile); /向 文件 中 写 入 数据 

message=" 文 件 上 传 成 功 !"; 


else{ 
String foename=fm.getFieldName0: 。“” /获取 表单 元 素 名 
String con=fim.getString("gbk"); // 获 取 表 单 内 容 ， 注 意 编码 方式 
/表单 元 素 
if(foename.equals("upDe")){ 
content = con; 
} 


else if(foename.equals("uptime") { 
dtme = con: 
} 


¥ 
} 
catch(Exception ex){ 
ex.printStackTrace(); 
} 


Tequest.setAttribute("result".message); 

Tequest.setAttribute("upDe",content); 

Tequest.setAttribute("dtme",dtme); 

Tequest.getRequestDispatcher("message.jsp").forward(request, response); 
} 


(3) 创建 message.jsp 页 ， 在 该 页 中 获取 并 显示 所 有 表单 中 的 元 素 内 容 ， 具 体 代码 如 下 : 
<body> 
<table border=1> 
<tr><td> 上 传情 况 ，</td><td> 
<%=request.getAttribute("result")%6></td></tr> 
<tr><td> 上 传情 况 : </td><td> 
<%=request.getAttribute("upDe")%></td></tr> 
<tr><td> 上 传 时间 : </td><td> 
<%=request.getAttribute("dtme")%></td></tr> 
</table> 
</body> 


国 秘笈 心 法 


对 于 FileItem 对 象 的 getString0 方 法 有 两 种 重 载 方式 : 第 一 种 是 无 参 的 ， 编 码 方式 是 系统 默认 的 ; 第 二 种 是 


有 参 的， 参数 就 是 定义 的 编码 方式 ， 如 UTF-8、GBK 等 。 为 了 避免 获取 请 求 数据 时 出 现 中 文 乱 码 ， 可 以 应 用 设 
置 编码 格式 的 getString0 方 法 。 
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Upload 组 件 限制 上 传 文件 类 型 。 ”高 级 


实例 287 | 
实用 指 浆 : 友 妇 克 安 


图 实例 说 明 

如 果 上 传 文件 的 类 型 是 可 执行 文件 ， 可 能 对 服务 器 造成 安全 隐患 ， 因 此 需要 对 上 传 文件 的 类 型 进行 限制 。 
本 实例 将 介绍 如 何 应 用 commons-fileUpload 组 件 限 制 上 传 文件 的 类 型， 实例 运行 效果 如 图 11.38 所 示 ， 当 上 传 
文件 类 型 为 *.exe、*jsp 或 *.bat 时 ， 将 弹出 禁止 上 传 的 提示 信息 。 


来 自 网 页 的 消息 一 一 


【应 用 commons-fileUpload 限 制 上 车 文件 类 型 ] 


| 
选择 文件 :livDvsktopvitai exe [EEC A Mite ee "jp、 "ba 改作 


图 11.38 ”通过 commons-fileUpload 组 件 限制 上 传 文件 类 型 


图 关键 技术 

本 实例 主要 应 用 的 是 commons-io 组 件 中 org.apache.commons.io.filefilter 包 中 的 SuffixFileFilter 类 ， 该 类 主 
要 用 于 过 滤 文 件 的 后 级 名 ， 也 就 是 过 滤 文 件 类 型 。SuffixFileFilter 类 实现 自 java.io.FileFilter 接口 ,该 类 的 方法 及 
说 明 如 表 11.8 所 示 。 


表 11.8 SuffixFileFilter 类 的 常用 方法 及 说 明 


法 ， 参 数 suffix 表示 要 过 滤 的 文件 后 级 字符 串 
法 ， 参 数 suffixes 表示 要 过 滤 的 文件 后 缀 字符 串 数组 
法 ， 参 数 suffixes 表示 要 过 滤 的 文件 后 缀 字符 串 集合 
过 滤 方 法 ， 参 数 file 表示 要 进行 过 滤 的 文件 对 象 。 如 果 file 对 象 的 文件 类 型 与 构 
造 方法 中 指定 的 字符 串 suffix、 字 符 串 数组 suffixes 或 集合 suffixes 表示 的 后 级 相 
同 ， 返 回 tmue， 和 否则 返回 false 


ublic SuffixFileFilter(Strin! 
ublic SuffixFileFilter(List suffixes, 


public boolean accept(File file) 


图 设计 过 程 

创建 处 理 上 传 文件 请 求 的 Servlet 实现 类 。 在 Servlet 类 的 doPost0 方 法 中 ， 从 请 求 中 获取 上 传 文件 的 List 集 
合 ,然后 应 用 文件 后 级 过 滤器 类 SuffixFileFilter 对 上 传 文件 的 类 型 进行 过 滤 , 如 果 上 传 文件 的 类 型 为 *.exe、*.bat 
或 *jsp， 则 禁止 上 传 。doPost0 方 法 的 具体 代码 如 下 : 


Public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException. IOException { 
String uploadPath = this.getServletContextO.getRealPath("/")+"upload": /定义 上 传 文件 的 服务 器 路 径 
File uploadFolder = new File(uploadPath): 1/ 根据 该 路 径 创 建 File 对 象 
if(!uploadFolder.exists()) 1/ 如果 路 径 不 存在 ， 则 创建 
UploadFoldermkdirsO: 
String message= "文件 上 传 成 功 ! " 
try{ 


if(ServietFileUpload isMultipartContent(request){ 
DiskFileItemFactory factory = new DiskFileItemFactory0: 。” // 创 建 磁盘 工厂 ， 用 来 配置 上 传 组 件 ServletFileUpload 


factory.setSizeThreshold(20*1024); /设置 内 存 中 允许 存储 的 字 节 数 
factory.setRepository(factory.getRepositoryO):; /设置 存放 临时 文件 的 目录 
ServletFileUpload upload = new ServletFileUpload(factory): /创建 新 的 上 传 文件 句柄 

int maxSize = 5+1024*+1024: /定义 上 传 文件 的 大 小 
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List<FileItem> files = upload.parseRequest(request): /从 请 求 中 得 到 所 有 上 传 域 列 表 
String[] suffixs =new String[]{".exe",”".bat",".jsp"}; /定义 限制 上 传 的 文件 类 型 的 字符 串 数 组 
SuffixFileFilter filter = new SuffixFileFilter(suffixs): 1/ 创建 文件 后 缀 过 滤器 
for(FileItem fileItemzfiles){f /1/ 遍 历 上 传 文件 集合 
if(!fileltem isFormFieldO) { // 忽 略 其 他 不 是 文件 域 的 所 有 表单 信息 
String name = fileltem. getName(); 
String filePath = fim. getName(): // 获 取 文 件 全 路 径 名 
String fileName="": 
int startIndex = filePath lastIndexOf("\"); 
if(startIndex!=1){ /对 文件 名 进行 截取 
fileName = filePath.substring(startIndex+1); 
Jelse{ 
fileName=filePath; 
} 
if(fileltem.getSizeO>maxSize){ /限制 文件 大 小 
message = "上 传 文件 不 得 超过 SMB! "; 
break: 
} 
if((fileName 一 nulD | fileName.equals(""))&&(fileItem.getSizeQ—0)) 
continue: 
File file = mew File(uploadPath, fileName); 。 “”// 在 上 传 路 径 中 创建 文件 对 象 
boolean res = filter.accept(file); // 调 用 文件 后 缀 过 滤器 的 过 滤 方 法 ， 对 上 传 文件 类 型 进行 过 滤 
if(res){ 
message = "禁止 上 传 *.exe、*.jsp、*.bat 文件 ! "; 
break: 
yelse{ 
fileItem. write(file); /向 文件 写 数据 
} 
} 
} 
。 
catch(Exception ex){ 
ex.printStackTraceO; 
} 
Tequest.setAttribute("result", message); // 将 提示 信息 保存 在 request 对 象 中 
Tequest.getRequestDispatcher("index.jsp").forward(request, response): 
国 秘笈 心 法 


在 org.apache.commons.io.filefilter 包 中 ， 还 包含 很 多 文件 过 滤器 类 ， 如 SizeFileFilter (文件 大 小 过 滤器 )、 
PrefixFileFilter (文件 名 前 级 过 滤器 )、CanReadFileFilter (只 读 文件 过 滤器 ) 等 ， 这 些 过 滤器 都 实现 了 
java.io .FileFilter 接口 。 如 果 需 要 对 文件 的 其 他 属性 进行 过 滤 ， 可 以 应 用 这 些 过 滤器 来 处 理 。 


11.4 文件 下 载 
在 互联 网 中 基本 可 以 查询 到 所 有 想 要 的 资料 ， 有 些 资料 信息 会 非常 庞大 ， 如 游戏 、 电 影 、 音 乐 、 软 件 等 ， 


它们 从 几 十 兆 的 字 节 到 几 百 兆 的 字 节 不 等 ， 这 就 需要 将 文件 下 载 到 本 地 并 保存 。 下 面 通过 几 个 实例 介绍 实现 文 
件 下 载 的 功能 。 


实例 288 


国 实例 说 明 


目前 在 很 多 网 站 中 都 提供 影视 信息 和 常用 软件 的 下 载 ， 为 用 户 提供 帮助 的 同时 达到 吸引 用 户 、 增 加 访问 量 
的 目的 。 本 实例 将 介绍 如 何 应 用 响应 流 来 实现 文件 下 载 。 运 行 本 实例 ， 单 击 要 下 载 文件 的 下 载 图 标 ， 即 可 弹出 
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“文件 下 载 ” 对 话 框 ， 如 图 11.39 所 示 ， 单 击 “ 保 存 ” 按 钮 即 可 将 文件 保存 到 指定 位 置 。 
和 


di 
应 用 OutputStream 对 象 实现 文件 下 载 
SS -二 2 
标题 上 伟人 上 fs 后 文件 大 小 T 莹 
二 E33 zo 和 3 月 2 日 sm 本 


SDscooltsjpg 
加 p56 图 全 Sol 
RR localhot 


打开 0) CS] CR 


各 站 乓 证 


图 11.39 ”利用 响应 输出 流 实现 文件 下 载 


图 关键 技术 
本 实例 主要 通过 设置 响应 头 信息 和 输出 流 来 实现 。 在 JSP 中 设置 响应 头 信 息 时 ， 使 用 的 是 JSP 内 置 对 象 
response 对 象 的 addHeader0 方 法 ， 该 方法 的 语法 格式 如 下 : 
Tesponse.addHeader(String head,String value) 
参数 说 明 
@ head: 指定 响应 头 的 属性 名 称 ， 如 内 容 类 型 、 内 容 长 度 等 。 
@ value: 指定 属性 名 称 对 应 的 属性 值 。 
图 设计 过 程 
(1) 创建 index.jsp 页 ， 在 页 面 中 添加 一 个 文件 下 载 的 超 链接 。 此 时 需要 通过 ServletContext 对 象 的 
getRealPath0 方 法 获得 文件 在 服务 器 上 的 真实 路 径 ， 关 键 代码 如 下 : 
S <div align="center "> 
<A HREF="download jsp ?path=<%=getServietContextO.getRealPath("DSC00143.jpg") 96>"> 
<img sre="images/download. GIF" width="22" height="22” border="0"> 
< 
有 
<htd> 
(2) 创建 download.jsp 页 ， 在 该 页 中 实现 文件 下 载 功 能 。 根 据 indexjsp 页 利用 超 链接 提交 过 来 的 请 求 路 径 
信息 ， 创 建 File 文件 对 象 ， 然 后 将 响应 头 设置 为 文件 下 载 格式 ， 再 通过 ServletOutputStream 输出 流 将 文件 以 流 


的 方式 输出 ， 关 键 代码 如 下 : 
page language="java" import="java.util. *java.io.+" pageEncoding="GBK"%> 


response.setCharacterEncoding("utf-8"); // 设 置 响应 编码 格式 

String path=request.getParameter("path"): /获取 请 求 参数 的 值 ， 该 参数 为 文件 的 服务 器 路 径 
path=new String(path.getBytes("iso-8859-1")); 

File file = new File(path): // 根 据 文件 路 径 创建 File 对 象 

InputStream in = new FileInputStream(file); // 创 建文 件 输入 流 ， 读 取 文件 内 容 

OutputStream os = response.getOutputStream(); /获取 响应 输出 流 

/设置 响应 头 


Tesponse.addHeader("Content-Disposition". "attachment:filename="+ new String(file.getName().getBytes("gbk")."iso-8859-1")): 
response.addHeader("Content-Length". filelengthO + ""); 
response.setContentType("application/octet-stream"); /设置 响应 正文 类 型 


int data = 0; 
while ((data=inread0) = -1) { /从 文件 流 中 循环 读 取 字 节 
os -write(data): /输出 字 节 流 


} 
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os.close0O: 
in.closeO: 


%> 


国 秘笈 心 法 

在 获得 参数 path( 即 文件 的 路 径 信息 ) 时 ， 将 编码 转换 成 GBK 编码 以 支持 中 文 的 文件 名 和 路 径 。 在 设置 响 
应 头 中 的 文件 名 称 时 , 需要 将 文件 名 再 从 GBK 转换 为 ISO-8859-1, 这 样 在 浏览 器 的 下 载 窗口 中 才 会 提示 中 文 的 
文件 名 。 


图 实例 说 明 

网 站 文件 盗 链 下载 是 指 未 经 允许 而 私自 将 其 他 网 站 中 的 一 些 资源 的 链接 地 址 (如 文章 、 图 片 、 音 乐 、 软 件 
等 地 址 ) 嵌入 在 自己 的 网 站 中 ， 从 而 不 必 将 这 些 资源 上 传 到 自己 的 空间 中 仍 可 以 提供 给 用 户 浏览 和 下 载 。 资 链 
可 能 导致 被 次 链 网 站 的 服务 器 因 访问 的 人 数 过 多 而 瘫痪 。 本 实例 将 介绍 一 种 防止 网 站 文件 被 次 链 下 载 的 方法 ， 
运行 本 实例 ， 如 图 11.40 所 示 ， 如 果 网 站 被 盗 链 ， 当 单 击 盗 链 的 超 链接 下 载 文 件 时 将 弹出 错误 提示 信息 。 


[nr 


上 传 时 间 


昌 。 对 下 要， 户 G 间 录 下 确 的 网 站 进行 下 残 
2010 年 ?月 30 晶 洗 


2010 年 月 30 日 


2010 年 7 月 30 昌 


图 11.40 防止 网 站 文件 盗 链 下 载 


图 关键 技术 


防止 网 站 文件 盗 链 下 载 主要 应 用 的 是 request 对 象 中 的 getHeader0 方 法 , 获取 请 求 中 referer 字段 的 值 ， 该 字 
段 中 记录 了 当前 请 求 的 上 一 次 访问 的 地 址 。 本 实例 就 是 通过 这 个 值 来 判断 当前 的 请 求 是 否 是 从 其 他 网 站 中 触发 
的 ， 从 而 做 出 相应 的 处 理 。getHeader0 方 法 的 语法 如 下 : 

Ppublic String getHeader(String name) 

功能 : 返回 HTTP 请 求 头 部 的 特定 项 。 如 果 没 有 指定 的 请 求 头 参数 ， 则 返回 null。 

参数 说 明 

name: 指定 请 求 头 的 参数 名 。 


图 设计 过 程 
(1) 创建 index.jsp 页 ， 为 存储 在 服务 器 指定 文件 夹 下 的 文件 设置 下 载 超 链接 ， 链 接 到 download.jsp 文件 ， 
在 该 文件 中 完成 下 载 。 其 中 主要 应 用 getServletContext0 方 法 和 getRealPath0 方 法 ， 关 键 代码 如 下 : 
<td><div align="center”> 
<A HREF="downloadjsp?path=<%=getServletContext0.getRealPath(" 测 试图 片 jpe") %>"> 
<img sre="images/download.GIF” width="22" height="22" border="0"></A> 
< 
(2) 创建 downloadjsp 文件 完成 下 载 ， 并 应 用 request 请 求 中 的 getHeader0 方 法 获取 请 求 中 字段 referer 的 
值 ， 通 过 判断 referer 字段 中 记录 的 当前 请 求 的 上 一 次 访问 的 地 址 与 指定 的 地 址 是 否 相同 ， 从 而 判断 出 是 否 是 盗 
链 ， 然 后 再 进行 相应 的 处 理 ， 关 键 代码 如 下 : 
2 page language—"ava” import="java.util. +java.io.+"” pageEncoding—"GBK"> 


String from request.getHeader("referer"): /获取 当 前 请 求 的 上 一 次 访问 的 地 址 
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// 判 断 当前 请 求 的 上 一 次 访问 的 地 址 与 指定 的 地 址 是 否 相同 
if (from 一 null) | (from indexOf("localhost:8080/262/") < 0)) { 
out.print("<script>alert( 对 不 起 ， 请 您 登录 正确 的 网 站 进行 下 载 ! ");window.location.href~'http://localhost:8080/262':</script>"); 
jelsef 
Tesponse.setCharacterEncoding("utf-8"): 


String path=request.getParameter("path"); 
*…// 此 处 文件 下 载 的 相关 代码 与 实例 288 相同 
} 
%> 
(3) 为 了 更 好 地 模拟 如 何 防止 网 站 被 盗 链 下 载 , 这 里 又 单独 创建 了 一 个 实例 ,在 该 实例 中 只 包含 一 个 testjsp 


文件 ， 在 该 文件 中 实现 对 本 实例 的 下 载 地 址 进行 资 链 ， 关 键 代码 如 下 : 
<a href="htip:/ocalhost:8080/262/downloaqdjsp?path=http:/ocalhost:8080/262/ 测 旗 膨 片 jpg"> 下 载 地 址 1 <Ja> 


国 秘笈 心 法 


如 果 不 知 道 getHeader0 方 法 中 的 请 求 头 参数 该 如 何 写 , 可 以 通过 getHeaderNames0 方 法 返回 一 个 Enumeration 对 
象 ， 它 包含 了 HTTP 请 求 头 部 的 所 有 项 目 名 。 


实例 290 


国 实例 说 明 

实例 288 和 289 实现 了 文件 下 载 ， 在 用 户 单 击 文件 下 载 超 链接 时 ， 就 会 发 现 文件 在 服务 器 的 真实 路 径 ， 这 
样 暴露 了 服务 器 的 文件 路 径 ， 可 能 会 造成 安全 隐患 。 本 实例 将 介绍 在 文件 下 载 时 隐藏 文件 在 服务 器 上 的 真实 路 
径 ， 只 显示 文件 的 虚拟 路 径 。 运 行 本 实例 ， 如 图 11.41 所 示 ， 当 鼠标 经 过 下 载 链接 处 时 ， 在 浏览 器 的 状态 栏 只 
显示 文件 在 服务 器 上 的 虚拟 路 径 ， 而 非 真实 路 径 。 
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20)0 征 月 320 日 


20)0 年 T 月 20 日 
2010 年 1 月 20 日 


图 11.41 隐藏 文件 下 载 的 真实 路 径 


图 关键 技术 


本 实例 在 文件 下 载 超 链 接 处 获取 文件 的 虚拟 路 径 主 要 是 通过 JSP 内 置 对 象 request 来 完成 的 。 在 JSP 中 ,可 
以 应 用 request 对 象 获 取 服 务 器 的 相关 信息 。 本 实例 在 构建 文件 虚拟 路 径 时 用 到 了 以 下 几 个 方法 。 
getScheme0: 返回 客户 端 与 服务 器 端 通信 所 用 的 协议 名 称 。 
getServerName(0: 返回 服务 器 的 主机 名 。 
getServerPort0: 返回 服务 器 的 端口 号 。 
getContextPath0: 返 回 客户 端 所 请 求 的 Web 应 用 的 URL 入 口 。 例 如 ,客户 端 访问 URL 为 http://localhost: 
8080/test/index.jsp， 那 么 该 方法 返回 值 为 “/test”。 


力 设计 过 程 
(1) 创建 indexjsp 页 ,为 存储 在 服务 器 指定 文件 夹 下 的 文件 设置 下 载 超 链接 ,链接 形式 为 文件 在 服务 器 中 
的 虚拟 路 径 ， 链 接 到 downloadjsp 处 理 页 中 ， 关 键 代码 如 下 : 
<% 


String path = request.getContextPathO: 


口 口 口 口 
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String basePath = request.getScheme()+"://"trequest.getServerName()+":"+request.getServerPortQ+path+"/"; 
<A HREF="downloadjsp?path=<%=basePath+" 测 试图 片 jpe"9%6> 人 > 
(2) 创建 downloadjsp 文件 下 载 处 理 页 。 在 该 页 的 请 求 中 获取 文件 虚拟 路 径 , 然后 截取 文件 的 名 称 字符 串 ， 
再 根据 文件 名 称 隐藏 服务 器 的 真实 路 径 创建 File 对 象 ， 实 现 文件 下 载 功能 ， 关 键 代码 如 下 : 
<% 


Tesponse.setCharacterEncoding("utf-8"); // 设 置 响应 编码 

String path=request.getParameter("path"); /夺取 文件 虚拟 路 径 
path=new String(path.getBytes("iso-8859-1")); 

String realPath = application.getRealPath(™); /获取 Web 服务 器 目录 
String fileName = path.substring(path.lastIndexOf("/")):// 从 虚拟 路 径 中 截取 文件 名 
File file = new File(realPath.fileName); 1/ 创建 File 对象 
InputStream in = new FileInputStream(file); // 创 建文 件 输入 流 
OutputStream os = response.getOutputStream(); /获取 响应 打印 输出 流 
/设置 响应 头 


response.addHeader("Content-Disposition", "attachment:filename="+ new String(file.getName( .getBytes("gbk"),"iso-8859-1")); 
Tesponse.addHeader("Content-Length", file.lengthO + ""); 
.SetContentType("application/octet-stream"); 
int data =0; 
while ((data =inreadO) (=-1) { /从 输入 流 中 读 取 文件 字 节 
os.write(data); /| 输出 字 节 到 响应 流 
} 


os.close0; 
in.close0; 


%> 
图 秘笈 心 法 

在 实现 文件 下 载 处 理 时 ， 还 是 需要 获取 文件 在 服务 器 中 的 真实 路 径 才 可 以 下 载 文件 ， 只 是 本 实例 没有 在 超 
链接 处 直接 暴露 文件 在 服务 器 的 真实 路 径 ， 获 取 文 件 的 真实 路 径 是 在 服务 器 端 处 理 页 中 完成 的 。 


实例 | 
实例 291 实用 指数 : 去 太 本 人 


图 实例 说 明 


应 用 开源 的 jspSmartUpload 组 件 不 仅 可 以 实现 文件 上 传 功能 ， 而 且 还 可 以 实现 文件 的 下 载 功 能 ， 应 用 该 组 
件 中 提供 的 方法 ， 可 以 轻松 地 实现 文件 下 载 功 能 。 本 实例 将 介绍 如 何 应 用 jspSmartUpload 组 件 实现 文件 下 载 。 
运行 本 实例 ， 如 图 11.42 所 示 ， 单 击 下 载 链 接 后 ， 浏 览 器 将 弹出 文件 下 载 的 另存 为 提示 框 。 


应 用 jpgmaortupload 实 现 文件 下 载 


上 人 同 了 放大 小 
EP En 
osi 有 zxE 


ET 


ETE | 


局 二 


11.42 ”应 用 jspSmartUpload 组 件 实现 文件 下 载 
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图 关键 技术 


本 实例 主要 应 用 jspSmartUpload 组 件 中 的 SmartUpload 类 来 实现 文件 下 载 ， 该 类 是 文件 上 传 下 载 的 核心 类 ， 
应 用 该 类 中 的 相应 方法 可 以 实现 文件 下 载 功能 。SmartUpload 类 中 用 于 文件 下 载 的 相关 方法 如 表 11.9 所 示 。 


表 11.9 SmartUpload 类 的 文件 下 载 相关 方法 


作 用 
用 于 执行 上 传 下 载 的 初始 化 操作 ， 在 调用 上 传 下 载 方法 之 前 ， 必 须 先 调 
用 该 方法 进行 初始 化 。 该 方法 用 于 在 JSP 页 中 处 理 文件 下 载 时 调用 ， 参 
数 pageContext 为 JSP 内 置 对 象 
文件 下 载 方法 ， 参 数 为 文件 的 包含 路 径 的 全 名 称 
文件 下 载 的 重 载 方法 ， 参 数 sourceFileName 指 下 载 的 源 文件 名 称 ， 
contentType 指 MIME 格式 的 文件 类 型 
文件 下 载 的 重 载 方法 ， 参 数 sourceFileName 指 下 载 的 源 文件 名 称 ， 
contentType 指 MIME 格式 的 文件 类 型 , destFileName 指 下 载 后 默认 的 另 
存 文件 名 
将 数据 追加 到 mime 文件 头 的 content-disposition 域 。jspSmartUpload 组 
件 会 在 返回 下 载 的 信息 时 自动 填写 mime 文件 头 的 content-disposition 
域 ， 如 果 用 户 需 要 添加 额外 信息 ， 请 用 此 方法 


initialize(Pagecontext pageContext) 


downloadFile(String sourceFileName) 
downloadFile(String sourceFileName.String 
contentType) 


downloadFile(String sourceFileName.String 
contentType.String destFileName) 


setContentDisposition(String contentDisposition) 


(1) 创建 ndexjsp 页 ,为 存储 在 服务 器 指定 文件 夹 下 的 文件 设置 下 载 超 链接 ,链接 形式 为 文件 在 服务 器 中 
的 虚拟 路 径 ， 链 接 到 download.jsp 处 理 页 中 。 
(2) 创建 download.jsp 文件 下 载 处 理 页 。 在 该 页 的 请 求 中 获取 文件 虚拟 路 径 , 然后 截取 文件 的 名 称 字符 串 ， 
再 应 用 jspSmartUpload 组 件 实 现 文 件 下 载 功 能 ， 关 键 代码 如 下 : 
2 import="com.jspsmart.upload.*" %> 


String from = request.getHeader("referer"); // 获 取 当前 请 求 的 上 一 次 访问 的 地 址 
/判断 当前 请 求 的 上 一 次 访问 的 地 址 与 指定 的 地 址 是 否 相同 
if (from 一 null) | (from indexOf("localhost:8080/264/") < 0)) { 
out.print("<script>alert( 对 不 起 ， 请 您 登录 正确 的 网 站 进行 下 载 ! ):window.location.href='http://localhost:8080/264':</script>"); 
jelse{ 
Tesponse.setCharacterEncoding("utf-8"): 
String path=request getParameter("path"): 
path=new String(path.getBytes("iso-8859-1")); 
String fileName = path.substring(path.lastIndexOf("/")); 


SmartUpload su = new SmartUploadO:; /| 新建 一 个 SmartUpload 对 象 
stLinitialize(pageContext): /初始 化 准备 操作 
su.setContentDisposition(null): // 设 定 contentDisposition 为 null 以 禁止 浏览 器 自动 打开 文件 
su.downloadFile(fileName); /下 载 文件 
} 
%> 
图 秘笈 心 法 


本 实例 在 实现 文件 下 载 时 调用 SmartUpload 中 的 setContentDisposition0 方 法 ， 并 设置 参数 为 null， 如 果 
contentDisposition 为 null， 则 组 件 将 自动 添加 “"attachment'"”， 以 表明 将 下 载 的 文件 作为 附件 ， 结 果 是 正 浏览 
器 将 会 提示 另存 文件 ， 而 不 是 自动 打开 这 个 文件 。 当 下 载 文件 为 doc 或 pdf 文件 时 ， 如 果 不 设置 为 null, 正 浏 
览 器 会 调用 程序 打开 这 两 种 格式 的 文件 。 
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国 实例 说 明 

在 实例 291 中 应 用 jspSmartUpload 组 件 实现 文件 下 载 时 ， 文 件 下 载 的 另存 文件 名 存在 乱码 问题 ， 这 是 该 组 
件 存在 的 一 个 问题 。 本 实例 将 介绍 如 何 处 理 在 应 用 jspSmartUpload 组 件 下 载 文件 时 的 文件 名 乱码 问题 ， 运 行 本 
实例 ， 如 图 11.43 所 示 ， 在 单 击 文件 下 载 的 超 链接 后 ， 弹 出 的 文件 下 载 另存 为 提示 框 中 的 文件 名 没有 出 现 乱码 
问题 。 


处 悍 jvpgmartUpload 文 件 名 乱码 问题 
标量 上 共和 上 全 Eo 


文件 F 枉 


您 趣 打 开 或 保存 此 文件 四? 


名 称 : 测试 图 片 jpg 
和 关 型 JPEG 图像 501KB 
| 


亲 拓 localho 民 
3 


i 


图 11.43 处理 jspSmartUpload 组 件 实现 文件 下 载 时 的 文件 名 乱码 
图 关键 技术 


jspSmartUpload 组 件 没有 对 中 文 进行 处 理 ， 如 果 希 望 该 组 件 支持 中 文 ， 需 要 对 该 组 件 的 源 代码 进行 改进 。 
但 是 由 于 其 官网 wwwjspsmart.com 目前 已 经 停 用 ， 所 以 暂时 没有 jspSmartUpload 组 件 的 源码 文件 ， 不 过 可 以 利 
用 Java 反 编 译 工具 将 jar 包 进 行 反 编译 ， 然 后 就 可 以 修改 其 源 代码 。 在 组 件 的 源码 中 ， 只 要 将 文件 名 参数 进行 
UTF-8 编码 转换 后 即 可 解决 乱码 问题 。 


图 设计 过 程 
(1) 在 jspSmartUpload 组 件 的 src 源 文件 中 找到 SmartUpload 类 ， 在 该 类 中 编写 字符 串 进行 UTF-8 编码 转 
换 的 方法 toUtf8String0， 参 数 str 表示 要 转换 的 字符 串 ， 具 体 代码 如 下 : 


public static String toUtf8String(String str) { 


StringBuffer sb = new StringBuffer0O: /创建 StringBuffer 对 象 ， 用 于 保存 编码 后 的 字符 串 
for (int i=0;i<str.lengthO:i++) { /遍历 字符 串 中 每 一 个 字符 
char c = str.charAt(i); 
if(c>—=0&&c<=255) { // 字 符 在 0~255 之 间 的 
sb.append(c): 
} else { /字符 大 于 255 的 
ee bytes: 
try 
bytes = Character.toString(c).getBytes("utf-8"); // 将 字符 转换 为 字 节 数组 
} cateh (Exception ex) { 
ex.printStack Trace(); 
bytes = new byte[O]; 
for (intj = 0;j < bytes.length; j+H { /循环 字 节 数组 
intk= bytes[j]: 
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(kK<0) 
k1+=256; 
sb.append("%" + Integer.toHexString(k).toUpperCase0):// 将 字 节 转换 为 十 六 进 制 字符 串 


DD 
} 
return sb.toString0: 


} 
(2) 在 SmartUpload 类 的 文件 下 载 方法 downloadFile(String s,String sl,String s2,inti) 中 ， 在 获取 文件 名 处 调 
用 步骤 (1) 编写 的 字符 转换 方法 ， 关 键 代码 如 下 : 


public void downloadFile(String s, String s1. String s2. int i) throws ServletException, IOException. SmartUploadException{ 
这 (一 Du) 
throw new IllegalArgumentException("File "+s+w not found (1040)."); 
if(s.equals("™")) 
throw new IllegalArgumentException("File " + s+" not found (1040)."); 
if ((!isVirtual(s)) &c&c (this.m _denyPhysicalPath)) 
throw new SecurityException("Physical path is denied (1035)."); 
if (isVirtual(s)) 
s= this.m_application.getRealPath(s); 
javaio File file = new java.io.File(s); 
FileInputStream fileinputstream = new FileInputStream(file); 
long 1 = filelengthO: 
boolean flag = false; 
int k =0; 
byte[] abyte0 = new byte[i]; 
if(s1— nuD { 
this.m_response.setContentType("application/x-msdownload"); 


} 
else if (sl.length() — 0) 
this.m_response.setContentType("application/x-msdownload"); 
else 
this.m_response.setContentType(s1); 
this.m_response.setContentLength((int)D); 
this.m_contentDisposition = ((this.m_contentDisposition != null) ? this.m_contentDisposition : "attachment;"); 
if(s2C— nulD { 
/此 处 调用 字符 编码 转换 的 方法 
this.m_response.setHeader("Content-Disposition", this.m_contentDisposition + " filename=" + toUtf8String(getFileName(s))); 


} 
else if (s2.length| — 0) 
this.m_response.setHeader("Content-Disposition", this.m_contentDisposition); 
else 
this.m_response.setHeader("Content-Disposition", this.m_contentDisposition + " filename=" + toUtf8String(s2)); /调用 字符 编码 转换 的 方法 
while (k <)) 


{ 
intj = fileinputstream .read(abyte0. 0. D): 
t= 
this.m_response.getOutputStreamO write(abyte0. 0, j); 


} 
fileinputstream.closeO: 
} 


(3) 在 操作 系统 的 cmd.exe 命令 行 工 具 中 ， 运 行 jar 命令 将 修改 过 的 jspSmartUpload 组 件 源 代码 打包 成 jar 
文件 ， 然 后 将 jar 包 复 制 到 项 目的 WEB-INF/lib 目录 中 即 可 。 在 命令 行 中 为 文件 打包 的 命令 如 下 : 
jar cvf jspsmartupload zh _ CN.jar com 
图 秘笈 心 法 
读者 可 以 将 改进 过 的 jspSmartUpload 组 件 jar 包 保存 起 来 ， 在 其 他 项 目 中 应 用 时 ， 可 以 直接 应 用 此 处 理 中 
文 的 jar 包 。 
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WI 文件 的 批量 操作 
WH 文件 的 压缩 与 解压 缩 
MW 文件 的 批量 上 传 
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12.1 文件 的 批量 操作 


在 现实 应 用 中 ， 为 了 实现 更 高 的 操作 效率 ， 经 常 需要 批量 操作 文件 。 本 节 将 介绍 一 些 对 文件 批量 操作 比较 
基础 的 例子 ， 如 对 文件 的 批量 重 命名 、 删 除 文件 夹 中 所 有 文件 、 文 件 搜索 等 。 


实用 指数 : 食 宽 
国 实例 说 明 
Windows 操作 系统 可 以 实现 重 命名 文件 操作 ， 却 不 能 实现 批量 重 命名 。 本 实例 实现 了 批量 重 命名 功能 ， 可 
以 将 一 个 文件 夹 内 同一 类 型 的 文件 按照 一 定 的 规则 批量 重 命名 。 用 户 可 以 给 出 重 命名 模板 ， 程 序 将 根据 模板 对 


相应 的 文件 进行 重 命名 。 除 此 之 外 还 可 以 在 重 命名 模板 中 添加 特殊 符号 ， 程 序 会 将 这 些 特 殊 符 号 替换 成 重 命名 
后 的 文件 编号 ， 实 例 运 行 效果 如 图 12.1 所 示 。 


【文件 批量 重 命名 】 
文件 路 径 : DWata 
| 使 用 4 可 以 指定 数字 计数 所 占 的 位 置 ， 使 用 * 可 以 插入 源 文件 名 
文件 名 模板 ;test 
文件 扩展 名 :sql 


[开始 重 命名 | 重要 


新 文件 名 : 


test006 sql 
test007 sql 
test008 sql 
test009 sql 
test010 sql 


图 12.1 文件 批量 重 命名 
图 关键 技术 


本 实例 主要 应 用 了 String 字符 串 的 格式 化 方法 ， 该 方法 可 以 将 指定 对 象 按 特 定 的 格式 生成 字符 串 ， 本 实例 
格式 化 的 目的 是 为 新 文件 名 称 做 递增 编号 的 同时 保留 指定 位 数 的 0 前 导数 字 。 例 如 ，3 位 编号 的 1 应 该 为 001。 
字符 串 类 的 格式 化 方法 声明 如 下 : 

public static String format(String format, Object .args) 

功能 : 使 用 指定 的 格式 字符 串 和 参数 返回 一 个 格式 化 字符 串 。 

参数 说 明 

@ format: 格式 字符 串 。 

@ args: 格式 字符 串 中 由 格式 说 明 符 引用 的 参数 。 

例如 ， 以 下 代码 可 以 格式 化 并 返回 字符 串 photo025。 

String fileName = String.format("photo%04d", 25): 

图 设计 过 程 
(1) 创建 实现 java.io.FileFilter 接口 的 文件 过 滤器 类 ExtendNameFilter， 这 个 过 滤器 的 任务 是 只 允许 获取 指 
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定 扩展 名 的 文件 对 象 ， 它 将 被 应 用 到 遍历 文件 夹 所 有 文件 的 listFiles0 方 法 中 ， 关 键 代码 如 下 : 


public class ExtendNameFilter implements FileFilter { 
Private String extName: 
public ExtendNameFilter(String extName) { 
this.extName = extName; /保存 文件 扩展 名 
} 
@Override 
public boolean accept(File pathname) { 
证 (pathname.getName0.toUpperCaseO.endsWith(extName toUpperCase0)) 。“ // 过 滤 文 件 扩展 名 
Teturn true: 
return false; 
} 
} 


(2) 创建 工具 类 FileUtil， 在 该 类 中 实现 文件 的 批量 重 命名 。 该 类 包含 两 个 List 集合 类 型 的 成 员 变量 ， 用 
于 存储 文件 的 旧 文 件 名 和 重 命 名 之 后 的 新 文件 名 。FileUtil 类 的 关键 代码 如 下 : 


public class FileUtil { 
Private List<String> oldNameList = new ArrayList<String>(); /创建 List 集 合 ， 用 于 保存 所 有 旧 文 件 名 
Private List<String> newNameList = new ArrayList<String>(); /创建 List 集合 ， 用 于 保存 所 有 新 文件 名 
public List<String> getOldNameListO { 
return oldNameList: 


public List<String> getNewNameListO { 
return newNameL ist; 

* 文件 批量 重 命名 

*+ @param filePath 文件 路 径 

*+ @param templet 文件 命名 模板 

+ @param extName 文件 扩展 名 

public void renameFile(String filePath.String templet ,String extName){ 


File dir = new File(filePath); /根据 文件 路 径 创建 File 对 象 

int bi =1; // 起 始 编号 

int index = templet.indexOf("#"); // 获 取 第 一 个 “#” 的 索引 

String code = templet.substring(index); // 获 取 模 板 中 数字 占 位 字符 串 

templet = templet.replace(code, "%0" + codelengthO + "d"); // 把 模板 中 数字 占 位 字符 串 普 换 为 指定 格式 


extName = extName.toLowerCase(: 
if (extName.indexOf(".") — -1) 


1/ 获取 文件 夹 中 文件 列表 数组 

for (File file : files) { /变量 文件 数组 

String name = templet.format(templet, bi++) + extName; /格式 化 每 个 文件 名 称 

oldNameList.add(file.getName()): /将 旧 文 件 名 添加 到 List 集合 中 

newNameList.add(name); // 将 新 文件 名 添加 到 List 集 合 中 

File parentFile = file.getParentFileO: /获取 文件 所 在 文件 夹 对 象 

File newFile = new File(parentFile, name): 

filerenameTo(newFile): /文件 重 命名 


} 

} 

(3) 创建 index.jsp 页 ,在 本 页 中 获取 表单 的 请 求 信息 ,然后 调用 FileUtil 类 的 renameFile( 方 法 ， 实 现 文件 
批量 重 命名 ， 关 键 代 码 如 下 : 

<% 


Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 
String submit = request.getParameter("submit"): /获取 “开始 重 命 名 ”按钮 的 值 
String filePath = request.getParameter("filePath"): /获取 文件 路 径 
String tempStr = request.getParameter("tempStr"): /获取 文件 名 的 模板 
String extendName = request.getParameter("extendName"): /获取 文件 扩展 名 
FileUtil fileUtil = new FileUtil0: 
if(submit!=null) { 1/ 判断 是 否 提交 表单 
if(filePath!=null&-&!filePath.equals("")&-& 

tempStr!=null&&!tempStr.equals("")&-&- 

extendName!=null&&!extendName.equals("")){ // 判 断 是 否 为 空 

fileUtil. renameFile(filePath.tempStr.extendName): /1 调用 方法 将 文件 重 命名 
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} 


%> 
国 秘笈 心 法 

文件 的 名 称 以 不 同 的 后 组 来 区 分 其 类 别 ， 这 也 称 为 文件 的 扩展 名 ， 在 更 改 文件 名 称 时 不 要 忘记 把 扩展 名 也 
一 同 输入 ， 和 否则 如 果 软 件 没有 特殊 处 理 ， 可 能 会 把 文件 变 成 无 类 型 〈 即 没有 扩展 名 ) 的 文件 。 


2 | 


图 实例 说 明 

文件 移动 是 计算 机 资源 管 和 理 常 用 的 -个 操作 ， 这 在 操作 系统 中 可 以 通过 文件 的 前 切 与 复制 来 实现 ， 也 可 以 
通过 鼠标 的 拖 动 来 实现 。 但 是 在 Java 语言 的 编程 实现 中 ， 大 多 是 以 复制 文件 到 目的 地 ， 再 删除 原 有 文件 来 实现 
的 。 这 对 于 小 文件 来 说 看 不 出 什么 整 端 ， 但 是 如 果 移动 几 个 大 的 文件 就 会 看 出 操作 缓慢 并 且 浪 费 系统 资源 。 本 
实例 将 通过 File 类 的 API 方法 直接 实现 文件 的 快速 移动 ， 哪 怕 是 上 G 的 大 文件 也 不 会 造成 严重 延 时 ， 程 序 的 运 
行 结果 如 图 12.2 所 示 。 


快速 批量 移动 文件 ] 
源 文 件 路 径 : DimewData 
目标 文件 夫 : Eest 
jasper-jd=.jar 移动 到 5:\ 


操作 记录 : servlec-ap1.Jar 移动 到 E:\ces 
对 E:\ 


comcac-il8n-fr .jar 移动 到 E:\ces 
区 本 到] 王 于 


图 12.2 快速 批量 移动 文件 


图 关键 技术 


File 类 位 于 Java.io 类 包 中 ， 它 提供 了 多 种 获取 文件 属性 的 方法 ， 其 中 renameTo0 方 法 可 以 实现 文件 的 重新 
命名 ， 但 是 本 实例 利用 该 方法 将 文件 路 径 进行 修改 ， 从 而 实现 文件 的 快速 移动 。 该 方法 的 声明 如 下 : 

public boolean renameTo(File dest) 

参数 说 明 

dest: 指定 文件 的 新 抽象 路 径 名 。 

对 于 参数 dest， 可 以 设置 不 同 路 径 的 文件 对 象 ， 这 样 就 可 以 实现 文件 的 快速 移动 。 


4 注意 : 不 同 磁盘 之 间 的 文件 移动 会 涉及 文件 的 复制 与 删除 操作 ， 违 度 无 法 提升 ， 但 是 这 些 都 由 renameTo() 
方法 自动 完成 。 
国 设计 过 程 
(1) 创建 工具 类 FileUtl， 该 类 中 主要 包含 一 个 文件 批量 移动 的 方法 ， 并 且 在 类 中 定义 一 个 用 于 保存 移动 
操作 记录 的 List 集合 类 型 的 成 员 变 量 ， 关 键 代码 如 下 : 


public class FileUtil { 
1/ 创建 List 入， 用 于 保存 文件 移动 操作 记录 
Private List<String> workLogList = new 
public List<String> getWorkLogListO { 
return workLogList 
} 
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* 快速 批量 移动 文件 

* @param sourcePath 文件 源 路 径 

* @param targetPath 文件 目标 路 径 

* @return 移动 成 功 返回 tue， 否 则 返回 false 

4 

public boolean moveFile(String sourcePath.String targetPath ){ 
try{ 


File sourceDir = new File(sourcePath); 1/ 根据 源 路 径 创建 File 对 象 
if(sourceDir. existsO){ 
for(File file :sourceDir.listFilesO){ // 遍 历 文件 夹 下 的 所 有 文件 
File targetFile = new File(targetPath, file.getName()); 
file.renameTo(targetFile); /根据 修改 文件 路 径 ， 实 现 文件 移动 
workLogListadd(file.getName0+"” 移动 到 "+targetPath+"-- 完 成 ! "); 
} 
} 
return true; 
} catch (Exception e) { 
e.printStack Trace(); 
return false; 
} 
} 
(2) 创建 index.jsp 页 ， 在 本 页 中 获取 表单 的 请 求 信息 ， 然 后 调用 FileUtil 类 的 moveFile0 方 法 ， 实 现 快速 
批量 移动 文件 ， 关 键 代 码 如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 
String submit = request.getParameter("submit"); /获取 “开始 移动 ”按钮 的 值 
String sourcePath = request.getParameter("sourcePath"); 1/ 获取 源 文件 夹 路 径 
String targetPath = request.getParameter("targetPath"); /获取 目标 文件 夹 路 径 
FileUtil fileUtil = new FileUtil0; 
if(submit!=null) { 1/ 判断 是 否 提交 表单 
if(sourcePath!=nullé&-&!sourcePath.equals("")&-& 
targetPath!=null&&!targetPath.equals(™)){ /判断 是 否 为 空 
fileUtil.moveFile(sourcePath.,targetPath); /调用 方法 移动 文件 
} 


} 
%> 


图 秘笈 心 法 

本 实例 主要 利用 renameTo0 方 法 的 特性 来 实现 文件 的 快速 移动 ， 该 方法 的 定义 为 重 命名 抽象 路 径 名 表示 的 
文件 。 例如， 一 个 文件 为 D:\test\a.txt， 当 调用 renameTo0 方 法 重 命名 这 个 文件 时 ， 如 重 命名 为 E:\test\a.txt， 那 么 
这 个 文件 会 自动 被 移动 到 E:\test 目录 下 ， 相 当 于 Windows 系统 下 的 文件 剪 切 。 
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在 操作 系统 中 有 很 多 程序 建立 了 太 多 的 .tmp 临时 文件 来 为 程序 提供 数据 缓冲 ， 这 样 的 文件 有 的 在 程序 关闭 
时 会 自动 清理 ， 有 的 则 一 直 存 在 。 另 外 ， 程 序 在 运行 期 间 被 非法 终止 也 会 导致 临时 文件 的 元 余 。 本 实例 实现 了 
搜索 指定 磁盘 的 .tmp 临时 文件 并 进行 清理 的 功能 ， 实 例 运 行 效果 如 图 12.3 所 示 。 
图 关键 技术 


本 实例 主要 应 用 自 定义 的 递归 方法 在 指定 磁盘 中 搜索 所 有 的 .tmp 文件 。 搜 索 临 时 文件 时 ， 需 要 应 用 File 类 
的 listFiles(FileFilter filter) 方 法 过 滤 以 .tmp 为 后 缀 的 所 有 文件 ， 语 法 格式 如 下 : 


public File[] listFiles(FileFilter filten 
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功能 : 返回 抽象 路 径 名 数组 ， 这 些 路 径 名 表示 此 抽象 路 径 名 表示 的 目录 中 满足 指定 过 滤器 的 文件 和 目录 。 
参数 说 明 
filter: 实现 FileFilter 接口 的 实例 对 象 ， 该 对 象 的 accept0 方 法 用 于 实现 文件 的 过 滤 。 


【删除 磁盘 tmp 临时 文件 


选择 碰 盘 路 径 : DA ~ EE 


副本 tmp 
tmp 


12.3 ”删除 指定 磁盘 所 有 .tmp 临时 文件 


图 设计 过 程 
(1) 创建 实现 java.io.FileFilter 接口 的 ExtendNameFilter 类 ,该 类 的 任务 就 是 过 滤 .tmp 临时 文件 ， 关 键 代码 
如 下 : 
public class ExtendNameFilter implements FileFilter { 
@Override 
public boolean accept(File pathname) { 
if (pathname.getName().endsWith(".tmp") || pathname.isDirectoryO) 
return true; 
return false; 


} 
} 


(2) 创建 工具 类 FileUtil， 在 该 类 中 首先 创建 一 个 ExtendNameFilter 过 滤器 对 象 和 一 个 保存 所 有 临时 文件 
的 List 集合 ， 然 后 编写 获取 所 有 .tmp 临时 文件 的 递归 方法 ， 在 递归 方法 中 ， 将 搜索 到 的 所 有 临时 文件 都 添加 到 
List 集合 中 ， 关 键 代码 如 下 : 
public class FileUtil { 

/创建 过 滤器 类 ， 过 滤 .tmp 文件 

Private ExtendNameFilter tmpFilter = new ExtendNameFilterO: 

/创建 List 集合 ， 用 于 保存 搜索 出 的 .tmp 临时 文件 

Private List<File> temFiles = new ArrayList<File>0: 

public List<File> getTemFilesO { 

return temFiles: 
/et 
* 递归 方法 ， 获 取 指定 磁盘 所 有 临时 文件 


+ @param driver 磁盘 路 径 
抽 


public void listTempFiles(File driver) { 
File[] files = driver.listFiles(tempFilter):; // 获 取 指 定 磁盘 或 文件 夹 的 子 列表 
if (files 一 mu) 
return; 
for (File file : files) { // 遍 历 文件 数组 
证 (fileisFileO) { /处 理 文件 
temFiles.add(file); // 将 文件 添加 到 List 集合 
} else if (fileisDirectoryO) { /1/ 处 理 文件 夹 
listTempFiles(file): /递归 方法 遍历 文件 夹 


} 


} 
} 


(3) 在 FileUtil 类 中 编写 删除 所 有 临时 文件 的 方法 ， 关 键 代码 如 下 : 
public boolean deleteTmpFile(List<File> files){ 
2 for (File file:files) { /遍历 文件 数组 
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if(file.existsO){ /1/ 判 断 文件 是 否 存在 
file delete0: 1/ 删除 .tmp 临时 文件 

} 

} 

return true; 

} catch (Exception e) { 
eprintStackTrace0: 
return false: 


} 


(4) 创建 ndexjsp 页 ， 在 本 页 中 获取 表单 请 求 ， 当 单 击 “ 搜 索 ” 按 钮 时 ， 调 用 FileUtil 类 的 方法 搜索 指定 
磁盘 所 有 临时 文件 ， 关 键 代 码 如 下 : 


<“%@ page import="java.util.*" %> 
<%(@ page import="com. Ih.util.*" %> 
<“%@ page import="java.io. *"%%> 
<%!List<File> tempFiles = null; /用 于 保存 搜索 出 的 临时 文件 %> 
<% 
Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 
String submit = request.getParameter("submit"); // 获 取 “ 搜 索 ” 按 钮 的 值 
String submitl = request.getParameter("submit1"); /获取 “删除 ”按钮 的 值 
String driverPath = request.getParameter("driverPath"); /获取 文件 路 径 
FileUtil fileUtil = new FileUtil0; 
if(submit!=nulD) { // 浏 断 是 否 提交 表单 
if(driverPath'=null&c&c'driverPath.equals("")){ 
fileUtil.listTempFiles(new File(driverPath)): // 调 用 递归 方法 ， 获 取 所 有 .tmp 文件 
tempFiles = fileUtilgetTemFilesO: // 返 回 保存 临时 文件 的 List 集合 
; 
} 
%> 
(5) 当 单 击 “ 删 除 ” 按 钮 时 ， 调 用 FileUtil 类 的 方法 删除 所 有 临时 文件 ， 关 键 代码 如 下 : 
<% 
if(submitl!=nulD){ 1/ 判断 是 否 删除 
boolean res = fileUtil.deleteTmpFile(tempFiles); 1/ 删 除 所 有 .tmp 临时 文件 
f(res){ 
tempFiles = null: /清空 集合 中 的 元 素 


outprintln("<script>alert(temp 临时 文件 删除 成 功 ")</seript>"): 
} 


} 
%> 


图 秘笈 心 法 

本 实例 实现 的 核心 之 处 就 是 搜索 临时 文件 的 递归 方法 。 在 递归 方法 中 循环 File 数组 时 ， 应 用 isFile0 方 法 判 
断 File 数组 中 的 元 素 是 否 为 文件 ， 如 果 是 文件 则 添加 到 指定 集合 中 ; 应 用 isDirectory0 方 法 判断 数组 元 素 是 否 为 
文件 夹 ， 如 果 是 文件 夹 ， 则 继续 调用 本 方法 进行 搜索 ， 直 到 搜索 出 所 有 文件 夹 中 的 文件 。 
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图 实例 说 明 
在 使 用 图 形 界面 操作 系统 时 ， 当 打开 一 个 文件 夹 系统 时 会 自动 列 出 该 文件 夹 下 的 所 有 文件 及 子 文件 夹 。 本 
实例 实现 了 类 似 的 功能 : 首先 输入 一 个 文件 夹 路 径 ， 程 序 会 动态 列 出 该 文件 夹 下 的 所 有 文件 ， 如 果 该 文件 是 隐 
藏 文件 ， 就 在 属性 栏 中 显示 “隐藏 文件 ”， 实 例 运 行 效果 如 图 12.4 所 示 。 
[四 说 明 : 一 个 文件 的 属性 还 包括 可 读 、 可 写 、 可 运行 等 。 用 户 可 以 根据 File 类 中 的 相关 方法 实现 对 其 他 属性 
的 判断 。 
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而 二 文件 


[4 
依 基 文件 


图 12.4 实例 运行 效果 


图 关键 技术 
Java API 中 的 File 类 提供 了 很 多 与 文件 属性 相关 的 方法 。 本 实例 使 用 到 的 方法 如 表 12.1 所 示 。 
表 12.1 File 类 的 常用 方法 


以 字符 串 的 形式 返回 该 File 对 象 的 绝对 路 径 
测试 该 File 对 象 是 否 是 一 个 文件 ， 是 则 返回 te 


测试 该 File 对 象 是 否 是 一 个 隐藏 文件 ， 是 则 返回 true 
如 果 给 定 的 File 对 象 是 一 个 文件 夹 , 则 将 其 转换 成 File 数组 , 数组 中 包括 该 文件 夹 中 的 文件 和 子 文件 
夹 ， 否 则 抛 出 NullPointerException 


listFiles() 


< 所 注意 : 如 果 对 磁盘 使 用 isHidden0 〇 方法， 返回 的 结果 也 是 tue， 如 new File("d:\\"). isHidden()。 
图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 在 该 类 中 实现 根据 指定 文件 夹 路 径 查 询 所 有 文件 的 方法 ， 关 键 代码 如 下 : 


public List<File> searchFile(String path) { 
List<File> fileList = new ArrayList<File>0; 
File dir = new File(path); 
File[] files = dir.listFilesO: 
for (File file:files) { /遍历 用 户 选 择 的 文件 夹 
这 (file.isFileO){ 1/ 判断 是 否 是 一 个 文件 
fileList.add(file): 
} 
try{ 
Thread.sleep(100); /线程 休眠 0.1 秒 实现 动态 加 载 
} catch (InterruptedException e) { 
e.printStackTrace(): 
} 


ee 
} 
(2) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 输 入 的 文件 夹 路 径 ， 然 后 调用 FileUtil 类 的 searchFile0 方 法 查询 
所 有 文件 并 返回 List 集合 ， 关 键 代 码 如 下 : 
<% 


List<File> files = null; 
String submit = request.getParameter("submit"); /获取 “搜索 ”按钮 的 值 
String filePath = request.getParameter("filePath"); 。 ”// 获 取 文件 夹 路 径 
FileUtil fileUtil = new FileUtil0: 
if(submit!=nul) { /1/ 判 断 是 否 提交 表单 
if(filePath!=null&-&!filePath.equals(™")){ 
files = fileUtil.searchFile(filePath); // 调 用 方法 获取 所 有 文件 
} 
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(3) 在 index.jsp 页 的 表格 中 ， 遍 历 List 集合 输出 文件 信息 ， 关 键 代 码 如 下 : 


<% 
if(files!=nullg-&files.size()>0){ 
for(File file:files){ 
%> 
< 
<td align="center "><%-file.getName()%></td> 
<td align="center "> 
<%if(file isHiddenO){ 
outprintin(" 隐 藏 文件 "); 
jelsef 
‘out.printin("&nbsp;"); 
%> 
<td> 
</tr> 
<%} 
}%> 


图 秘笈 心 法 
文件 的 属性 包括 隐藏 、 可 读 、 可 写 、 可 执行 等 。 在 File 类 中 ， 对 于 上 面 所 说 的 属性 都 有 相对 应 的 方法 进行 
判断 。 读 者 可 以 认真 学 习 一 下 ， 方 便 以 后 使 用 。 
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删除 文件 是 对 文件 的 常用 操作 之 一 ， 操 作 系统 可 以 根据 用 户 的 选择 ， 删 除 文件 或 者 文件 夹 。 本 实例 可 以 根 
据 用 户 指 定 的 文件 夹 删除 该 文件 夹 中 的 所 有 文件 ， 包 括 子 文件 夹 和 隐藏 文件 ， 但 是 保留 用 户 选 择 的 文件 夹 ， 实 
例 运 行 效果 如 图 12.5 所 示 。 


文件 冯 路 径 : D:\ 测 斌 [LE 
副 际 了 以 下 文件 : 吉 
Di 到 试 \ .classpath 本 


| ps 到 试 \ .project 
3 .settings\org.eclipse.Jdt.core.prers 
Da 到 试 \bi 


in\ com) 1zwVDeleceahllTermpFile$l.class ~ 


图 12.5 ”删除 文件 夹 中 所 有 文件 
图 关键 技术 
Java API 中 的 File 类 提供 了 很 多 与 文件 管理 相关 的 方法 。 本 实例 使 用 到 的 方法 如 表 12.2 所 示 。 
表 12.2 File 类 的 常用 方法 


方 法 名 作 用 


delete() | 如 果 该 File 对 象 是 一 个 文件 或 空 文件 夹 就 将 其 删除 
_getAbsolutePath() | 以 字符 品 的 形式 返回 该 File 对 象 的 绝对 路 径 

isFile0 | 测试 该 File 对 象 是 否 是 一 个 文件 ， 是 则 返回 tme 

isHidden0 | 测试 该 File 对 象 是 否 是 一 个 隐藏 文件 ， 是 则 返回 tue 


如 果 给 定 的 File 对 象 是 一 个 文件 夹 ， 则 将 其 转换 成 File 数组 ， 数 组 中 包括 该 文件 夹 中 的 文件 和 子 文 


ee 件 夹 ， 否 则 抛 出 NullPointerException 


入 
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全) 注意 : delete0 方 法 只 能 用 来 删除 文件 和 空 文件 天 ， 并 且 被 该 方法 删除 的 文件 不 能 被 恢复 。 


设计 过 程 


(1) 创建 工具 类 FileUtil， 在 该 类 中 创建 一 个 List 集合 类 型 的 成 员 变量 delFiles， 用 于 保存 被 删除 的 文件 。 
编写 方法 deleteDictionary0 来 实现 删除 文件 夹 及 其 中 内 容 的 功能 ， 参 数 rootFile 代表 用 户 想 删除 的 文件 夹 ， 关 键 


代码 如 下 : 
publie ”void deleteDictionary(File rootFile) { 

if (rootFile.isFile0) { 
delFiles.add(rootFile); 
rootFile.deleteO); 

}else{ 
File[] files = rootFile .listFilesO; 
for (File file : files) { 

deleteDictionary(file); 


4 
TootFile delete0; 
} 
. 


// 将 被 删除 的 文件 保存 到 集合 中 

// 如 果 给 定 的 File 对 象 是 文件 就 直接 删除 

// 如 果 是 一 个 文件 夹 就 将 其 转换 成 File 数组 

/如 果 不 是 空 文件 夹 则 选 代 deleteDictionary0 方 法 


// 如 果 是 空 文件 夹 就 直接 删除 


(2) 编写 方法 deleteFiles0 来 实现 删除 文件 夹 下 所 有 内 容 但 保留 给 定 文件 夹 的 功能 ， 参 数 rootFile 代表 用 户 


想 删 除 的 文件 夹 ， 关 键 代 码 如 下 : 
public static void deleteFiles(File rootFile) { 
if (rootFile. listFiles().length — 0) { 
return; 
}else{ 
File[] files = rootFile listFilesO: 
for (File file : files) { 
这 (fileisFileO) { 
delFiles.add(file); 
file.deleteO:; 
yelse{ 
if (file.listFilesO length — 0) { 
file.delete|; 
}else{ 
deleteDictionary(file); 
} 


|: 
} 


/如 果 用 户 给 定 的 是 空 文件 夹 就 退出 方法 


// 将 非 空 文件 夹 转换 成 File 数组 


// 将 被 删除 的 文件 保存 到 集合 中 
/删除 指定 文件 夹 下 的 所 有 文件 


/删除 指定 文件 夹 下 的 所 有 空 文件 夹 
/删除 指定 文件 夹 下 的 所 有 非 空 文件 夹 


上司 说明: 上 面 的 方法 具有 很 好 的 通用 性 ， 读 者 可 以 将 其 放 在 自己 的 工具 包 中 。 
(3) 创建 indexjsp 页 ， 在 该 页 中 调用 FileUtil 中 的 方法 ， 删 除 用 户 输入 的 文件 夹 中 的 所 有 文件 ， 关 键 代 码 


如 下 : 
<% 
List<File> delFiles = null: 
Tequest.setCharacterEncoding("UTF-8"); 
String submit = request.getParameter("submit"); 
String filePath = request.getParameter("filePath"); 
FileUtil fileUtil = new FileUtilO:; 
if(submit!=nulD{ 
if(filePath!=null&&.!filePath.equals(""){ 
File file = new File(filePath): 
fileUtil.deleteFiles(file); 
delFiles = fileUtil.getDelFilesO; 
和 
了 
%> 


国 秘笈 心 法 


/设置 请 求 编码 
/获取 按钮 的 值 
/获取 文件 路 径 


// 济 断 是 否 提交 表单 


/删除 文件 夹 中 的 所 有 子 文件 


Java 中 将 文件 和 文件 夹 统一 用 File 类 管理 。 文 件 夹 又 可 以 分 成 空 文件 夹 和 非 空 文件 来。 对 于 不 同 的 类 型 ， 
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能 够 使 用 的 方法 是 不 同 的 。 实 际 应 用 中 ， 读 者 一 定 要 注意 其 中 的 区 别 。 


实例 298 


图 实例 说 明 
为 了 提高 对 磁盘 文件 的 搜索 效率 ， 可 以 创建 一 个 磁盘 索引 文件 ， 将 磁盘 中 所 有 文件 的 路 径 都 保存 到 该 文件 
中 ， 当 需要 查找 时 ， 在 该 文件 中 查找 即 可 ， 实 例 运 行 效果 如 图 12.6 所 示 。 


【创建 碰 和 索引 文件 ] 
选择 磁盘 : D'\ > 
造 择 文件 : EVndexPath txt DB) 
到 如 索引 | [重要 | 
索引 文件 内 容 如 
D:/§RECYCLE. BIN/S-1-5-21-350981636- 
3026505931-3142577047-1001/desktop. ini 
D:/360Safe/360. 1og 


D:/360Safe/3650AnciARP .sys 
D:/360Safe/360Examin.dll 


图 12.6 创建 磁盘 索引 文件 
图 关键 技术 
本 实例 主要 是 获得 磁盘 中 所 有 文件 的 路 径 ， 再 将 它们 写 入 到 文本 文件 中 。 这 些 内 容 可 以 参考 前 面 的 范例 。 
图 设计 过 程 
(1) 创建 工具 类 FileUtil， 在 该 类 中 定义 一 个 List 集合 类 型 的 成 员 变量 ， 用 于 保存 指定 磁盘 的 所 有 文件 的 
路 径 ， 然 后 编写 获取 指定 磁盘 所 有 文件 路 径 的 方法 ， 将 查询 出 的 文件 路 径 添加 到 List 集合 中 ， 关 键 代码 如 下 : 


public List<String> getFilePath(List<String> list, File rootFile) { 


File[] files = rootFile.listFiles|: // 获 取 磁 盘 路 径 下 的 File 文件 数组 
if (files =— null) 
return list; 
for (File file : files) { /遍历 文件 数组 
if (file.isDirectoryO) { /判断 是 否 为 文件 夹 
getFilePath(list, file): // 如 果 为 文件 夹 ， 继 续 调用 本 方法 
} else { // 如 果 是 文件 ， 将 文件 路 径 添加 到 集合 


list.add(file.getAbsolutePath().replace(™\". "/")): 
} 
return list: 
} 
(2) 在 FileUtil 类 中 ， 编 写 创建 磁盘 索引 文件 的 方法 createIndexFile0。 在 该 方法 中 ， 将 查询 出 的 所 有 文件 
的 路 径 写 入 文本 文件 中 ， 关 键 代码 如 下 : 


public void createIndexFile(String rootPath.String indexFilePath){ 


File rootFile = new File(rootPath): / 削 用 用 户 迁 择 的 科 盘 创建 File 对 象 

StringBuilder sb = new StringBuilder(); /利用 StringBuilder 对 象 保存 写 入 的 索引 

File indexFile = new File(indexFilePath): 

getFilePath(list, rootFile); 1/ 获得 磁盘 上 所 有 文件 的 路 径 

for(String pathstrlisb{ // 遍 历 集合 ， 将 集合 元 素 添加 到 StringBuffer 中 
sb.append(pathStri"\n"): 


. 
pathStr = sb.toStringO): 
FileWriter fileWiriter = null: 


fileWiriter = new FileWiriter(indexFile): 
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fileWriter write(sb toStringO): V 向 用 户 选择 的 文本 文件 中 写 入 数据 
fileWriter flushO; 
} catch (IOException e) { 
e.printStackTraceO); 
} 
(3) 创建 index.jsp 页 ， 在 该 页 中 获取 请 求 信息 ， 然 后 调用 FileUtil 类 的 createIndexFile0 方 法 创建 磁盘 索引 
文件 ， 关 键 代码 如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"); 1/ 设置 请 求 编码 
String submit = request.getParameter("submit"); 
String driverPath = request.getParameter("driverPath"): // 获 取 磁盘 路 径 
String indexFilePath = request.getParameter("indexPath"); /获取 索引 文件 路 径 
FileUtil fileUtil = new FileUtil0: 
if(submit'=nulD){ /判断 是 否 提交 表单 
if(driverPath!=nullé-&-!driverPath.equals(™" 
indexFilePath!=null&é&!indexFilePath.equals(™")){ 
fileUtilcreateIndexFile(driverPathindexFilePath); 。“// 创 建 磁盘 索引 文件 
} 


%> 
上 秘 航 心 法 

磁盘 索引 文件 就 是 用 一 个 文件 来 记录 磁盘 上 所 有 文件 的 路 径 ， 当 需要 查询 文件 时 ， 就 不 用 每 次 都 遍历 整个 
磁盘 ， 提 高 了 效率 。 创 建 一 个 索引 文件 就 是 先 获得 磁盘 中 所 有 文件 的 路 径 ， 再 写 入 到 索引 文件 即 可 。 索 引文 件 
也 可 以 用 属性 文件 创建 ， 读 者 可 以 自行 完成 。 


实例 299 


图 实例 说 明 
在 磁盘 上 进行 文件 查找 有 两 种 方式 ， 第 一 种 是 遍历 整个 碰 


盘 ， 获 得 各 个 文件 的 路 径 。 如 果 路 径 中 含有 用 户 指定 的 关键 字 ， 【快速 全 盘查 执 文件 ] 
就 保存 该 路 径 。 最 后 将 结果 显示 给 用 户 。 第 二 种 是 使 用 已 经 建立 选择 索引 文件 EndexFia tt 
好 的 磁盘 索引 文件 ， 直 接 在 该 文件 中 进行 查找 。 显 然 第 二 种 方法 is CE 


速度 较 快 ， 本 实例 就 是 采用 这 种 方法 来 实现 对 某 一 特定 文件 的 查 Eee LoonnorJer" BE 


找 功 能 的 ， 实 例 运行 效果 如 图 12.7 所 示 。 20090220-1135) Tb /one cormons mee or 
D:/aaa/eclipse/plugins/org.apache.comnons ,Dea -~ 


图 关键 技术 图 12.7 快速 全 盘查 找 文件 


本 实例 主要 是 读 取 磁 盘 索 引文 件 ,再 利用 String 类 的 contains0 
方法 找 出 与 用 户 输入 的 关键 字 匹 配 的 结果 。 该 方法 的 声明 如 下 

contains(CharSequence s) 

当 且 仅 当 此 字符 串 包含 指定 的 char 值 序列 时 ， 返 回 true。 

参数 说 明 

s: 要 搜索 的 序列 。 
< 负 注意 : 如 果 文件 路 径 中 包含 用 户 输入 的 关键 字 ， 该 方法 也 会 返回 tue。 如 果 仅 希望 查找 某 类 具体 的 文件 ， 可 

以 使 用 endWith(String suffix) 方 法 。 


图 设计 过 程 
(1) 创建 工具 类 FileUtil， 在 该 类 中 编写 查找 文件 的 方法 searchFile0， 该 方法 有 两 个 String 类 型 的 参数 
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分 别 是 用 户 输入 的 关键 字 keyword 和 索引 文件 的 路 径 indexFilePath， 关 键 代码 如 下 : 


public String searchFile(String keyword String indexFilePath){ 
FileReader fileReader = null: 
BufferedReader bufferedReader = null 
try{ 


fileReader = new FileReader(indexFilePath): // 创 建 FileReader 对 象 

bufferedReader = new BufferedReader(fileReader); 

StringBuilder builder = new StringBuilder(); /利用 StringBuilder 对 象 保存 索引 

String temp = null; 

while ((temp = bufferedReader.readLine|) != null) { // 读 入 文本 文件 
builder.append(temp); 

‘builder.append("\n"); // 在 每 一 行 的 末尾 添加 一 个 分 隔 符 
String[] rows = builder.toStringO.split("\n"): // 将 索引 按 换行 符 分 割 
StringBuffer sb = new StringBuffer(; 
for(String row:rows) { /遍历 读 入 的 文本 文件 

if(row.contains(keyword)) { 1/ 判断 是 否 包含 指定 的 关键 字 

sb.append(row+"\n"); // 返 回 结 果 

} 

return sb.toString|; 

} catch (IOException e) { 
e.printStackTrace(); 
return ™"; 


} 
} 
(2) 创建 index.jsp 页 ， 在 该 页 中 获取 表单 请 求 信息 ， 调 用 FileUtil 类 的 searchFile0 方 法 在 索引 文件 中 查找 
文件 ， 关 键 代码 如 下 : 


<% 
String pathStr =""; 
Tequest.setCharacterEncoding("UTF-8"): 1/ 设置 请 求 编码 
String submit = request.getParameter("submit"); 
String keyword = request.getParameter("keyword"); 1/ 获取 磁盘 路 径 
String indexFilePath = request.getParameter("indexPath"); /获取 索引 文件 路 径 
FileUtil fileUtil = new FileUtil0; 
if(submit!=nul) { 1/ 判断 是 否 提交 表单 
if(keyword!=null&&:!keyword.equals("")&-& 
indexFilePath!=null&-&!indexFilePath.equals(™"){ 
pathStr = fileUtil.searchFile(keyword,indexFilePath); /在 索引 文件 中 查找 文件 
上 
} 
%> 
[四 说 明 : 查询 结果 在 显示 给 用 户 之 前 一 定 要 进行 合法 性 验证 ， 即 确定 该 文件 确实 存在 。 这 一 步 请 读者 在 源 代 
码 中 自行 添加 。 
国 秘笈 心 法 


使 用 磁盘 索引 文件 能 够 提高 文件 的 查询 速度 ， 前 提 是 磁盘 上 的 文件 不 经 常 发 生变 化 。 由 于 磁盘 索引 文件 不 
能 及 时 反映 出 磁盘 的 状态 ， 所 以 即使 在 索引 文件 中 有 用 户 查 找 的 文件 存在 ， 在 显示 结果 之 前 也 需要 测试 一 下 文 
件 是 不 是 真 的 存在 。 


初级 
实例 
实例 300 人 


图 实例 说 明 
本 实例 和 前 一 个 类 似 ， 都 是 利用 已 经 创建 好 的 索引 文件 进行 查找 ， 不 过 由 用 户 指定 要 查找 的 文件 变 成 了 查 
找 所 有 文本 文件 ， 实 例 运行 效果 如 图 12.8 所 示 。 
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这 择 宝 引文 片 : EindexFils xt | 


12.8 ”获取 磁盘 所 有 文本 文件 


图 关键 技术 
本 实例 主要 是 读 取 磁 盘 索 引文 件 ， 再 利用 String 类 的 endsWith0 方 法 找 出 所 有 以 .txt 结尾 的 路 径 。 该 方法 的 


声明 如 下 : 
endsWith(String suffix) 


测试 该 字符 串 是 否 以 指定 的 后 绥 结 束 。 
参数 说 明 
suffix: 指定 的 后 级 。 
图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 编 写 根据 用 户 指定 的 索引 文件 查找 文本 文件 的 searchFile0 方 法 ， 该 方法 返回 查 
找 出 的 所 有 文本 文件 路 径 的 字符 串 ， 关 键 代码 如 下 : 
public String searchFile(String indexFilePath){ 
FileReader fileReader = null; 
BufferedReader bufferedReader = null; 
try{ 
fileReader = new FileReader(indexFilePath):; 1/ 利用 用 户 选择 的 文件 创建 FileReader 对 象 
bufferedReader = new BufferedReader(fileReader); 
StringBuilder builder = new StringBuilder(); 
String temp = null; 
while ((temp = bufferedReaderreadLineO) != null) { 1/ 读 入 文本 文件 
builder.append(temp); 
builder.append("\n"); // 在 每 一 行 的 末尾 添加 一 个 分 隔 符 
} 
String[] rows = builder.toStringO.split("\n"): // 将 索引 按 换行 符 分 割 
StringBuffer sb = new StringBuffer(); 
for(String row:rows) { // 遍 历 读 入 的 文本 文件 
if(row.endsWith(".txt")) { 1/ 判 断 读 入 的 文本 文件 是 否 包含 指定 的 关键 字 
sb.append(row+"\n"); // 返 回 结果 
} 


» 
bufferedReader.close(); 
fileReader.close(): 
return sb.toStringO: 

} catch (IOException e) { 
e.printStackTraceO; 
return ™; 

} 

和 


(2) 创建 index.jsp 页 ， 在 该 页 中 获取 表单 请 求 信息 ， 然 后 调用 FileUtil 类 的 searchFile0 方 法 在 索引 文件 中 
查找 文本 文件 ， 关 键 代 码 如 下 : 
< 


String pathStr =""; 
Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 编码 
String submit = request.getParameter("submit"); 
String indexFilePath = request.getParameter("indexPath"); /获取 索引 文件 路 径 
FileUtil fileUtil = new FileUtil0: 
if(submit!=nulD) { /1/ 判 断 是 否 提交 表单 

if( indexFilePath!=null&é&!indexFilePath.equals(™")){ 

pathStr = fileUtil.searchFile(indexFilePath): // 在 索引 文件 中 查找 文件 


} 
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} 
%> 


图 秘笈 心 法 


利用 索引 文件 查找 的 过 程 主要 分 成 两 步 ， 第 一 步 是 读 入 索引 文件 ， 第 二 步 是 查找 与 用 户 指定 类 型 匹配 的 文 
件 路 径 。 第 二 步 既 可 以 考虑 使 用 String 类 的 endsWith(String suffix) 方 法 实现 ， 也 可 以 使 用 正则 表达 式 ， 这 样 可 以 
获得 更 加 强大 的 搜索 功能 。 


图 实例 说 明 


本 实例 实现 的 是 将 任意 个 txt 文件 合并 为 一 个 文件 。 通 过 IO 流 可 以 实现 文件 的 合并 ， 当 然 可 以 对 任意 格式 
的 文件 进行 合并 。 本 实例 以 合并 txt 文件 为 例 介绍 如 何 合并 文件 ， 运 行 结 果 如 图 12.9 所 示 。 


[合并 多 个 td 文件】 


选择 合并 文件 :ENG GE 
E:\a.txt 
E:\b.txt 
E:\c.txt 
选择 保存 地 址 : EM 合并 后 文件 bt 注册 


图 12.9 合并 多 个 txt 文 件 
图 关键 技术 


本 实例 实现 的 文件 合并 主要 通过 FileInputStream 类 实现 读 取 文件 , 通过 FileOutputStream 类 实现 向 文件 中 写 
入 内 容 。 在 对 文件 读 取 的 过 程 中 ， 本 实例 应 用 了 一 个 FileInputStream 类 的 一 个 很 重要 的 方法 available0， 获 取 可 
读 的 有 效 字 节 数 。 该 方法 的 语法 格式 如 下 : 
int availableO 
可 以 通过 FileInputStream 类 对 象 调用 该 方法 。 该 方法 的 返回 值 是 ， 可 以 从 输入 流 中 读 取 的 字 节 数 。 
< 注意 : 该 方法 抛 出 IO 异常 ， 在 调用 该 方法 时 ， 要 通过 try 语句 处 理 异常 。 
图 设计 过 程 
(1) 创建 工具 类 FileUtil， 在 该 类 中 编写 合并 多 个 txt 文件 的 方法 writeFiles0， 关 键 代 码 如 下 : 
/时 
* 合并 多 个 ttt 文件 
* @param txtPath 用 户 选择 的 需要 合并 的 所 有 文本 文件 的 路 径 
*@param savePath 合并 后 的 保存 路 径 
et void writeFiles(String[] txtPath, String savePath) { 
by 


/根据 文件 保存 地 址 创建 FileOutputStream 对 象 
FileOutputStream fo = new FileOutputStream(savePath. true); 


for (String path:txtPath) { /循环 遍 历 文件 路 径 数组 
File file = new File(path): /根据 文 件 路 径 创建 File 对 象 
FileInputStream fil = new FileInputStream(file): /| 创建 FileInputStream 对 象 
byte[] bl = new byte[fil.availableO]: /从 流 中 获取 字 节 数 
fil.read(b1); // 读 取 数据 

fo.write(b1); // 向 文件 中 写 数据 

fil.closeO; 
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} 
fo.close0: 
} cateh (Exceptione { 
e.printStack Trace(); 
} 
} 


(2) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 选 择 的 所 有 文件 的 路 径 和 合并 后 文件 的 保存 路 径 ， 然 后 调用 File 
Util 类 的 writeFiles0 方 法 ， 实 现 合 并 多 个 txt 文件 ， 关 键 代码 如 下 : 
<“% 


Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 

String submit = request.getParameter("submit"); 

String savePath = request.getParameter("savePath"): /获取 保存 路 径 

String txtPath = request.getParameter("files"): 

FileUtil fileUtil = new FileUtil0; 

if(submit!=nul) { // 济 断 是 否 提交 表单 

itxtPath'=null&c&c'txtPath.equals("")&c&csavePath'=null&c&savePath.equals(""){ 

String[] files = txtPath_split(wtm7: /分 割 所 有 文件 路 径 的 字符 串 为 数组 
fileUtil .writeFiles(files,savePath): /调用 方法 合并 多 个 txt 文件 


} 
%> 


[如 说 明 : 由 于 通过 JavaScript 设置 了 表单 文本 域 中 添加 的 所 有 文件 路 径 字符 囊 是 以 “\n” 为 分 隔 符 的 ， 所 以 
在 获取 文本 域 的 值 时 ， 也 应 该 通过 “\rn” 对 文件 路 径 字符 囊 进 行 分 解 。JavaScript 这 一 部 分 的 具体 代 
码 请 参见 本 书 附带 的 光盘 ， 此 处 不 再 具体 讲解 。 
图 秘笈 心 法 
本 实例 是 以 文本 文件 为 例 ， 向 大 家 介绍 如 何 将 多 个 文件 合并 成 一 个 文件 ， 当 然 可 以 合并 其 他 类 型 的 文件 ， 
但 需要 注意 合并 其 他 文件 时 要 使 用 字 节 流 。 
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图 实例 说 明 
在 Windows 操作 系统 下 可 以 很 轻松 地 实现 复制 文件 , 但 
是 如 果 要 实现 批量 复制 某 个 类 型 的 文件 ， 就 不 是 很 轻松 。 本 reat 
实例 是 一 个 小 工具 ， 通 过 本 实例 可 以 实现 将 某 文件 夹 下 的 指 a EN 
定格 式 的 文件 复制 到 相应 的 文件 夹 下 ， 运 行 结果 如 图 12.10 ns Cae 
所 示 。 EE 
图 关键 技术 


图 12.10 批量 复制 指定 扩展 名 的 文件 
考虑 到 一 个 文件 夹 中 可 能 还 包含 子 文件 夹 ， 所 以 需要 应 
用 递归 方法 循环 查找 文件 夹 下 所 有 符合 条 件 的 文件 ， 包 括 文件 夹 中 的 子 文件 夹 ， 一 直到 查找 出 所 有 符合 条 件 的 
文件 为 止 ， 递 归 调 用 才 会 结束 。 
在 查询 指定 扩展 名 的 文件 时 ， 需 要 应 用 java.io.FileFilter 接口 的 实现 类 对 文件 扩展 名 进行 过 滤 ， 该 过 滤器 的 
具体 用 法 可 参考 实例 295， 此 处 不 再 袭 述 。 


图 设计 过 程 
(1) 创建 文件 过 滤器 的 类 ExtendNameFilter， 该 类 实现 自 java.io.FileFilter 接口 ， 并 重 写 其 accept0 方 法 过 
滤 指 定 扩展 名 的 文件 。ExtendNameFilter 类 的 具体 代码 如 下 : 
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public class ExtendNameFilter implements FileFilter { 
Private String extendName: // 用 于 过 滤 的 文件 扩展 名 
Ppublic ExtendNameFilter(String extend){ 
this.extendName = extend: 
} 


@Override 
public boolean accept(File pathname) { 1/ 判断 文 件 的 扩展 名 是 否 符合 指定 扩展 名 
if (pathname.getName().toLowerCaseO.ends With(extendName.toLowerCaseO)|ipathname isDirectoryO) 
return true:; 
return false; 


} 
} 
(2) 创建 工具 类 FileUtil， 在 该 类 中 定义 getFiles0 方 法 ， 用 于 获取 某 文件 夹 下 的 所 有 文件 路 径 的 集合 ， 关 
键 代码 如 下 : 
递归 方法 ， 搜 索 某 个 路 径 下 所 有 指定 类 型 的 文件 
*# @param path 文件 夹 路 径 
* @param extendName 指定 文件 的 扩展 名 
所 


public void getFiles(String path,String extendName) { 


File dir = new File(path); /根据 文件 地 址 创建 File 对 象 
File files[] = dir.listFiles(new ExtendNameFilter(extendName)): // 获 取 文 件 夹 下 的 文件 数组 
for (File file:files ) { /循环 遍历 数组 
这 (fileisDirectory0) // 漳 断 文件 是 否 是 一 个 目录 
SetFiles(file.getAbsolutePathO.extendName); // 如 果 为 文件 夹 ， 继 续 执 行 本 方法 
else { 
allfilePath.add(file.getAbsolutePathO): /将 文件 路 径 添加 到 集合 中 


} 
} 
(3) 在 该 CopyUtil 类 中 定义 复制 文件 方法 copyFile0， 关 键 代码 如 下 : 
pn 
* 实现 文件 复制 


* @param allOldPath 需要 复制 的 所 有 文件 组 成 的 集合 
* @param newPath 文件 保存 路 径 
于 


public void copyFile(List<String> allOldPath, String newPath) { 
for(String oldPath:allOldPath){ 


File oldfile = new File(oldPath): 


证 (oldfile.existsO){ /文件 存在 时 
InputStream inStream = new FileInputStream(oldPath); // 读 入 源 文件 
File newFile = new File(newPath.oldfile.getName()): // 在 新 路 径 下 创建 文件 
newFile.createNewFile(); 


FileOutputStream fs = new FileOutputStream(newFile); 。 ”// 创 建文 件 输出 流 

byte[] buffer = new byte[1444]: 

while ((byteread = inStream.read(buffer)) !=-1) { /循环 读 取 文件 
bytesum += byteread: /获取 文件 大 小 
fs.write(buffer, 0, byteread); // 向 文件 中 写 数据 

} 


fs.close|; 
inStream.closeO; 


} 
} cateh (Exception ©) { 
e.printStackTrace(): 
} 
人 } 
(4) 创建 index.jsp 页 ， 在 该 页 中 获取 表单 请 求 的 值 ， 然 后 调用 FileUtil 类 的 方法 实现 文件 的 复制 ， 关 键 代 
码 如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 
String submit = request.getParameter("submit"): // 获 取 按 钮 的 值 
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String filePath = request.getParameter("filePath"): /获取 源 文 件 路 径 
String savePath = request.getParameter("savePath"); /获取 保存 路 径 
String extendStr = request.getParameter("extendStr"); /获取 文件 扩展 名 
FileUtil fileUtil = new FileUtil0: 

if(submit!=nulD) { // 判 断 是 否 提交 表单 


if(filepath!=null&-é&!filePath.equals("")&-& 
savePath!=null&é&!savePath.equals("™")&& 
extendStr!=nullé&-&!extendStr.equals("")){ 


fileUtil.getFiles(filePath.extendStr): /在 文件 夹 中 查找 指定 扩展 名 的 文件 
List<String> files =fileUtilgetAllfilePathO: 
fileUtil.copyFile(files,savePath); /调用 方法 实现 文件 复制 
} 
} 
%> 
图 秘笈 心 法 


在 根据 文件 扩展 名 实现 文件 搜索 时 ， 尽 量 应 用 实现 javaio FileFilter 接口 的 文件 过 滤器 类 ， 通 过 过 滤器 只 需 
要 编写 少量 的 代码 就 可 以 实现 文件 的 过 滤 ， 这 样 的 代码 不 仅 具 有 良好 的 可 读 性 ， 而 且 会 提高 程序 的 执行 效率 。 
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图 实例 说 明 


随 着 信息 技术 的 高 速 发 展 ， 人 们 在 计算 机 中 存储 的 文件 越 来 越 多 ， 有 时 由 于 时 间 的 问题 ， 没 有 注意 文件 的 
存放 方式 ， 这 样 长 期 下 去 ， 计 算 机 中 的 文件 会 显得 比较 凌乱 。 


初级 
实用 指数 :良友 


针对 此 问题 ,可 以 自己 开发 一 个 小 程序 ,实现 文件 的 分 类 存储 ， rmt 
将 具有 相同 格式 的 文件 存储 在 同一 个 文件 夹 下 ， 以 方便 查询 ， 9 人， Ee 

本 实例 的 运行 结果 如 图 12.11 所 示 。 Lz 

图 关键 技术 图 12.11 实现 文件 的 分 类 存储 


本 实例 实现 文件 分 类 存储 的 关键 是 获取 某 文件 夹 下 的 文件 ， 通 过 字符 串 截取 的 方式 提取 文件 的 格式 ， 并 根 
据 获取 的 文件 格式 创建 文件 夹 。 提 取 文 件 格式 使 用 的 是 String 类 的 substring() 方 法 ， 该 方法 可 在 指定 的 字符 串 中 
截取 子 字符 串 ， 语 法 格式 如 下 : 

substring(int beginindex,int endIndex) 

参数 说 明 

@ beginIndex: 要 截取 字符 串 的 开始 索引 位 置 ， 包 括 该 索引 位 置 处 的 字符 。 

@ endIndex: 要 截取 字符 串 的 结束 索引 ， 不 包括 该 索引 位 置 处 的 字符 。 


图 设计 过 程 
(1) 创建 工具 类 FileUtil， 该 类 定义 获取 文件 夹 下 所 有 文件 方法 getFiles0， 将 获取 的 所 有 文件 路 径 添 加 到 


成 员 变量 List 集合 中 ， 关 键 代码 如 下 : 
Public void getFiles(String path) { 


File dir = new File(path): /根据 文件 地 址 创建 File 对 象 
File files[] = dir.listFiles|; /获取 文件 夹 下 的 文件 数组 
for (File file:files ) { /循环 遍 历数 组 
证 (fileisDirectoryO) 1/ 判断 文件 是 否 是 一 个 目录 
getFiles(file.getAbsolutePathO)): // 如 果 为 文件 夹 ， 继 续 执 行 本 方法 
else { 
allfilePath.add(file.getAbsolutePathO); 1/ 将 文件 路 径 添 加 到 集合 中 


} 
} 
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(2) 在 FileUtil 类 中 编写 新 建文 件 夹 方法 createFolder0。 该 方法 有 一 个 String 类 型 的 参数 ， 用 于 定义 新 建 
文件 夹 的 保存 地 址 ， 关 键 代码 如 下 : 


public void createFolder(String strPath) { 


try{ 
File myFilePath = new File(strPath): // 根 据 文件 地 址 创建 File 对 象 
证 (ImyFilePath existsO) { /如 果 指定 的 File 对 象 不 存在 
myFilePath mkdir(); /创建 目录 
} 
} catch (Exception e) 
2 新 建文 件 夹 操作 出 错 "); 
e.printStackTrace(); 


} 
} 


(3) 在 FileUtil 类 中 ， 编 写实 现 文件 分 类 存储 的 方法 sortFile0， 关 键 代 码 如 下 : 


public void sortFile(String filePath) { 


getFiles(filePath); // 调 用 方法 ， 获 取 用 户 选 择 文件 夹 中 所 有 文件 集合 
for(String fileStr:allfilePath ){ /循环 遍历 该 文件 集合 

int index = fileStr. lastIndexOf("."); 

iflindex !=-D{ 


String strN = fileStrsubstring(index+l,fileStrlengthO): /对 文件 夹 进行 截取 ， 获 取 文 件 扩展 名 
intind = fileStr.lastIndexOf(™\"); 
String strFileName = fileStr.substring(ind, index); 
createFolder(filePath+"\W"+" 分 类 "); 1/ 调 用 创建 文件 夹 方法 ， 新 建文 件 夹 
createFolder(filePath+"\"+" 分 类 "+"\\"+strN); 
if(fileStr.endsWith(strN)){ 
File oldfile = new File(fileStr); 
File newFile = new File(filePath+"\"+" 分 类 "+"\\"+strN+"\\"+strFileName+fileStr.substring(index,fileStrlengthO)); 
oldfile renameTo(newFile): // 将 文件 保存 到 设置 的 分 类 文件 夹 中 


} 
} 
} 


(4) 创建 index.jsp 页 ， 在 该 页 中 获取 用 户 输入 的 文件 夹 路 径 ， 然 后 调用 FileUtil 类 的 sortFile0 方 法 实现 文 
件 分 类 存储 ， 关 键 代 码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 编码 
String submit = request.getParameter("submit"); /获取 按钮 的 值 
String filePath = request.getParameter("filePath"); /获取 文件 夹 路 径 
FileUtil fileUtil = new FileUtilO; 

if(submit!=null) { 1/ 判断 是 否 提 交 表 单 


if(filePath!=nullé-&'filePath.equals("")){ 
fileUtil.sortFile(filePath); /调用 方法 实现 文件 分 类 存储 
out.printin("<script>alert(' 文 件 分 类 成 功 ! "):</script>"); 

a 


} 
%> 


国 秘笈 心 法 

在 实现 将 文件 夹 中 的 文件 复制 到 分 类 文件 夹 中 时 ， 并 没有 通过 文件 流 的 方式 实现 ， 而 使 用 的 是 File 对 象 的 
renameTo() 方 法 ,该 方法 实际 上 是 重 命名 文件 的 方法 , 但 是 如 果 修 改 整 个 文件 的 路 径 名 , 文件 也 会 被 移动 到 目标 
路 径 中 。 


实例 304 


图 实例 说 明 
Windows 操作 系统 下 的 文件 搜索 功能 大 家 都 很 熟悉 , 通过 该 功能 用 户 可 以 在 指定 的 范围 内 搜索 相关 的 文件 。 


4S4 


第 12 章 文件 的 批量 管理 


本 实例 模拟 该 功能 开发 小 型 的 文件 搜索 工具 ,支持 星 号 “*” 表 示 任 意 多 个 字符 , 支持 “? ”表示 任意 一 个 字符 ， 
运行 结果 如 图 12.12 所 示 。 


【在 指定 目录 下 搜索 文件 
往 件 起 址 : EE\ 深 焊 1037 
文件 名 : 二 
: [本 


ND DDT D1 


DoD Ar DO 


bop 
资料 \1037\ (0750BB15-D363_4BcF_205A- 


12.12 在 指定 目录 下 搜索 文件 


图 关键 技术 


本 实例 的 实现 首先 要 获取 指定 目录 下 的 文件 数组 ， 再 从 数组 中 查询 满足 条 件 的 文件 。 获 取 指 定 目 录 下 的 文 
件数 组 ， 并 对 文件 扩展 名 进行 过 滤 ， 可 以 用 File 类 的 listFiles(FileFilter filten) 方 法 ， 语 法 格式 如 下 : 

public File[] listFiles(FileFilter filter) 

参数 说 明 

filter: 文件 过 滤器 。 

功能 : 返回 抽象 路 径 名 数组 ， 这 些 路 径 名 表示 此 抽象 路 径 名 所 表示 目录 中 满足 指定 过 滤器 的 文件 和 目录 。 
除了 返回 数组 中 的 路 径 名 必须 满足 过 滤器 外 ， 此 方法 的 行为 与 listFiles0 方 法 相同 。 
图 设计 过 程 

(1) 编写 工具 类 FileUtil， 在 该 类 中 定义 findName0 方 法 ， 用 于 查找 匹配 的 文件 。 如 果 要 查找 的 文件 名 与 
搜索 模式 匹配 ， 则 返回 tue， 如 果 不 匹配 则 返回 false， 关 键 代码 如 下 : 


public static boolean findName(String pattem, String str) { 


int patternLength = pattern.length(); 1/ 获取 参数 字符 串 的 长 度 

int strLength = str.lengthO); 

int strIndex = 0; 

char eachCh: 

for (int i= 0; i < patternLength; i++) { 1/ 循环 字符 参数 字符 串 中 的 每 个 字符 
eachCh = pattern.charAt(i); /获取 字符 串 中 每 个 索引 位 置 的 字符 
if (eachCh—"*") { // 如 果 这 个 字符 是 一 个 星 号 


While (strIndex < strLength) { 
if (findName(pattern.substring(i + 1), strsubstring(strIndex))){ // 如 果 文件 名 与 搜索 模型 匹配 


return true; 
} 
strIndex++; 
} 
} elseif (eachCh — 7") { // 如 果 包 含 问 号 
strIndex++; 
证 (strIndex > strLength) { // 如 果 str 中 没有 字符 可 以 匹配 “?” 号 
return false: 
} 
}else{ 1/ 如果 要 寻找 的 是 普通 文件 


这 ((strIndex > 一 strLength) | (eachCh != str.charAt(striIndex))) { ”// 如 果 没 有 查找 到 匹配 的 文件 
return false: 


了 
strIndex++:; 


ee 
} 
(2) 定义 findFiles0 方 法 ， 实 现 文件 搜索 功能 。 该 方法 有 3 个 String 类 型 的 参数 ， 分 别 用 于 指定 要 搜索 目 
录 的 地 址 、 要 搜索 文件 的 名 称 以 及 文件 的 扩展 名 ， 关 键 代码 如 下 : 


public static List<File> findFiles(String baseDirName. String targetFileName.String extendStr) { 
List<File> fileList = new ArrayList<File>0: 多 避让 妈 加 人 的 List 对 象 
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File baseDir = new File(baseDirName): // 根 据 参 数 创 建 File 对 象 
if (!baseDir.exists() || !baseDirisDirectoryO) { // 如 果 该 File 对 象 不 存在 
return fileList; /返回 List 对 象 


} 
String tempName = null; 
File[] files = baseDir.listFiles(new ExtendNameFilter(extendStr)); /获取 参数 目录 下 的 文件 数组 ， 此 文件 数组 是 经 过 指定 扩展 名 过 滤 的 


for (File file:files) { /循环 遍历 文件 数组 
if (!file.isDirectoryO) { 1/ 如果 数组 中 的 文件 不 是 一 个 目录 
tempName = file.getNameO; /获取 该 数组 的 名 称 
if (findName(targetFileName, tempName)) { /调用 文件 匹配 方法 
fileList.add(file.getAbsoluteFileO): // 将 指定 的 文件 名 添加 到 集合 中 
时 
} 
} 
Teturn fileList; 


} 
(3) 编写 根据 扩展 名 过 滤 文 件 的 过 滤器 类 ExtendNameFilter， 该 类 的 具体 代码 可 参考 实例 302。 
(4) 创建 mdexjsp 页 ， 在 该 页 中 获取 用 户 输入 的 表单 信息 ， 然 后 调用 FileUtil 类 的 findFiles0 方 法 ， 实 现 
在 指定 目录 下 的 文件 搜索 ， 关 键 代码 如 下 : 
< 


List<File> files = null 


Tequest.setCharacterEncoding("UTF-8"); 1/ 设置 请 求 编码 
String submit = request.getParameter("submit"); /获取 按钮 的 值 
String filePath = request.getParameter("filePath”): /获取 文件 路 径 
String fileName = request.getParameter("fileName"); /获取 文件 名 关键 字 
String extendName = request.getParameter("extendStr"): // 文 件 扩展 名 
if(submit!=nulD) { // 判 断 是 否 提交 表单 


if(filePath!=null&-&!filePath.equals("")&-& 
fileName!=null&-&!fileName.equals("")&-&- 
extendName!=null&-&!extendName.equals(™")){ 
files = FileUitil.findFiles(filePath,fileName,extendName);// 调 用 搜索 文件 的 方法 


} 
%> 


图 秘笈 心 法 


在 应 用 List 集合 时 ， 尽 量 采 用 List<E> 的 泛 型 写法 , 这 种 写法 可 以 直接 定义 List 集合 中 的 对 象 类 型 ， 方 便 元 
素 的 添加 和 搜索 ， 简 化 程序 代码 。 


中 级 
实用 指数 : 诬 宙 


实例 305 


国 实例 说 明 


在 现代 化 企业 中 ， 公 司 的 电脑 是 通过 组 成 一 个 局 域 网 来 实现 互相 交流 的 。 如 果 想 复制 另 一 台电 脑 中 的 文件 
夹 该 怎么 办 呢 ? 本 实例 将 讲述 如 何 备份 网 络 文件 夹 ， 运 行 效果 如 图 12.13 所 示 。 


【网 络 文件 夫 备 份 3 


12.13 ”网 络 文件 夹 备份 


[加 说 明 : 备份 的 文件 夹 地 址 要 使 用 URI。 如 果 读者 对 URI、URL 和 URN 不 熟悉 ， 请 参考 Java SE API 中 URI 
类 的 说 明 。 
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URI 表示 一 个 统一 资源 标识 符 的 引用 。File 类 有 一 个 构造 方法 ， 可 以 利用 URI 来 获得 一 个 File， 语 法 格式 
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图 关键 技术 
如 下 : 
File(URI uri) 
参数 说 明 


wi: 通过 将 给 定 的 fle: URI 转换 为 一 个 抽象 路 径 名 来 创建 


在 转换 成 URI 之 后 就 变 成 了 “file:/d:/mingrisoft.txt”。 
图 设计 过 程 


-个 新 的 File 实例 。 例 如 ,，“d:\mingrisoft.txt” 


(1) 创建 工具 类 FileUtil, 编写 复制 单个 文件 的 方法 copySingleFile0。 参 数 source 代表 源 文件 ，target 代表 


宿 文件 ， 关 键 代码 如 下 : 


Ppublic static void copySingleFile(File source, File target) throws IOException { 


FileInputStream input = new FileInputStream(source); 
FileOutputStream output = new FileOutputStream(target); 
byte[] b= new byte[1024 * 5]: 
int length: 
while ((length = input.read(b)) = -1) { 

output.write(b, 0, length); 
} 


output.flushO; 

‘output.close(O): 

input.closeO; 
} 


(2) 编写 工具 方法 copyDictionary0， 其 功能 是 复制 


文件 来， 关键 代码 如 下 : 


// 获 得 输入 流 
// 获 得 输出 流 


/利用 循环 读 取 输 入 流 中 的 全 部 数据 
/将 输入 流 中 的 内 容 写 入 到 输出 流 中 
// 刷 新 输出 流 


/释放 输出 流 资源 
/释放 输入 流 资源 


-个 文件 夹 ， 参 数 source 代表 源 文件 夹 ，target 代表 宿 


public static void copyDictionary(File source, File target) throws IOException { 


File[] files = source. listFiles(); 
for (File file : files) { 
让 (file.isFileO) { 


// 将 源 文件 夹 转换 成 File 数组 
1/ 如果 是 一 个 文件 就 调用 复制 文件 的 方法 


copySingleFile(file, new File(target.getAbsolutePath() + "/" + file.getName())); 

} else if (filelistFilesO length — 0) { /1/ 如 果 是 一 个 空 文件 夹 就 调用 创建 文件 夹 的 方法 
new File(target getAbsolutePathO + "/" + file.getName().mkdirO: 

} else { /如果 是 一 个 非 空 文件 夹 就 调用 自身 ， 进 行 迭 代 
new File(target.getAbsolutePath| + "/" + file.getNameO).mkdir0; 
copyDictionary(file, new File(target.getAbsolutePath() + "/" + file.getName())); 


} 


89 技巧 : 对 于 其 他 来 源 的 文件 天 复制 ,在 底层 上 都 可 以 使 用 上 面 的 方法 实现 . 区 别 仅 在 于 文件 天 的 来 源 不 同 。 


读者 可 以 根据 自己 的 需求 ， 参 考 File 类 中 的 构造 方法 来 实现 。 
(3) 创建 index.jsp 页 ， 在 该 页 中 获取 请 求 数据 ， 然 后 调用 FileUtil 类 的 copyDictionary0 方 法 ， 实 现 文件 夹 


备份 ， 关 键 代 码 如 下 : 


<% 

Tequest.setCharacterEncoding("UTF-8"): // 设 置 请 求 编码 

String submit = request.getParameter("submit"); // 获 取 按 钮 的 值 

String sourcePath = request.getParameter("sourcePath"); /获取 源 文件 夹 路 径 

String targetPath = request.getParameter("targetPath"); /获取 目标 文件 夹 路 径 

if(submit!=null) { // 判 断 是 否 提 交 表 单 

if(sourcePath!=null&-&!sourcePath.equals("")&-& 

targetPath!=nullé-&!targetPath.equals(™)){ 
File sourceFolder = new File(new URI(sourcePath)); /以 URI 为 参数 创建 File 对 象 
File targetFolder = new File(targetPath): // 目 标 文件 夹 的 File 对 象 
FileUtil.copyDictionary(sourceFolder.targetFolder):; 。// 调 用 方法 实现 文件 夹 备份 
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国 秘笈 心 法 

复制 文件 夹 的 过 程 就 是 将 一 个 文件 夹 中 的 所 有 文件 和 文件 夹 复制 到 另 一 个 文件 夹 中 。 由 于 Java 使 用 File 类 
来 统一 管理 文件 和 文件 夹 ， 而 对 于 文件 、 空 文件 夹 和 非 空 文件 夹 能 够 使 用 的 方法 并 不 完全 相同 ， 这 就 需要 分 类 
讨论 。 利 用 递归 的 思想 ， 最 终 可 以 将 任何 一 个 非 空 文件 夹 转换 成 文件 和 《或 ) 空 文件 夹 的 形式 ， 这 样 就 可 以 统 


12.2 文件 的 压缩 与 解压 缩 


在 网 络 传输 文件 的 过 程 中 ， 如 果 文 件 过 大 将 会 影响 文件 传送 的 效果 和 速度 ， 如 果 将 文件 通过 文件 压缩 功能 
将 其 压缩 后 再 传送 ， 不 但 可 以 提高 传送 速度 ， 还 可 以 节省 大 量 的 时 间 。 本 节 将 介绍 如 何 应 用 程序 来 实现 对 文件 
的 压缩 与 解压 缩 的 功能 。 
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实例 说 明 

在 文件 传输 过 程 中 ， 如 下 载 文 件 ， 用 户 通常 希望 在 保证 文件 质量 的 情况 下 ， 文 件 的 体积 要 尽 可 能 小 ;对 于 
多 个 文件 可 以 当成 一 个 文件 来 传输 。 利 用 压缩 即 可 实现 上 述 需求 。 本 实例 使 用 Java 自 带 的 压缩 工具 包 来 实现 对 
于 多 个 文本 文件 压缩 的 功能 ， 运 行 效 果 如 图 12.14 所 示 。 


二 


【压缩 所 有 文本 文件 】 


文件 地 址 : EENest EE 


E:\test\a. txt 
E:\test\b.txt 
E:\test\c.txt 
E:\test\indexFile.txt 
E:\test\indexPath. txt 


开始 压缩 


图 12.14 压缩 所 有 文本 文件 


图 关键 技术 


压缩 文件 和 复制 文件 类 似 , 只 是 用 另外 一 种 格式 来 保存 输入 流 。 本 实例 使 用 到 了 ZipOutputStream, 它 以 ZIP 
文件 格式 写 入 文件 实现 输出 流 过 滤器 ， 使 用 的 方法 如 表 12.3 所 示 。 


表 12.3 ZipOutputstream 常用 方法 


方法 名 作 用 
ZipOutputStream(OutputStream out 创建 新 的 ZIP 输出 流 
utNextEntry(ZipEntry e 开始 写 入 新 的 _ZIP 文件 条 目 并 将 流 定位 到 条 目 数据 的 开始 处 
图 设计 过 程 


(1) 创建 工具 类 FileUtil， 实 现 压缩 文件 的 方法 zipFile0， 参 数 folder 指明 要 压缩 的 文件 夹 ，targetZipFile 
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指明 压缩 后 生成 的 文件 ， 关 键 代 码 如 下 : 
Ppublic static void zipFile(File[] files, File targetZipFile) throws IOException { 
File[] txtFiles = folder.listFiles(new ExtendNameFilter0); 。“// 获 得 经 过 过 滤 后 的 所 有 txt 文件 
FileOutputStream fos = new FileOutputStream(targetZipFile): // 利 用 给 定 的 targetZipFile 对 象 创建 文件 输出 流 对 象 


ZipOutputStream zos = new ZipOutputStream(fos): // 利 用 文件 输出 流 创建 压缩 输出 流 
pyte[] buffer = new byte[1024]: /创建 写 入 压缩 文件 的 数组 
for (File file : txtFiles) { /遍历 全 部 文件 


ZipEntry entry = new ZipEntry(file.getName()):; /利用 每 个 文件 的 名 字 创 建 ZipEntry 对 象 
FileInputStream fis = new FileInputStream(file); /利用 每 个 文件 创建 文件 输入 流 对 象 


zos.putNextEntry(entry); // 在 压缩 文件 中 添加 一 个 ZipEntry 对 象 
int read = 0; 
while ((read = fis.read(buffer)) = -1) { 
Zos.write(buffer, 0, read); // 将 输入 写 入 到 压缩 文件 
} 
Zos.closeEntry(O): /关闭 ZipEntry 
fis.closeO:; // 释 放 资源 
2. 
Zos.closeO; 
fos.close0: 


} 
< 注意 : 对 于 写 入 到 ZIP 文件 的 每 个 文件 ， 都 要 创建 一 个 ZipEntry 对 象 来 区 别 ， 不 同文 件 的 ZipEntry 要 不 同 。 
通常 可 以 考虑 使 用 文件 名 来 构造 ZipEntry 对 象 。 
(2) 创建 index.jsp， 在 该 页 中 获取 用 户 输入 的 文件 夹 路 径 ， 然 后 调用 FileUtil 类 的 zipFile0 方 法 ， 实 现 对 
文件 夹 中 所 有 txt 文件 的 压缩 ， 关 键 代码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 
String submit = request.getParameter("submit"); 1/ 获取 按钮 的 值 
String filePath = request.getParameter("filePath"): 1/ 获取 文件 夹 路 径 
FileUtil fileUtil = new FileUtil0; 
if(submit!=null) { 1/ 判断 是 否 提交 表单 
if(filePath!=null&-&!filePath.equals(™)){ 
File folder = new File(filePath); // 根 据 源 文件 夹 创建 File 对 象 


/创建 新 的 zip 文件 ， 文 件 名 为 源 文件 夹 的 名 称 与 _txtFile 的 组 合 
File targetZipFile = new File(folder. getParent0, folder.getName(+"_txtFile.zip"); 


if(!targetZipFile.existsO){ 
targetZipFile.createNewFileO: 
FileUtil.zipFile(folder,targetZipFile): /调用 方法 实现 文件 压缩 
上 
} 
%> 
国 秘笈 心 法 


文件 的 压缩 过 程 不 过 是 把 文件 的 输入 流 用 另外 一 种 格式 来 保存 而 已 。Java 中 每 个 被 压缩 的 文件 都 要 使 用 
ZipEntry 来 区 别 ， 最 后 将 文件 的 数据 写 入 ZIP 文件 中 即 可 。 


中 级 
实用 指数 : 依依 


实例 307 


图 实例 说 明 
在 获得 一 个 以 ZIP 格式 压缩 的 文件 后 ， 需 要 将 其 进行 解压 缩 ， 还 原 成 压缩 前 的 文件 。 本 实例 使 用 Java 自 带 
的 压缩 工具 包 来 实现 解压 缩 文 件 到 指定 文件 夹 的 功能 ， 运 行 效果 如 图 12.15 所 示 。 


了 说 明 : 用 户 需要 选择 压缩 文件 和 和 解压 到 哪个 文件 天。 在 解压 缩 完成 后 显示 解压 了 的 文件 。 压 缩 包 中 的 文本 
文件 不 要 放 在 文件 夹 中 ， 否 则 会 出 现 异 常 。 
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文件 管理 系统 
TD 


Eest_baFie zp 


Ewwytbd 
ET 


图 12.15 压缩 包 解压 到 指定 文件 夹 


图 关键 技术 
ZipFile 是 用 来 从 ZIP 文件 中 读 取 ZipEntry 的 类 。 本 实例 使 用 的 方法 如 表 12.4 所 示 。 
表 12.4 ZipFile 类 的 常用 方法 


作 用 


关闭 ZIP 文件 
返回 ZIP 文件 条 目的 枚 举 
返回 输入 流 以 读 取 指定 ZIP 文件 条 目的 内 容 


close() 
entries() 


图 设计 过 程 
(1) 创建 工具 类 FileUtil， 在 该 类 中 编写 解压 缩 ZIP 文件 的 方法 unZipFiles0， 参 数 zipFilePath 表示 用 户 选 
择 的 ZIP 文件 的 路 径 字符 串 ， 参 数 targetFolder 表示 文件 的 解压 路 径 ， 关 键 代码 如 下 : 


public void unZipFiles(String zipFilePath,String targetFolder){ 


ZipFile zf = null; 
try{ 
zf= new ZipFile(zipFilePath); // 利 用 用 户 选 择 的 ZIP 文件 创建 ZipFile 对 象 
Enumeration e = zf.entries(); /创建 枚 举 变量 
while (e hasMoreElementsO) { /遍历 枚 举 变量 
ZipEntry entry = (ZipEntry) enextElement0: /获得 ZipEntry 对 象 
if (!entry.getNameO.endsWith(".txt")) { // 如 果 不 是 文本 文件 就 不 进行 解压 缩 
continue; 


} 

/利用 用 户 选择 的 文件 夹 和 ZipEntry 对 象 名 称 创建 解压 后 的 文件 

File currentFile = new File(targetFolder + File.separator + entry.getName()); 
FileOutputStream out = new FileOutputStream(currentFile): 


InputStream in = zf.getInputStream(entry): 

int buffer = 0: 

while ((buffer = in.read0) !=-1) { 
out.write(buffer):; 

} 


in.closeO: 
outclose(): 
} 
zf.closeO; 
} catch (Exception e) { 
e.printStackTraceO: 
} 


} 


/利用 获得 的 ZipEntry 对 象 的 输入 流 
// 将 输入 流 写 入 到 本 地 文件 


< 全 注意 : 对 于 读 到 的 每 一 个 ZipEntry， 都 要 进行 一 次 写 入 数据 的 处 理 ， 这 样 才能 还 原 成 原来 的 文件 。 


(2) 创建 ndexjsp 页 ， 在 该 页 中 获取 用 户 提交 表单 的 ZIP 文件 路 径 和 要 解压 的 文件 夹 目 录 ， 然 后 调用 File 
Util 类 的 unZipFiles0 方 法 ， 实 现 ZIP 文件 的 解压 ， 关 键 代码 如 下 : 
<% 


request.setCharacterEncoding("UTF-8"): 

String submit = request.getParameter("submit"); 
String zipFilePath = request.getParameter("zipFile"); 
String targetPath = request.getParameter("targetPath"); 


1/ 设置 请 求 编码 

/获取 按钮 的 值 

/获取 压缩 文件 路 径 
/获取 目标 文件 夹 路 径 
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FileUtil fleUtil = new FileUtil0: 
if(submit!=nul) { // 判 断 是 否 提交 表单 
if(zipFilePath!=null&-&!zipFilePath.equals("")&& 
targetPath!=nullé&-&!targetPath.equals(™)){ 
fileUtil.unZipFiles(zipFilePath.targetPath); 。 ”// 调 用 方法 将 ZIP 文件 解压 
} 


} 
%> 


图 秘笈 心 法 
解压 缩 文件 首先 要 把 ZIP 文件 转换 成 一 个 ZipFile 对 象 ， 再 利用 ZipEntry 分 割 各 个 被 压缩 的 文件 ， 将 每 个 
ZipEntry 还 原 成 一 个 文件 即 可 。 
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国 实例 说 明 
在 压缩 文件 时 ， 通 常情 况 下 一 个 文件 夹 都 会 有 若干 个 子 文件 夹 。 此 时 该 怎样 处 理 呢 ”本 实例 将 展示 如 何 压 
缩 包 含 子 文件 夹 的 文件 夹 ， 运 行 效果 如 图 12.16 所 示 。 


【区 第 所 有 子 交 件 夫 】 


文件 地 址 ， Estee 


开始 压 蝙 


图 12.16 压缩 所 有 子 文件 夹 


[| 说明: 用 户 选择 需要 压缩 的 文件 天 。 在 压缩 完成 后 ， 表 格 中 显示 压缩 的 文件 。 压 缩 文件 与 用 户 选择 的 文件 
夹 同 名 ， 并 且 位 于 同一 文件 夹 中 。 


图 关键 技术 


本 实例 在 实现 压缩 所 有 子 文件 夹 时 ， 由 于 在 压缩 包 中 是 要 包含 文件 的 路 径 的 ， 因 此 需要 获取 到 文件 夹 下 所 
有 子 文件 的 路 径 ， 包 括 子 文件 夹 下 的 文件 路 径 。 针 对 此 问题 ， 可 以 应 用 递归 的 方法 来 实现 。 递 归 方 法 在 前 面 的 
实例 中 已 经 多 次 用 到 ， 主 要 是 根据 File 类 的 isDirectory0 来 判断 当前 文件 是 否 为 文件 夹 ， 如 果 是 文件 夹 则 会 继续 
调用 本 方法 来 查找 该 文件 夹 下 的 文件 ， 否 则 将 文件 路 径 添 加 到 List 集合 中 。 
图 设计 过 程 

(1) 创建 工具 类 FileUtil, 在 该 类 中 定义 一 个 List 集合 类 型 的 全 局 变量 filePaths,， 用 于 保存 搜索 指定 目录 中 


所 有 子 文件 的 路 径 字符 串 。 编 写 获取 指定 目录 的 所 有 文件 路 径 的 方法 getFiles(String path)， 参 数 path 表示 要 搜 
索 的 目录 ， 将 搜索 出 的 所 有 文件 路 径 添加 到 filePaths 集合 中 ， 关 键 代码 如 下 : 


Public void getFiles(String path) { 


File dir = new File(path); // 根 据 文件 地 址 创建 File 对 象 
File files[] = dirlistFilesO: /获取 文件 夹 下 的 文件 数组 
for (File file:files ) { /循环 遍历 数组 
证 (fileisDirectoryO) 1/ 判断 文件 是 否 是 一 个 目录 
getFiles(file.getAbsolutePathO): 1/ 如果 为 文件 夹 ， 继 续 执 行 本 方法 
else { 
filePaths.add(file.getAbsolutePathO): 1/ 将 文件 路 径 添加 到 集合 中 


} 
} 
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(2) 编写 实现 压缩 功能 的 方法 zipFile0。 参 数 sourceFolder 指明 要 压缩 的 文件 夹 路 径 ，targetZipFile 指明 生 
成 的 压缩 文件 的 保存 位 置 ，base 指明 压缩 文件 夹 的 基本 路 径 ( 如 果 要 压缩 的 文件 夹 是 “d:\ 资 料 ”， 那么 根 路 径 就 
是 “dd\ 资 料 ”)， 关 键 代码 如 下 : 


publie void zipFile(String sourceFolder, File targetZipFile. String base) 
throws IOException { 


getFiles(sourceFolder); // 调 用 方法 获取 指定 目录 下 的 所 有 文件 路 径 

FileOutputStream fos = new FileOutputStream(targetZipFile); // 根 据 给 定 的 targetZipFile 创建 文件 输出 流 对 象 
Zos = new ZipOutputStream(fos): W/ 利 用 文件 输出 流 对 象 创建 Zip 输出 流 对 象 

byte[] buffer = new byte[1024]; 

for (String filePath : filePaths) { // 遍 历 所 有 要 压缩 文件 的 路 径 


File currentFile = new File(filePath); 
ZipEntry entry = new ZipEntry(filePath.substring(base.length() + 1, filePath.lengthO));// 利 用 要 压缩 文件 的 相对 路 径 创建 ZipEntry 对 象 
FileInputStream fis = new FileInputStream(currentFile); 
Zos.putNextEntry(entry); 
int read=0; 
while (read =fis.read(buffer)) != -1) { // 将 数据 写 入 到 Zip 输出 流 中 
Zos.write(buffer, 0, read); 


Zos.closeEntryO; // 关 闭 ZipEntry 对 象 
fis.closeO; 
} 
Zos.close(|); // 释 放 资 源 
fos.closeO; 


(3) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 输入 的 要 压缩 的 文件 夹 路 径 ， 然 后 调用 FileUtil 类 的 zipFile0 方 
法 实现 压缩 文件 夹 中 的 所 有 子 文件 来 ， 关 键 代码 如 下 
< 


Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 编码 
String submit = request.getParameter("submit"); // 获 取 按 钮 的 值 
String filePath = request.getParameter("filePath"); /获取 源 文件 夹 路 径 
FileUtil fileUtil = new FileUtil0; 

if(submit!=nul) { 1/ 判断 是 否 提交 表单 


if(filePath!=null&-&!filePath.equals("")){ 
File folder = new File(filePath); 
File zipFile = new File(folder.getParent(),folder.getName(+"_File.zip"); 
ZipFile.createNewFileO: 
fieUtilLzipFile(filePath.zipFile forder getParentO): /调用 方法 实现 文件 压缩 
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| 秘笈 心 法 

压缩 包含 子 文件 夹 的 文件 夹 的 想法 和 压缩 全 是 文件 的 文件 夹 类 似 ， 区 别 在 于 如 何 找 出 包含 子 文件 夹 的 文件 
夹 的 所 有 文件 ， 并 且 构 造 ZipEntry 时 不 会 出 现 重 名 现象 。 本 实例 采用 获得 要 压缩 文件 夹 中 所 有 文件 的 相对 路 径 
来 创新 地 解决 了 这 个 问题 。 


高 级 


实例 
ae 实用 指数 : 食 食 


国 实例 说 明 


本 实例 在 实例 308 的 基础 上 ， 实 现 了 释放 含有 子 文件 夹 的 压缩 文件 的 功能 。 运 行 本 实例 ， 用 户 需要 选择 压 
缩 文件 ， 在 解压 缩 完 成 后 显示 解压 了 的 文件 ， 解 压缩 后 生成 的 文件 夹 与 用 户 选 择 的 ZIP 文件 在 同一 个 目录 下 ， 
如 图 12.17 所 示 。 
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Ta 
BS 
【 邓 层 文件 夫 压 缩 包 的 释放 
选择 ZIP 文 件 : Eestuest_Fie zp 。 [到 区 ww] 
解压 到 ; EMest 
ibernacesessionactory, java 
Javageb 范 例 大 全 目录 .doc 


ja 处 理 不 允许 输入 中 文 ,c 本 
Java deb 范例 大 全 目录 ”目录 第 一 部 分 (1) .doc 


EL 
图 12.17 深层 文件 夹 压缩 包 的 释放 


图 关键 技术 


本 实例 在 解压 文件 时 ,一 定 要 判断 文件 的 解压 目录 是 否 存在 、 判 断 目录 或 文件 是 否 存在 ,这 时 应 用 的 是 File 
类 的 exists0 方 法 。 如 果 目 录 不 存在 ， 需 要 应 用 File 类 的 mkdirs0 方 法 来 创建 目录 ， 语 法 格式 如 下 : 

public boolean exists0) 

功能 : 测试 此 抽象 路 径 名 表示 的 文件 或 目录 是 否 存在 。 当 且 仅 当 此 抽象 路 径 名 表示 的 文件 或 目录 存在 时 ， 
返回 true; 否则 返回 false。 

public boolean mkdir0 

功能 : 创建 此 抽象 路 径 名 指定 的 目录 。 当 且 仅 当 已 创建 目录 时 ， 返 回 tmue;， 否则 返回 false。 

public boolean mkdirsO 

功能 : 创建 此 抽象 路 径 名 指定 的 目录 ， 包 括 所 有 必需 但 不 存在 的 父 目 录 。 注 意 ， 此 操作 失败 时 也 可 能 已 经 
成 功 地 创建 了 一 部 分 必需 的 父 目 录 。 当 且 仅 当 已 创建 目录 时 ， 返 回 true; 否则 返回 false。 
图 设计 过 程 

(1) 创建 FileUtil 工具 类 ， 编 写实 现 解压 缩 文件 的 方法 unZipFile0， 参 数 zipFile 指明 要 解压 缩 的 ZIP 文 
件 ，targetFile 指明 要 解压 到 的 文件 夹 ，list 是 解压 缩 后 生成 的 文件 的 路 径 ， 关 键 代 码 如 下 : 


Public static void unZipFile(File zipFile, File targetFile, List<String> list) 
throws IOException { 


ZipInputStream in = new ZipInputStream(new FileInputStream(zipFile)); /利用 用 户 选 择 的 ZIP 文件 创建 ZipInputStream 对 象 
ZipEntry entry; 
while ((entry = in.getNextEntryO) ‘= null) { /人 遍历 所 有 ZipEntry 对 象 
证 (entryisDirectoryO) { // 如 果 ZipEntry 对 象 是 一 个 文件 夹 就 进行 迁 代 
new File(targetFiletentry.getName()).mkdirsO:; 
} else { // 如 果 是 文件 就 将 它 写 入 到 指定 的 文件 夹 中 
File file = new File(targetFile , entry.getNameO): 
File folder = new File(file getParentO): 1/ 根据 文件 父 目录 创建 File 对 象 
if('folderexistsO) // 如 果 目 录 不 存在 ， 则 创建 目录 
folder. mkdirs(): 
if(!file.existsO) // 如 果 文 件 不 存在 ， 则 创建 文件 
file.createNewFile(): 
list.add(file.getName()): // 将 新 生成 的 文件 的 路 径 添加 到 集合 中 
FileOutputStream out = new FileOutputStream(file): 
int b; 
while ((b =in.read0) !(=-1) { // 写 入 数据 
out write(b): 
} 
out.closeO; /释放 资源 
entry.cloneO:; 
} 
in.closeO; 


和 
(2) 创建 ndexjsp 页 ， 在 该 页 中 获取 用 户 选择 的 ZIP 文件 和 输入 的 解压 缩 地址 ， 调 用 FileUti 类 的 unZip 
File0 方 法 ， 实 现 解压 缩 ZIP 文件 ， 关 键 代码 如 下 : 
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<96 
List<String> allFilePath = null; 
Tequest setCharacterEncoding("UTF-8"): /设置 请 求 编 码 
String submit = request.getParameter("submit"): /获取 按钮 的 值 
String zipFilePath = request.getParameter("zipFile"): /获取 压缩 文件 的 路 径 
String targetPath = request.getParameter("targetPath"): /获取 目标 文件 夹 路 径 
1/ 判断 是 否 单 击 按钮 提交 表单 


if(submit!=nulD) { 

if(zipFilePath!=nullé-&!zipFilePath.equals("™)&:&: 
targetPath!=null&&!targetPath.equals(”)){ 。“// 验 证 表单 的 值 是 否 为 空 

File zipFile = new File(zipFilePath); // 创 建 ZIP 文件 的 File 对 象 


File targetFile = new File(targetPath);: // 创 建 解 压缩 目录 的 File 对 象 
// 如 果 用 户 输入 的 目录 不 存在 ， 则 创建 该 目录 


targetFi 有 
allFilePath = new ArrayList<String>(; 
FileUtil.unZipFile(zipFile,targetFile,allFilePath); 


} 
%> 


图 秘笈 心 法 
解压 缩 包 含 子 文件 夹 的 文件 夹 的 想法 和 解压 缩 全 是 文件 的 文件 夹 类 似 ， 区 别 在 于 如 何 找 出 包含 子 文件 夹 的 
文件 夹 的 所 有 文件 ， 并 且 构 造 ZipEntry 时 不 会 出 现 重 名 现象 。 


实例 310 
实例 实用 指数 ， 公 友良 


图 实例 说 明 


在 使 用 Java 自 带 的 ZIP 工具 类 时 ， 会 出 现 中 文 乱码 的 问题 。 为 了 完善 工具 箱 ， 本 实例 使 用 Apache 的 ant 
组 件 来 解决 压缩 包 中 文 乱码 的 问题 ， 运 行 效果 如 图 12.18 和 图 12.19 所 示 。 


> 
一 
【解决 压 帝 包 中 文 乱 码 ] 
文件 地 址 : Etest 
开始 压 纺 | 
图 12.18 解决 压缩 包 中 文 乱码 
园 tesel_Flezp -WinRAR [ee 一 一 国 teel_Fiezp -WinRAR [= sl 


EEE 


订 “ 国 Hiezipwestl -ZIP HBR 作 解 包 大 小 为 544177 字 和 ~ 转 “ 国 est_Fiezphestl - ZIP BR 人 解 包 大 小 为 544.177 ~ 


Em 大 个 EEREK 小 间 Er 大 Re 个 
- 时 
昌 We Ba 219136 153255 | 曾 HibematesessionFaedoryjava 3.212 365 划 
a HbematesessionFectoryioe 2 905 让 国 IaWetgR ya de 5 。 278206 有 
ee Wt 国 293 lao T| 
人 it 国生 eve Web 客人 4 生 - 219136 。 158765 N 
i ] i 本 ; 
E TREE [3 全 577 TE] 
一 -一 -二 J 


12.19 ”没有 乱码 的 压缩 包 ( 左 侧 ) 和 有 乱码 的 压缩 包 ( 右 侧 》 


力 关键 技术 


Apache 的 Ant 包 提 供 了 对 压缩 文件 功能 的 支持 ， 该 组 件 包 是 开源 的 ， 包 文件 可 以 到 Apache 的 官方 网 站 
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(http://www.apache.org) 进行 下 载 。 在 Ant 包 中 的 org.apache.tools.zip.ZipOutputStream 类 实现 了 java.util.ZipFile 
的 功能 ， 并 且 还 对 它 进 行 了 扩展 。 本 实例 使 用 到 的 方法 如 表 12.5 所 示 。 


表 12.5 ZipOutputStream 类 的 常用 方法 


作 用 
利用 底层 的 输出 流 对 象 创建 新 的 ZIP 输出 流 对 象 


close() 关闭 输出 流 并 释放 相关 资源 
closeEntry() 将 所 有 必需 的 数据 写 入 到 当前 entry 中 
PutNextEntry(ZipEntry ze) 开始 写 入 下 一 个 ZipEntry 对 象 


写 入 数据 


Write(byte[] b. int offset. int length) 
图 设计 过 程 

(1) 创建 工具 类 FileUtil, 编写 实现 压缩 功能 的 方法 zipFile0。 参数 sourceFolder 指明 要 压缩 的 文件 夹 路 径 ， 
targetZipFile 指明 生成 的 压缩 文件 的 保存 位 置 , base 指明 压缩 文件 夹 的 基 路 径 ( 如 果 要 压缩 的 文件 夹 是 “di\ 资 料 ”， 
那么 根 路 径 就 是 “di:\ 资 料 ”)， 关 键 代码 如 下 : 


public void zipFile(String sourceFolder File targetZipFile, String base) 
throws IOException { 


getFiles(sourceFolden); /调用 方法 获取 指定 目录 下 的 所 有 文件 路 径 
FileOutputStream fos = new FileOutputStream(targetZipFile); /根据 给 定 的 targetZipFile 创建 文件 输出 流 对 象 
ZipOutputStream zos = new ZipOutputStream(fos); /利用 文件 输出 流 对 象 创建 Zip 输出 流 对 象 
byte[] buffer = new byte[1024]: 

for (String filePath : filePaths) { // 遍 历 所 有 要 压缩 文件 的 路 径 


File currentFile = new File(filePath); 
ZipEntry entry = new ZipEntry(filePath.substring(base.length() + 1, filePath.lengthO)):// 利 用 要 压缩 文件 的 相对 路 径 创建 ZipEntry 对 象 


FileInputStream fis = new FileInputStream(currentFile); 

Zos.putNextEntry(entry); 

intread = 0; 

while ((read = fis.read(buffer)) != -1) { // 将 数据 写 入 到 Zip 输出 流 中 
Zos.write(buffer, 0, read); 


} 
Zzos.closeEntryO; /关闭 ZipEntry 对 象 
fis.closeO; 

} 

Zos.closeO; // 释 放 资源 

fos.close0; 

} 
(2) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 输入 的 要 压缩 的 文件 夹 路 径 ， 然 后 调用 FileUtil 类 的 zipFile0 方 


法 实现 压缩 文件 夹 中 的 所 有 子 文件 夹 ， 关 键 代 码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 
String submit = request.getParameter("submit"); /获取 按钮 的 值 
String filePath = request.getParameter("filePath"): /获取 文件 夹 路 径 
FileUtil fileUtil = new FileUtil0: 

if(submit!=null){ 1/ 判断 是 否 提交 表单 


if(filePath!=null&-&!filePath.equals(™")){ 
File folder = new File(filePath); 
File zipFile = new File(folder getParentO.folder getNameO+"”File zip"): 
zipFile.createNewFileO: 
fileUtil.zipFile(filePath.zipFile.forder.getParent0):// 调 用 方法 实现 文件 压缩 


} 
%> 


国 秘笈 心 法 
使 用 Java 自 带 的 压缩 工具 类 压缩 文件 名 中 有 中 文 的 文件 〈 夹 ) 时 会 出 现 乱码 的 问题 ， 此 时 可 以 考虑 使 用 
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Apache 的 Ant 包 ， 它 增加 了 对 中 文 的 支持 。 


高 级 


实 合 E 
实例 311 实用 指数 : 傅 食 食 : 


图 实例 说 明 

在 获得 一 个 以 ZIP 格式 压缩 的 文件 后 ， 需 要 将 其 进行 解压 缩 ， 还 原 成 压缩 前 的 文件 。 然 而 当 被 压缩 的 文件 
名 中 有 中 文 时 ，Java 自 带 的 压缩 工具 类 会 出 现 java.lang.IllegalAreumentException 异常 。 因 此 本 实例 使 用 Ant 实 
现 文 件 解压 缩 功 能 ， 实 例 的 运行 效果 如 图 12.20 所 示 。 


Evest\est? File zn (CNW... 
Evest 


mA TI TT 
indexPath. txt 

第 5 章 “Web 应 用 的 娘 造 者 一 一 Servlet 技 术 .DOC EE 
第 6 章 打造 无 脚本 的 JSP 页 面 一 一 EL 与 JSTL 标 签 库 .DOC 上 3 
第 7 章 “动态 网 站 之 灵 瑰 一 数据 库 应 用 开发 .DOC = 


图 12.20 Apache 实现 文件 解压 缩 


图 关键 技术 


Apache 的 Ant 包 提供 了 对 压缩 文件 功能 的 支持 。 它 的 org.apache.tools.zip.ZipFile 类 可 以 作为 java.util.ZipFile 
的 替代 品 。 除 了 UTF-8， 该 类 对 于 文件 名 编码 方式 还 提供 了 其 他 支持 ， 这 样 就 可 以 避免 中 文 乱码 的 问题 。 本 实 
例 使 用 到 的 方法 如 表 12.6 所 示 。 


表 12.6 ZipFile 类 的 常用 方法 


方 法 名 作 用 
ZipFile(java.io.File 利用 给 定 的 文件 对 象 创建 ZipFile 对 象 
closel 关闭 压缩 文档 
getEntries 获得 所 有 的 ZipEntry 对 象 
getInputStream(ZipEntry ze 返回 读 取 给 定 ZipEntry 对 象 的 输入 流 


图 设计 过 程 
(1) 创建 FileUtil 工具 类 , 编写 实现 解压 缩 文件 的 方法 unZipFile0,， 参数 zipFile 指明 要 解压 缩 的 ZIP 文件 ， 
targetFile 指明 要 解压 到 的 文件 夹 ，list 是 解压 缩 后 生成 的 文件 的 路 径 ， 关 键 代 码 如 下 : 


Public static void unZipFile(File zipFile. File targetFile, List<String> list) 
throws IOException { 


ZipFile zf = new ZipFile(zipFile); // 创 建 ZipFile 对 象 
Enumeration e = zf.getEntries(); 
While (e hasMoreElementsO) { /遍历 所 有 ZipEntry 对 象 
ZipEntry entry = (ZipEntry) enextElementO: 
证 (entryisDirectoryO) { /如 果 ZipEntry 对 象 是 一 个 文件 夹 就 创建 这 个 文件 夹 
new File(targetFile + entry.getNameO)-mkdir0: 
yelse { 
File file = new File(targetFile + entry.getName(): /获得 被 压缩 的 文件 
File temp = new File(file.getParentO): /获得 被 压缩 文件 的 父 文件 来 
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if(!temp.existsO) 
temp mkdirs0: 
ifileexists0) 
file.createNewFile0: 
listadd(file getNameO): 


while (b=inread0) =-1) { 
out writeb: 


} 
outcloseO; 
和 
} 
zf.closeO|); 
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/1 如果 父 文件 夹 不 存在 ， 则 创建 
// 各 果 文件 不 存在 ， 则 创建 

// 将 文件 的 路 径 保存 到 列表 中 
// 将 数据 写 入 到 创建 好 的 文件 


/释放 资源 


/释放 资源 


} 
(2) 创建 index.jsp 页 ， 在 该 页 中 获取 用 户 选择 的 ZIP 文件 和 输入 的 解压 缩 地 址 ， 调 用 FileUtil 类 的 unZip 


File0 方 法 ， 实 现 解 压缩 ZIP 文件 ， 关 键 代码 如 下 : 
<% 


List<String> allFilePath = null; 
Tequest.setCharacterEncoding("UTF-8"); 
String submit = request. getParameter("submit"); 
String zipFilePath = request.getParameter("zipFile"); 
String targetPath = request.getParameter("targetPath"); 
if(submit!=nulD{ 
if(zipFilePath!=null&-&!zipFilePath.equals("")&-&: 
targetPath!=nullé-&!targetPath.equals("™"){ 
File zipFile = new File(zipFilePath); 
File targetFile = new File(targetPath); 
if(!targetFile.exists()) 
targetFile mkdirsO: 
allFilePath = new Array] 


/设置 请 求 编码 

1/ 获取 按钮 的 值 

1/ 获取 压缩 文件 的 路 径 

/获取 目标 文件 夹 路 径 

1/ 判断 是 否 单 击 按钮 提交 表单 


/验证 表单 的 值 是 否 为 空 

/创建 ZIP 文件 的 File 对 象 

/创建 解压 缩 目 录 的 File 对 象 

/如 果 用 户 输入 的 目录 不 存在 ， 则 创建 该 目录 


List<String>(); 
FileUtil.unZipFile(zipFile,targetFile.allFilePath); 


} 
%> 


图 秘笈 心 法 


解压 缩 文 件 可 以 把 ZIP 文件 转换 成 一 个 ZipFile 对 象 ， 再 利用 ZipEntry 分 割 各 个 被 压缩 的 文件 ， 将 每 个 


ZipEntry 还 原 成 一 个 文件 即 可 。 


实例 312 


图 实例 说 明 


对 于 一 个 已 经 被 序列 化 的 对 象 ， 如 果 要 将 其 还 原 该 怎么 办 呢 ? 本 实例 在 实例 311 的 基础 上 实现 对 序列 化 文 
件 的 解压 缩 操作 和 反 序 列 化 操作 。 运 行 本 实例 ， 用 户 需要 选择 序列 化 文件 的 压缩 文件 ， 单 击 “ 反 序列 化 ”按钮 


即 可 实现 Java 对 象 的 反 序 


| 


列 化 ， 运 行 效果 如 图 12.21 所 示 。 


【让 纺 java 寺 多 】 


渤 择 永 列 化 文 秆 : Eest 序 到 化 文件 _Fie zi E22 


12.21 解压 缩 文件 实现 Java 对 象 反 序列 化 
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图 关键 技术 
ObjectInputStream 类 位 于 java.io 包 中 , 用 于 恢复 那些 以 前 序列 化 的 对 象 。 本 实例 使 用 的 方法 如 表 12.7 所 示 。 
表 12.7 Objectinputstream 类 的 常用 方法 


方 法 名 
ObjectInputStream(InputStream in) 
TeadObjectt 


图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 编 写 方法 unzipSerializationObjectO 实 现 解压 缩 文 件 和 反 序 列 化 功能 ， 参 数 file 
指明 要 解压 缩 的 文件 ， 关 键 代码 如 下 : 
public static void unzipSerializationObject(File file) 
throws IOException, ClassNotFoundException { 
ZipFile zipFile = new ZipFile(file); // 创 建 ZipFile 对 象 
File currentFile = null; 
Enumeration e = zipFile.entries(); 
While (e.hasMoreEl ntsO) { 
ZipEntry entry = (ZipEntry) e.nextElement(); 
if (!entry.getName().endsWith(".dat")) { // 遇 到 后 级 名 是 .dat 的 文件 就 进行 解压 缩 


continue; 


作 用 
创建 从 指定 InputStream 读 取 的 ObjectInputStream 
从 ObjectInputStream 读 取 对 象 


} 

currentFile = new File(file.getParent(),entry.getName()); 
FileOutputStream out = new FileOutputStream(currentFile); 
InputStream in = zipFile.getInputStream(entry); 

iint buffer = 0; 


while ((buffer = in.read0) = -1) { // 写 入 文件 
out.write(buffer); 
” 
in.closeO; // 释 放 资 源 
out.close(); 
} 
FileInputStream in = new FileInputStream(currentFile); 
ObjectInputStream ois = new ObjectInputStreamtin): 1/ 读 入 解压 缩 后 的 文件 
currentFile.delete(); 1/ 删除 解压 缩 产生 的 文件 
} 
(2) 创建 index.jsp 页 ， 在 该 页 中 调用 FileUtil 类 的 方法 ， 实 现 解 压缩 文件 和 反 序 列 化 Java 对 象 ， 关 键 代码 
如 下 : 
<% 
Tequest.setCharacterEncoding("UTF-8"): /设置 请 求 编码 
String submit = request.getParameter("submit"): // 获 取 按 钮 的 值 
String zipFilePath = request.getParameter("zipFile"); /获取 用 户 选择 的 文件 路 径 
if(submit!=null){ 1/ 判断 是 否 提交 表单 
if(zipFilePath!=null&-&!zipFilePath.equals(™")){ 
File zipFile = new File(zipFilePath); 
FileUtil.unzipSerializationObject(zipFile); /1/ 实 现 文件 解压 缩 并 反 序列 化 Java 对 象 
} 
3 
%> 
国 秘笈 心 法 


当 使 用 序列 化 来 保存 对 象 后 ， 如 果 需 要 再 次 将 序列 化 文件 还 原 成 原来 的 对 象 ， 就 要 进行 反 序列 化 。 反 序列 
化 就 是 打开 字 节 流 并 且 重 构 对 象 ， 此 时 新 的 对 象 和 序列 化 时 的 对 象 是 一 样 的 。 如 果 读 者 在 前 面 的 实例 中 改变 了 
对 象 的 状态 ， 那 么 在 本 实例 中 反 序 列 化 生成 的 对 象 也 保存 了 前 面 的 操作 。 
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实例 313 
实用 指数 : 但 全 

图 实例 说 明 

文件 压缩 是 对 数据 的 一 种 紧凑 存储 格式 ， 通 过 压缩 能 够 2 
使 文件 更 小 ， 占 用 更 少 的 磁盘 空间 ， 同 时 也 可 以 减少 网 络 传 | 
输 的 时 间 。 本 程序 实现 文件 到 RAR 文档 的 压缩 ， 运 行 效果 如 [文件 所 为 RAR 文 档 
图 12.22 所 示 。 x 作 地 址 :EN 

> 正 蛇 文档 : E:\mytxt\test.rar [本 

图 关键 技术 

Runtime 类 是 每 个 Java 程序 都 内 置 的 一 个 运行 时 对 象 。 12.22 文件 压缩 为 RAR 文档 


通过 这 个 对 象 可 以 执行 外 部 命令 , 这 样 就 可 以 执行 RAR 的 压 
缩 、 解 压缩 、 添 加 注释 等 各 种 命令 。 但 是 这 个 类 不 能 直接 创建 对 象 ， 需 要 使 用 静态 方法 来 获取 实例 对 象 并 且 调 
用 对 象 的 方法 来 执行 外 部 命令 。 方 法 的 声明 如 下 : 

(1) 获取 Runtime 实例 对 象 

public static Runtime getRuntime() 

返回 与 当前 Java 应 用 程序 相关 的 运行 时 对 象 。 Runtime 类 的 大 多 数 方法 是 实例 方法 ， 并 且 必 须根 据 当前 的 
运行 时 对 象 对 其 进行 调用 。 

(2) 执行 外 部 命令 

public Process exec(String command) throws IJOException 

在 单独 的 进程 中 执行 指定 的 字符 串 命令 ， 并 返回 该 命令 的 进程 对 象 。 

参数 说 明 

@ command: 一 条 指定 的 系统 命令 。 

@ 返回 一 个 新 的 Process 对 象 ， 用 于 管理 子 进程 。 


图 设计 过 程 
(1) 创建 FileUtil 类 ， 编 写 压缩 文件 为 RAR 文档 的 方法 toRarFile0， 参 数 folderPath 为 要 压缩 的 文件 夹 路 
径 ， 参 数 rarFilePath 为 RAR 压缩 文件 的 路 径 ， 关 键 代 码 如 下 : 


public void toRarFile(String folderPath.String rarFilePath) { 
getFiles(folderPath): 1/ 调用 方法 获取 文件 夹 中 所 有 文件 的 路 径 
try{ 
File listFile = File.createTempFile("fileList", ".tmp"); /创建 临时 文件 ， 用 于 保存 压缩 文件 列表 
uffer fileList = new StringBuffer();: 
for(String filePath:filePaths){ 
fileList.append(filePath+"\n"): // 将 所 有 文件 路 径 添加 到 StringBuffer 中 
} 


FileOutputStream fs = new FileOutputStream(listFile);// 根 据 临时 文件 ， 创 建文 件 输出 流 


fs.write(fileList.toString().getBytesO): // 将 文件 路 径 以 字 节 形式 写 入 临时 文件 
fs.closeO; 
File rarFile = new File(rarFilePath): // 根 据 RAR 路 径 创建 File 对 象 
String command = "rar a " + rarFile.getPath|) + " @" + listFile.getPathO): 
Runtime runtime = Runtime.getRuntimeO); /获取 Runtime 对 象 
process = runtime.exec(command toStringO + "m"): /执行 压缩 命令 
process.getOutputStream().closeO|; /关闭 进程 输出 流 
} cateh IOException ©) { 
eprintstackTrace0: 


1 
} 


(2) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 输入 的 要 压缩 的 文件 夹 路 径 和 RAR 文件 路 径 , 然后 调用 FileUtil 
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类 的 toRarFile( 方 法 ， 将 文件 压缩 为 RAR 文档 ， 关 键 代 码 如 下 : 
< 


Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 

String submit = request.getParameter("submit”); // 获 取 按 钮 的 值 

String filePath = request.getParameter("filePath"): /获取 要 压缩 的 文件 夹 路 径 
String rarfilePath = request.getParameter("rarFile"): /获取 了 RAR 文件 路 径 
FileUtil fileUtil = new FileUtil0: 

if(submit!=nulD) { // 济 断 是 否 提交 表单 


if(filePath!=null&-&!filePath equals("")&-&: 
TarfilePath!=nullé-&.!rarfilePath.equals(™)){ 
fileUtil.toRarFile(filePath.rarfilePath); // 文 件 压 缩 为 RAR 文档 
} 
} 
%> 


国 秘笈 心 法 

调用 Runtime 对 象 的 exec0 方 法 可 以 执行 一 个 外 部 命令 并 返回 命令 的 进程 ， 这 个 进程 的 输出 流 可 以 向 命令 
传递 参数 和 其 他 数据 ， 但 是 如 果 这 个 输出 流 不 关闭 ， 命 令 就 始终 不 会 完成 ， 进 程 会 继续 等 待 输入 。 就 像 本 实例 
如 果 不 关 闭 这 个 输出 流 ， 那 么 就 不 会 执行 压缩 命令 ， 除 非 程序 关闭 导致 输出 流 被 销毁 。 


力 实例 说 明 


文件 解压 缩 是 最 常用 的 数据 操作 ， 目 前 大 多 数 资料 和 软件 都 
采用 RAR 格式 进行 压缩 并 在 网 站 提供 下 载 , 经 过 压缩 的 资源 体积 下 
更 小 、 在 网 络 中 的 传输 速度 更 快 。 用 户 从 网 站 下 载 该 文件 之 后 ， | 
需要 使 用 RAR 软件 进行 解压 缩 才 能 获取 自己 想 要 的 资源 。 本 实例 


【让 于 戎 RAR 于 请 昌 


实现 对 RAR 压缩 包 的 解压 缩 功能 , 可 以 针对 指定 的 压缩 包 文件 定 aa ER 
制 解压 的 目标 文件 夹 ， 运 行 效果 如 图 12.23 所 示 。 EE 
国 关键 技术 图 12.23 解压 缩 RAR 压缩 包 


本 小 节 所 介绍 关于 操作 RAR 文件 的 所 有 实例 都 是 通过 调用 Rarexe 命令 来 执行 的 ， 如 果 读 者 的 计算 机 中 安 
装 了 WinRar, 那么 在 该 软件 的 安装 文件 夹 中 会 包含 rarexe 命令 文件 , 本 节 所 有 实例 需要 这 个 命令 才能 实现 RAR 
文档 的 操作 。 下 面 介绍 使 用 该 命令 的 方法 。 

(1) 复制 RAR 命令 文件 到 项 目 文件 夹 

可 以 找到 WinRar 软件 的 安装 文件 夹 ， 把 rarexe 文件 复制 到 自己 的 项 目 中 。 例如, 在 Eclipse 项 目 中 , 把 rar. 
exe 文件 复制 到 根 目 录 ， 即 与 sre 文件 夹 同 级 ， 这 样 程序 代码 就 可 以 直接 调用 该 命令 ; 也 可 以 把 rar.exe 文件 复制 
到 某 个 文件 夹 ， 然 后 在 程序 代码 中 使 用 绝对 路 径 来 调用 该 命令 ,但 是 那样 不 利于 软件 的 复制 与 传播 。 

(2) 设置 path 环境 变量 

另 一 种 方法 是 复制 WinRar 软件 的 安装 文件 夹 路 径 ， 然 后 添加 到 系统 的 path 环境 变量 中 。 例 如 ， 笔 者 计算 
机 中 的 安装 路 径 是 “C:\Program Files\WinRAR”。 把 这 个 文件 夹 路 径 作 为 值 添 加 到 path 环境 变量 中 ， 如 果 其 左右 
都 有 其 他 变量 值 ， 那 么 使 用 英文 的 “:” 分 号 进行 分 割 。 例 如 : 


:C:\Program FilesVWinRAR: 


把 上 面 的 字符 串 添 加 到 path 环境 变量 中 ， 然 后 重新 运行 Eclipse 以 使 用 新 的 系统 环境 变量 。 
Ah) 注意 : path 环境 变量 的 原 有 内 容 不 要 删除 ， 否 则 会 影响 其 他 软件 的 使 用 ， 这 包括 对 Java 编译 命令 的 影响 。 
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图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 在 该 类 中 编写 继承 自 Thread 类 的 内 部 线程 类 DeCompressThread， 实 现 调用 文 
件 的 解压 缩 命令 ， 关 键 代码 如 下 : 
Private final class DeCompressThread extends Thread { 
private final String command; 
Private DeCompressThread(String command) { 
this.command = command; 
} 
rs 
final Process process = Runtime.getRuntime().exec(command); 

.close(); 


el 


} 


Process, 
} catch (IOException el) { 
.printStackTraceO; 


} 
} 


(2) 在 FileUtil 类 中 , 编写 文件 解压 缩 的 方法 enRarFile0， 参 数 rarFilePath 指 的 是 要 解压 缩 的 RAR 文件 路 
径 , 参数 targetFolderPath 指 的 是 文件 解压 路 径 , 在 方法 中 启动 DeCompressThread 线程 实现 RAR 文件 的 解压 缩 ， 
关键 代码 如 下 : 
Ppublic void enRarFile(String rarFilePath.String targetFolderPath) { 
File rarFile = new File(rarFilePath); 
File targetFolder = new File(targetFolderPath); 


if('targetFolderexistsO) // 如 果 文 件 夹 路 径 不 存在 ， 则 创建 
targetFolder.mkdirsO; 

String command = "rar x " + rarFile + " " + targetFolder + " /y"; // 解 压缩 命令 的 字符 串 

new DeCompressThread(command).startO: // 创 建 并 启动 解压 缩 线 程 


} 

(3) 创建 index.jjsp 页 ， 在 该 页 中 获取 用 于 选择 的 RAR 文件 路 径 和 输入 的 解压 路 径 ， 调 用 FileUtil 类 的 
enRarFile0 方 法 ， 实 现 RAR 文件 的 解压 缩 ， 关 键 代码 如 下 : 

<% 


Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 编码 
String submit = request.getParameter("submit"); /获取 按钮 的 值 
String filePath = request.getParameter("filePath"): /获取 要 解压 的 路 径 
String rarfilePath = request.getParameter("rarFile"); /获取 RAR 文件 路 径 
FileUtil fileUtil = new FileUtilO; 

if(submit!=nulD) { // 判 断 是 否 提 交 表 单 


if(filePath!=null&-&!filePath.equals("")&-&: 

TarfilePath!=nullé-&-!rarfilePath.equals("")){ 

fileUtil.enRarFile(rarfilePath.filePath); // 调 用 解压 RAR 文件 的 方法 
. 


} 
%> 


图 秘笈 心 法 
解压 缩 动 作 根据 压缩 包 的 大 小 、 包 含 的 文件 数量 来 决定 ， 如 果 压 缩 包 内 容 较 多 、 体 积 较 大 ， 解 压缩 就 会 变 


成 一 个 非常 耗 时 的 操作 ， 这 样 的 业务 是 不 允许 在 GUI 线程 中 处 理 的 ， 所 以 应 该 采用 新 的 线程 来 接收 文件 的 解压 
缩 操作 ， 从 而 把 GUI 线程 解放 ， 避 免 程序 界面 死 锁 。 
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图 实例 说 明 
把 多 个 文件 压缩 成 一 个 压缩 文档 是 方便 文件 的 保存 与 传输 ， 经 过 压缩 后 文件 内 容 不 变 ， 但 是 占用 磁盘 空间 
更 小 ， 这样 有 利于 Internet 传输 ， 也 可 以 利用 移动 设备 在 多 个 计算 机 中 进行 复制 。 有 时 对 于 太 大 或 者 太 多 的 文件 
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进行 压缩 后 体积 仍然 很 大 , 这 种 情况 下 可 以 把 压缩 后 的 文件 进行 分 卷 , 也 就 是 说 压缩 后 的 RAR 文档 不 再 是 一 个 
文件 而 是 多 个 指定 大 小 的 压缩 分 卷 文 件 ， 这 样 可 以 分 别传 输 部 
分 分 卷 文 件 ， 然 后 在 目的 地 把 各 分 卷 文 件 解 压缩 成 原 有 资源 文 
件 。 本 实例 就 利用 RAR 实现 了 压缩 文档 的 分 卷 功能 ， 程 序 运行 
效果 如 图 12.24 所 示 。 


图 关键 技术 
本 实例 和 前 面 讲解 的 几 个 用 于 处 理 RAR 文件 压缩 的 实例 类 
似 ， 都 是 利用 Runtime 类 的 exec0 方 法 来 执行 WinRAR 软件 的 12.24 文件 分 卷 压 缩 


rar 命令 。rar 命令 的 语法 格式 如 下 : 
RAR < 命令 >[ -< 开关 > ] < 压缩 文件 > 【<@ 列 表 文件 .> ] [< 文件 .>] [< 解压 路 径 >] 


本 实例 在 实现 文件 分 卷 压缩 时 ， 主 要 应 用 以 下 命令 : 

rar a -v< 大 小 >[NIbjfmIMis|G] rarFilepath @TmpFilepath 

参数 说 明 

@ a: 添加 文件 到 压缩 文件 中 。 

@ -v: 建立 分 卷 ， 并 指定 分 卷 大 小 。 

@ rarFilePath: 压缩 的 目标 RAR 文件 的 绝对 路 径 。 

@ TmpFilePath: 包含 所 有 文件 路 径 的 Tmp 临时 文件 的 绝对 路 径 。 


[加 说 明 : WinRAR 的 控制 台 命令 参数 还 有 很 多 ,如 果 想 进一步 了 解 这 些 参 数 的 用 法 ,可 以 查看 安装 在 WinRAR 
软件 目录 下 的 Rartxt 说 明文 件 。 


图 设计 过 程 
(1) 创建 工具 类 FileUtil， 编 写 执行 文件 分 卷 压缩 命令 的 内 部 线程 类 CompressThread， 关 键 代码 如 下 : 


Private final class CompressThread extends Thread { 
Private final String command: 


Private CompressThread(String command) { 
this.command = command; 


} 
public void mrun0 { 
try{ 


Runtime runtime = Runtime.getRuntimeO); /获取 Runtime 对 象 
final Process process = nintime.exec(commandtostringO + "m"): ” // 执 行 压缩 命令 
process.getOutputStream().closeO: // 关 闭 进程 输出 流 


} catch (IOException e) { 
e.pri ce0: 
} 
, } 
(2) 编写 文件 压缩 的 方法 toRarFile0， 参 数 folderPath 表示 要 压缩 的 文件 夹 路 径 ， 参 数 rarFilePath 表示 RAR 
压缩 文件 路 径 , 参数 volumeSize 指 分 卷 压缩 文件 的 大 小 , 以 KB 为 单位 。 在 该 方法 中 调用 线程 类 CompressThread 
执行 文件 的 分 卷 压 缩 ， 关 键 代码 如 下 : 


public void toRarFile(String folderPath,String rarFilePath,int volumeSize) { 


getFiles(folderPath): /调用 获取 文件 夹 中 所 有 文件 路 径 的 方法 
try{ 
File listFile = File.createTempFile("fileList", ".tmp"): /创建 临时 文件 ， 用 于 保存 压缩 文件 列表 
StringBuffer fileList = new StringBuffer(); 
for(String filePath:filePaths){ /1/ 遍 历 保存 文件 路 径 的 集合 
fileList.append(filePath+"\n"): // 将 所 有 文件 的 路 径 添 加 到 StringBuffer 中 
} 
FileOutputStream fs = new FileOutputStream(listFile); /1/ 创 建文 件 输出 流 
fs.write(fileList.toString|.getBytesO); /将 文件 路 径 写 入 临时 文件 
fs.closeO; 
File rarFile = new File(rarFilePath): // 根 据 压缩 文件 的 路 径 创建 File 对 象 


String command = "rar a -v"+volumeSizet+"k " + rarFile.getPath() + " @"+ listFile.getPathO:;// 创 建 压缩 命令 字符 串 


472 


第 12 章 文件 的 批量 管理 


new CompressThread(command).startO: 
} catch (IOException €) { 
ep 2 


} 
} 


/创建 并 启动 压缩 线程 


(3) 创建 ndexjsp 页 ， 在 该 页 中 获取 用 户 输入 的 请 求 参 数 ， 然 后 调用 FileUtil 类 的 toRarFile0 方 法 ， 实 现 


文件 的 分 卷 压缩 ， 关 键 代 码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"): // 设 置 请 求 编码 
String submit = request.getParameter("submit"); /获取 按钮 的 值 
String filePath = request.getParameter("filePath"); /获取 要 压缩 的 文件 夹 路 径 
String rarfilePath = request.getParameter("rarFile"); /获取 RAR 文件 路 径 
String volumeSize = request.getParameter("volumeSize"); 1 分 卷 大 小 
FileUtil fileUtil = new FileUtilO: 
if(submit!=nul) { // 浏 断 是 否 提交 表单 
if(filePath!=null&-&!filePath.equals("")&-&- 

rarfilePath!=null&-é!rarfilePath.equals("")&-& 

VolumeSize!=null&&!volumeSize.equals("")){ 

String tmpFilePath = application.getRealPath("/")+"temp"; 

File tmpFileFolder = new File(mpFilePath): 

if(ttmpFileFolderexistsO) 

tmpFileFolder. mkdirs(); /创建 临时 文件 路 径 


fileUtil.toRarFile(filePath,rarfilePath,Integer.parseInt(volumeSize)); // 调 用 文件 分 卷 压缩 的 方法 
) 


} 
%> 


图 秘笈 心 法 

本 实例 中 的 RAR 命令 用 到 了 压缩 文件 列表 参数 ， 主 要 用 于 指定 添加 到 压缩 包 中 的 文件 名 称 和 路 径 。 这些 信 
息 如 果 以 命令 行 的 方式 添加 ， 会 受到 命令 行 长 度 的 限制 ， 所 以 应 该 考虑 把 它们 保存 到 文件 中 ， 然 后 把 这 个 文件 
作为 参数 。 很 明显 这 个 文件 需要 保存 的 是 临时 数据 ， 那 么 可 以 考虑 通过 File 类 创建 一 个 临时 文件 ， 这 个 临时 文 
件 在 不 需要 时 会 被 系统 删除 ， 从 而 释放 磁盘 空间 。 
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图 实例 说 明 


压缩 文件 的 名 称 可 以 简单 地 说 明 其 用 途 ， 但 是 有 些 压 缩 文 档 的 用 途 类 别 不 好 区 分 ， 还 有 一 些 压缩 文档 中 的 
文件 需要 一 份 使 用 说 明 或 者 文档 注释 信息 。RAR 提供 了 对 压缩 文档 添加 注释 的 功能 ， 实 例 运行 效果 如 图 12.25 
和 图 12.26 所 示 。 


a 
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12.25 ”为 RAR 压缩 包 添 加 注释 
图 关键 技术 
RAR 命令 列表 中 包含 一 个 “c” 命 令 ， 该 命令 可 以 为 RAR 压缩 文档 添加 长 度 小 于 32767 的 注释 文本 。 该 命 


图 12.26 RAR 文件 中 添加 的 注释 
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令 的 说 明 如 下 : 
字 节 


TarcannotateTar 


命令 :添加 RAR 压缩 文件 注释 。 当 压缩 文件 被 处 理 时 注释 被 显示 。 文 件 的 注释 长 度 不 允许 超过 32767 个 


例如 ， 为 annotaterar 文件 添加 注释 可 以 使 用 如 下 命令 : 


执行 该 命令 后 ， 在 接 下 来 的 输入 行 中 输入 注释 信息 ， 按 Enter 键 结束 并 添加 注释 。 


另外 注释 也 可 以 从 文件 添加 ， 例 如 : 


Tarc -zinfo.txt annotate.rar 


该 命令 会 从 info.txt 文件 中 读 取 注释 信息 ， 然 后 将 注释 信息 写 入 到 annotate.rar 文件 中 。 


图 设计 过 程 


(1) 创建 FileUtil 工具 类 ， 编 写 为 RAR 添加 注释 的 方法 addNoteToRarFile0， 参 数 note 表示 要 添加 的 注释 


信息 ， 参 数 rarFile 表示 RAR 文件 ， 关 键 代 码 如 下 : 
public void addNoteToRarFile(String note .File rarFile) { 

int length = note.getBytes().length; 

if (length > 32767) { 
return; 

} 

try{ 

String command = "rar c \"" + rarFile + "\"™"; 

Process process = Runtime.getRuntime().exec(command); 
process.getOutputStream().write(note.getBytes()): 
Pprocess.getOutputStream().closeO; 
Process.getInputStream().close(O; 

} catch (IOException el) { 
el.printStackTrace(); 


} 
本 


// 获 取 注 释文 本 长 度 
/限制 文本 长 度 


/执行 添加 注释 命令 

/把 注释 文本 传递 给 注释 命令 
/关闭 输出 流 

// 关 闭 输 入 流 


(2) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 选择 的 RAR 文件 的 地 址 和 注释 信息 ， 然 后 调用 FileUtil 类 的 
addNoteToRarFile0 方 法 ， 实 现 为 RAR 文档 添加 注释 ， 关 键 代码 如 下 : 
< 


Tequest.setCharacterEncoding("UTF-8"): 

String submit = request.getParameter("submit"); 

String rarfilePath = request.getParameter("rarFile"): 

String note = request.getParameter("note"); 

FileUtil fileUtil = new FileUtil0: 

if(submit!=npulD{ 
if(rarfilePath!=null&-&!rarfilePath.equals(™"){ 


// 设 置 请 求 编码 


/获取 注释 信息 
// 济 断 是 否 提交 表单 


fileUtilLaddNoteToRarFile(note.new File(rarfilePath)); /调用 添加 注释 的 方法 


%> 


国 秘笈 心 法 


数据 流 是 对 一 种 资源 访问 的 通道 ， 它 会 一 直 占用 该 资源 ， 所 以 在 程序 处 理 完 相应 的 业务 不 再 需要 该 资源 的 


数据 流 时 ， 应 该 及 时 关闭 ， 释 放 资 源 。 


实例 317 


图 实例 说 明 


高 级 


实用 指数 : 依依 


压缩 文档 常用 于 保存 重要 的 或 者 经 常 传输 的 资源 文件 ， 也 有 人 用 压缩 文档 来 保存 不 常用 的 资源 ， 以 节省 磁 
盘 空 间 。 压 缩 文件 可 以 理解 为 一 个 特殊 的 文件 夹 ， 这 些 特殊 的 文件 夹 中 保存 的 是 压缩 过 的 文件 ， 而 系统 的 资源 
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浏览 器 无 法 像 浏 览 文件 夹 那样 去 浏览 RAR 压缩 文档 ， 这 给 资源 的 查找 带 来 了 不 便 ， 本 程序 实现 RAR 压缩 文档 
中 的 文件 列表 解析 ， 在 程序 界面 中 就 可 以 看 到 RAR 压缩 文档 中 有 什么 文件 ， 程 序 运 行 效果 如 图 12.27 所 示 。 


文件 管理 桑 统 
Sa WEN San oun fone 
2 
E 


细 文 件 列表 


-W 月 份 验 技巧 .rar 3 


压缩 后 大 小 压 纵 率 修改 时 间 


查询 详细 信息 


图 12.27 获取 压缩 包 详细 文件 列表 


图 关键 技术 


本 实例 实现 RAR 压缩 文件 列表 的 读 取 与 解析 ， 并 把 详细 信息 显示 在 表格 控件 中 ， 这 一 切 都 需要 利用 RAR 
命令 来 实现 。RAR 有 一 个 命令 参数 “v” 可 以 显示 指定 RAR 文件 的 列表 ， 而 “-c-” 开 关 参 数 可 以 不 显示 RAR 
文档 的 注释 信息 ， 这 样 方便 程序 对 文件 列表 的 解析 。 实例 中 用 到 的 RAR 完整 命令 格式 如 下 : 


TaTV -c- "rarFile" 


参数 说 明 
rarFile: 是 一 个 RAR 压缩 文档 文件 。 


(1) 创建 FileUtil 类 ,编写 获取 RAR 压缩 包 文 件 详细 列表 的 方法 getRarDetail0， 参 数 rarFile 表示 RAR 文 
件 ， 方 法 返回 封装 文件 信息 列表 的 Vector 集合 ， 关 键 代 码 如 下 : 


public Vector<String> getRarDetail(File rarFile) { 
Vector<String> fileDetails = new Vector<String>(); 


Process process =Runtime. getRuntime() .exec("rar v -c- \"" + rarFile + "\"");// 执 行文 件 列表 提取 命令 
process.getOutputStream(.close0; /关闭 进程 输出 流 


Scanner sc = new Scanner(process.getInputStream()): 
int count = 0; // 创 建行 索引 
While (sc.hasNextO) { 
String line = sc.nextLineO: /获取 文件 列表 信息 的 一 行 
/标记 起 始 结束 索引 
证 (line.contains("------ 一 一 -一 -一 一 -")){ 
count = (count =— 0 ? count + 1 : -1); 
continue; 
} 
证 (count 一 0) // 跳 过 起 始 标记 
continue; 
if(count—-1) // 在 结束 标记 终止 循环 
break: 
证 (Htcount%2 一 0){ /获取 文件 名 称 
fileDetails.add(line): 
}else{ /获取 文件 详细 信息 
fileDetails.add(line); 
} 
Process. .close0; /关闭 输入 流 
} catch (Exception el) { 
el.printStack Trace(); 
A fileDetails: 


} 
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(2) 创建 index.jsp 页 ， 在 该 页 中 获取 用 户 选择 的 RAR 文件 ， 然 后 调用 FileUtil 类 的 getRarDetail0 方 法 ， 
获取 文件 详细 列表 ， 关 键 代 码 如 下 : 
=<% 


Tequest.setCharacterEncoding("UTF-8"): // 设 置 请 求 编码 
String submit = request. getParameter("submit"); /获取 按钮 的 值 
String rarfilePath = request getParameter("rarFile"): /获取 RAR 文件 路 径 
FileUtil fileUtil = new FileUtil0: 
if(submit!=nul) { // 判 断 是 否 提交 表单 

if(rarfilePath!=null&-&!rarfilePath.equals("")){ 

details = fileUtilgetRarDetail(new File(rarfilePath)); 
} 


} 
%> 
(3) 在 index.jsp 页 中 ， 遍 历 Vector 集合 ， 输 出 文件 详细 信息 到 表格 ， 关 键 代 码 如 下 : 


<% 

if(fileDetails!=nulD{ 
for(int i=0;i<fileDetails.sizeO;i++){ 

%> 

<u> 
<td><%if(i%2—0) {out.printIin(fileDetails.get(D));}%></td> 
<% 
(i%2—1){ 

String[] info= fileDetails.get(i).split("\s+"); 

%> 
<td><%=info[1] %></td> 
<td><%=info[2] %></td> 
<td><%=info[3] %></td> 
<td><%=info[4] %>&nbsp;<%=info[5] %></td> 
<%} %> 

</a> 

<%}} %> 


图 秘笈 心 法 


计数 器 不 只 是 网 页 上 记录 用 户 访问 数量 的 部 件 ， 它 还 可 以 应 用 到 各 种 编程 环境 中 。 例 如 ， 本 实例 利用 计数 
器 对 资源 的 数据 进行 定位 ， 计 数 器 的 作用 是 区 分 信息 的 起 始 与 结束 标记 。 


图 实例 说 明 

RAR 压缩 文档 对 于 少量 文件 的 压缩 与 解压 缩 速度 很 快 ， 但 是 如 果 文件 数量 和 数据 太 多 ， 使 用 任何 优化 技术 
都 无 法 大 幅度 提高 压缩 速度 ， 因 为 没有 数据 可 以 忽略 与 抛弃 。 而 对 于 这 样 大 的 RAR 压缩 包 要 删除 其 中 的 某 个 或 
某 些 文件 ， 重 新 解压 、 整 理 再 压缩 是 不 现实 的 。 为 此 ， 本 程序 通过 对 RAR 命令 的 操作 ， 实 现 了 直接 删除 RAR 
压缩 包 中 部 分 文件 的 功能 。 程 序 运行 效果 如 图 12.28 所 示 ， 选 中 复 选 框 选择 压缩 包 文件 信息 列表 中 的 文件 ， 然 
后 单 击 “ 删 除 文件 ”按钮 ， 即 可 将 RAR 压缩 包 中 的 文件 删除 。 


图 关键 技术 
本 实例 使 用 RAR 的 命令 实现 从 RAR 压缩 包 中 删除 指定 名 称 的 文件 -实例 中 用 到 的 RAR 完整 命令 格式 如 下 : 


Tar d -c- "rarFile” deleteFile 

参数 说 明 

@ rarFile: 是 一 个 RAR 压缩 文档 文件 。 

@ deleteFile: 是 将 要 从 RAR 压缩 文件 中 删除 的 文件 。 
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12.28 从 RAR 压缩 包 中 删除 文件 
赔 明 : deleteFile 参数 可 以 使 用 通配符 ， 如 “*” 代 表 所 有 字符 ， 而 “?” 代 表单 个 字符 。 
图 设计 过 程 
(1) 创建 FileUtil 工具 类 , 编写 从 RAR 压缩 包 删 除 文件 的 方法 deleteFileFromRar()， 参 数 rarFile 表示 RAR 
文件 ， 参 数 filePath 表示 要 删除 的 文件 路 径 ， 关 键 代码 如 下 : 


public void deleteFileFromRar(File rarFile,String filePath){ 
try{ 
Process exec = Runtime.getRuntime().exec("rar d -c- \" + rarFile + "\" "+filePath); /执行 RAR 删除 命令 


Scanner scan = new Scanner(exec.getInputStream()); // 创 建 进程 输入 流 
while (scan hasNextO) { 1/ 遍历 输入 流 内 容 
scan.nextLine(); /清空 输入 流 数据 
和 
scan.close(); /关闭 输入 流 
} catch (IOException el) { 
el.printStackTrace(): 


} 
} 


(2) 创建 ndexjsp 页 ， 在 该 页 中 获取 用 户 选中 的 复 选 框 的 值 ， 用 户 每 选中 一 个 复 选 框 ， 就 会 调用 自 定义 
JavaScript 函数 将 复 选 框 的 值 累 加 ， 并 以 〈,) 分 隔 开 ， 该 函数 的 实现 比较 简单 ， 此 处 不 再 详细 介绍 ， 有 具体 代码 
请 查看 本 书 附 带 的 光盘 。 接 下 来 根据 用 户 选中 的 复 选 框 的 值 〈 文 件 名 称 ) 调用 FileUtil 类 的 deleteFileFromRar( 
方法 ， 删 除 RAR 压缩 包 中 的 文件 ， 关 键 代码 如 下 : 


<% 

Vector<String> fileDetails = null; 

Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 

String submit = request.getParameter("submit"); 1/ 获取 按钮 的 值 

String delButton = request.getParameter("delButton"); 

String rarfilePath = request.getParameter("rarFile"): /获取 RAR 文件 路 径 

FileUtil fileUtil = new FileUtilO: 

if(submit!=null) { // 单 击 “ 查 询 文件 列表 ”按钮 
if(rarfilePath!=null&-&-!rarfilePath.equals(™"){ 

fileDetails = fileUtil.getRarDetail(new File(rarfilePath)): 

} 

} 

if(delButton!=nulD){ // 单 击 “ 删 除 文件 ”按钮 
String pathStr = request.getParameter("path"):; // 获 取 复 选 框 的 值 ， 该 值 由 “, ”分 隔 
String[] paths = pathStrsplit(".): 
for(String path:paths){ 

fileUtil.deleteFileFromRar(new File(rarfilePath).path); /1/ 调 用 删除 文件 的 方法 

3 
fileDetails = fileUtil. getRarDetail(new File(rarfilePath)): /W/ 重 新 加 载 文件 列表 

1 

%> 
国 秘笈 心 法 
在 JDK 1.5 中 新 增 了 Scanner 扫描 器 类 ， 该 类 提供 了 更 加 灵活 的 输入 流 读 取 方式 ， 并且 支持 正则 表达 式 , 本 


477 


Java Web 开发 实例 大 全 (基础 卷 ) 
身 提供 的 API 可 以 读 取 单 个 字符 、 单 个 类 型 数据 、 整 行 读 取 等 。 


力 实例 说 明 

计算 机 中 有 很 多 数据 文件 都 使 用 RAR 或 其 他 压缩 格式 进行 备份 , 在 需要 时 来 做 恢复 。 作 为 备份 的 压缩 文件 
随 着 资料 的 基 类 ， 压 缩 内 容 会 越 来 越 多 ， 本 实例 实现 了 在 压缩 文件 中 搜索 字符 串 的 功能 ， 通 过 这 个 搜索 可 以 确 
认 某 个 要 查找 的 资料 位 于 压缩 包 中 的 哪个 文件 中 ， 程 序 运 行 效果 如 图 12.29 所 示 。 


高 级 
实用 指数 : 食 食 


【在 氏 缩 文件 中 查 泊 字符 串 了 


选择 RAR 文档 :EAIYULIGT Wd) 
入 入 搜索 文本 : 车 责 报销 通知 


指定 扩展 名 :txt 


区 到 


项 到 E;\mytxt.rar / mycxt\ 车 乾 报 销 通知 本 
村 下 失 滑 时 da 0 之 前 把 加 和 | 回 未 条 EE 
el 


图 12.29 在 压缩 文件 中 查找 字符 串 
图 关键 技术 


本 实例 使 用 RAR 命令 实现 从 RAR 压缩 包 中 搜索 指定 的 字符 串 ， 并 确定 该 字符 串 位 于 某 个 文件 中 。 实 例 中 
用 到 的 RAR 完整 命令 格式 如 下 : 

rar i[ilc]="sText" -c- "rarFile" extName 

参数 说 明 

@ sText: 是 要 搜索 的 文本 字符 串 。 

@ rarFile: 是 一 个 RAR 压缩 文档 文件 。 

@@ extName: 是 要 搜索 的 文件 类 型 ， 也 就 是 文件 的 扩展 名 ， 可 以 使 用 通配符 ， 例 如 : 


Tar ii="test" -c- "D:\ 资 料 .rar" *.txt 
[说 明 : 命令 中 的 i 是 搜索 用 的 ， 其 中 还 有 i 和 c 两 个 子 命令 分 别 用 于 指定 搜索 不 区 分 大 小 写 和 区 分 大 小 写 。 
图 设计 过 程 
(1) 创建 FileUtil 工具 类 ,编写 在 压缩 文件 中 查找 字符 串 的 方法 searchRarInfo0， 参 数 rarFile 表示 RAR 文 
件 ， 参 数 searchStr 表示 要 查找 的 字符 串 ， 参 数 extendStr 表示 要 查找 的 文件 的 扩展 名 ， 关 键 代码 如 下 : 
public String searchRarInfo(File rarFile.String searchStr.String extendStr){ 
StringBuffer str = new StringBuffer(): 
int count = 0; 
如 en "" "十 extendStr); /执行 RAR 命令 
Scanner scan = new Scanmer(process.getInputStream0): 。”// 获 取 进程 的 输入 流 扫 描 器 


while (scan hasNextO) { // 遍 历 进程 执行 结果 
String line = scan.nextLine(); // 获 取 单 行 信息 
让 dineisEmptyO) 
count+t: 
证 (count<2) // 过 滤 非 查询 结果 
continue: 
str.append(line + "\n"); // 查 询 结果 添加 到 StringBuffer 


478 


第 12 章 文件 的 批量 管理 


} 
} catch (IOException e1) { 
el.printStack TraceO): 


了 
return str.toString(); // 返 回 查询 结果 字符 串 


} 
(2) 创建 ndexjsp 页 ， 在 该 页 中 获取 用 户 选择 的 RAR 文件 路 径 、 搜 索 字 符 串 以 及 文件 扩展 名 ， 然 后 调用 
FileUtil 类 的 searchRarInfo0 方 法 ， 获 取 到 查询 结果 字符 串 ， 关 键 代码 如 下 : 
< 


String searchInfo = ""; /用 于 保存 查询 结果 字符 串 
Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 

String submit = request.getParameter("submit"); /获取 按钮 的 值 

String rarfilePath = request.getParameter("rarFile"); /获取 RAR 文件 路 径 
String searchStr = request.getParameter("searchStr"); 1/ 获取 查询 字符 串 


String extendStr = request.getParameter("extendStr"); /获取 文件 扩展 名 
FileUtil fileUtil = new FileUtil0O: 
if(submit!=nulD) { /| 单 击 “ 搜 索 ” 按 钮 
if(rarfilePath!=nullé-&!rarfilePath.equals("")&-&- 
searchStr!=nullé-&!searchStr.equals("")&-& 
extendStr!=nullé-&-!extendStr.equals(™")){ 
searchInfo = fileUtilsearchRarInfo(new File(rarfilePath).searchStr,extendStr); /调用 查询 字符 串 的 方法 


} 
%> 


图 秘笈 心 法 
在 JDK 1.5 中 对 String 类 添加 了 isEmpty0 方 法 ， 该 方法 可 以 判断 字符 串 对 象 的 长 度 是 否 为 0， 以 后 可 以 直 
接 调用 该 方法 ， 而 不 必 先 获取 字符 串 长 度 然后 再 进行 判断 。 


高 级 
实用 指数 : 广 窒 


实例 320 


图 实例 说 明 


RAR 压缩 文档 可 以 保存 很 多 资料 文件 的 备份 ， 并 且 节省 磁盘 空间 ， 也 利于 网 络 传输 。 但 是 一 个 包含 上 百 个 
资源 文件 的 RAR 压缩 包 , 经 常 包含 需要 修改 的 内 容 。 例如, 某 个 文件 的 名 称 需要 修改 , 如 果 把 所 有 文件 解压 缩 、 
改名 再 压缩 会 非常 繁琐 , 本 程序 通过 RAR 的 命令 实现 了 压缩 包 中 单个 文件 的 改名 操作 , 程序 运行 效果 如 图 12.30 
所 示 。 


忻 管理 系统 


VN SI oon ne 


12.30” 重 命名 RAR 压缩 包 中 的 文件 
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图 关键 技术 


本 实例 使 用 RAR 的 命令 实现 重 命名 RAR 压缩 包 中 的 文件 。 实 例 中 用 到 的 RAR 完整 命令 格式 如 下 : 


rar mm <rarFile> <sourceFilel> <targetl> 

参数 说 明 

@ rarFile: 是 一 个 RAR 压缩 文档 文件 。 

@ sourceFilel: 是 要 修改 的 位 于 压缩 包 中 的 文件 名 称 。 
@targetl: 是 新 的 文件 名 称 ， 源 文件 将 使 用 这 个 新 名 称 命名 。 


称 为 目标 文件 名 称 。 


图 设计 过 程 


说 明 : 源 文件 与 目标 文件 是 成 对 出 现 的 ， 可 以 出 现 多 个 这 样 的 成 对 组 合 ， 那 样 会 同时 修改 多 个 源 文件 的 名 


(1) 创建 FileUtil 工具 类 ， 编 写 重 命名 RAR 压缩 包 中 文件 的 方法 renameFileFromRar0， 参 数 rarFile 指 的 
是 RAR 文件 ， 参 数 sourceFileName 指 的 是 压缩 包 中 其 中 一 个 文件 的 名 称 ， 参 数 newFileName 指 的 是 用 户 输入 


的 文件 新 名 称 ， 关 键 代码 如 下 : 
public void renameFileFromRar(File rarFile,String sourceFileName,String newFileName){ 
ty{ 
int start = sourceFileName.lastIndexOf("\")+1; // 查 找 文件 名 称 中 的 “\” 位 置 
/根据 文 件 的 父 路 径 和 用 户 输入 的 新 文件 名 ， 组 合 为 新 的 文件 名 (包括 父 目录 ) 
String newName=sourceFileName.substring(0,start)+newFileName; 
Process exec = Runtime.getRuntime(.exec("rar mm -c- \"" + rarFile + "\" " + sourceFileName+" "+newName); 


Scanner scan = new Scanner(exec.getInputStream()); /创建 进程 输入 流 
while (scan hasNextO) { // 变 量 输入 流 内 容 
scan.nextLine(); // 清 空 输入 流 数 据 
} 
scan.close(); /关闭 输入 流 
} catch (IOException el) { 
el.printStack Trace(); 


} 

(2) 创建 indexjsp 页 ， 在 该 页 中 获取 用 户 选 择 的 要 重 命名 的 文件 名 和 输入 的 新 文件 名 ， 然 后 调 
类 的 renameFileFromRar() 方 法 ， 对 RAR 压缩 包 中 的 文件 进行 重 命名 ， 关键 代码 如 下 : 

< 


Vector<String> fileDetails = null; 


Tequest.setCharacterEncoding("UTF-8"); // 设 置 请 求 编码 

String submit = request.getParameter("submit"); /获取 “查询 文件 列表 ”按钮 的 值 
String renameButton = request.getParameter("renameButton"); /获取 “ 重 命名 ”按钮 的 值 

String rarfilePath = request.getParameter("rarFile"); /获取 RAR 文件 路 径 

FileUtil fileUtil = new FileUtilO: 

if(submit!=nulD){ // 单 击 “ 查 询 文件 列表 ”按钮 


if(rarfilePath!=nullé&-&!rarfilePath.equals(™){ 
fileDetails = fileUtil.getRarDetail(new File(rarfilePath)): 
! 


昌 
if(renameButton!=null){ // 单 击 “ 重 命名 ”按钮 


String pathStr = request.getParameter("path"): /获取 用 户 选择 的 文件 
String newName = request.getParameter("newFileName"); /获取 新 文件 名 
fileUtilrenameFileFromRar(new File(rarfilePath).pathStr.newName): /调用 重 命名 文件 的 方法 
fileDetails = fileUtil. getRarDetail(new File(rarfilePath)); // 重 新 获取 RAR 压缩 包 的 文件 列表 
图 
%> 
图 秘笈 心 法 


调用 FileUtil 


本 实例 在 重 命名 RAR 压缩 包 中 的 文件 时 ， 在 执行 RAR 重 命名 的 命令 时 ， 要 重 命名 的 文件 名 称 与 修改 后 的 


文件 名 称 需要 包含 文件 的 路 径 ， 否 则 重 命名 后 的 文件 在 RAR 压缩 包 中 的 路 径 将 会 改变 。 
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高 级 
实用 指数 : 让 页 


实例 321 


图 实例 说 明 

RAR 可 以 把 多 个 资料 文件 压缩 成 一 个 压缩 包 文件 ， 这 样 就 可 以 把 大 量 的 资料 文件 压缩 在 一 起 ， 然 后 复制 到 
另 一 个 工作 室 或 者 其 他 工作 人 员 那 里 进行 交流 ， 但 是 如 果 对 方 计算 机 中 没有 安装 相应 的 软件 进行 解压 缩 ， 那 就 
麻烦 了 。 本 实例 实现 RAR 文件 的 改装 ， 将 一 个 RAR 压缩 文件 添加 自 解 压 模块 ， 这 样 它 就 可 以 自己 运行 来 解压 
缩 数 据 ， 而 不 需要 专门 的 软件 ， 程 序 运 行 效果 如 图 12.31 所 示 。 


【 亨 建 自 解 RAR 压 炉 包 ] 


选择 RAR 文档 :。EWnytxtrar | 


畏 近 压 入 和 为 百 亲 压 阅 式 
下 和 执 Et\wyexe rer ox 


Ea 


12.31 创建 自 解压 RAR 压缩 包 


图 关键 技术 


本 实例 使 用 RAR 的 命令 实现 为 指定 RAR 压缩 包 添加 自 解压 模块 的 功能 , 这 将 使 目标 RAR 压缩 文件 拥有 自 
行 解 压缩 的 能 力 ， 而 不 需要 其 他 软件 来 实现 解压 缩 。 实 例 中 用 到 的 RAR 完整 命令 格式 如 下 : 


Tars <rarFile> 

参数 说 明 

TarFile: 是 一 个 RAR 压缩 文档 文件 。 
例如 : 


Tar sc--y 资料 .rar 


这 个 命令 是 把 名 称 为 “资料 .RAR” 的 文件 生成 可 以 自动 解压 缩 的 “资料 .exe” 文 件 。 


了 加 说 明 : 示例 命令 中 的 -c- 是 不 显示 rar 文档 注释 信息 的 意思 ， 而 -y 是 任何 问题 都 回答 ， 本 实例 会 提示 是 否 覆 
盖 已 存在 的 目标 文件 ， 那 么 -y 会 默认 回答 覆盖 。 


图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 编 写 创建 自 解压 RAR 压缩 包 的 方法 createAutoExecFile0， 参 数 rarFile 表示 用 户 
选择 的 RAR 压缩 包 ， 关 键 代码 如 下 : 


Public static String createAutoExecFile(File rarFile) { 
证 一 


全 new StringBuffer(); 
try{ 
Process process =Runtime. getRuntime(.exec("rar s -y -c- " + rarFile); ”// 为 RAR 文件 创建 自 解压 的 命令 
六 


int count=0; 
while (scan .hasNextO) { /遍历 进程 执行 结果 
String line = scan.nextLine(); /获取 单行 信息 
这 dineisEmptyO) 
count+ 
证 (count<2) // 过 滤 非 查询 结果 
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continue: 
sb.append(line + "\n"): /查询 结果 添加 到 StringBuffer 
} 
} catch (IOException eD { 
el.printStack Trace(); 
} 
Teturn sb.toString0: V 返 回 查询 结果 


下 
(2) 创建 index.jsp 页 ,在 该 页 中 获取 用 户 选择 的 RAR 压缩 包 , 然后 调用 FileUtil 类 的 createAutoExecFileO 
方法 ， 为 RAR 压缩 包 创建 自 解压 文件 ， 关 键 代 码 如 下 : 
<% 


String resultInfo =""; /用 于 保存 执行 结果 的 信息 
Tequest.setCharacterEncoding("UTF-8"): // 设 置 请 求 编码 

String submit = request.getParameter("submit”); /获取 按钮 的 值 

String rarfilePath = request.getParameter("rarFile"); /获取 RAR 文件 路 径 
if(submit!=nulD) { // 单 击 “ 创 建 ”按钮 


if(rarfilePath!=null&-&!rarfilePath.equals(™")){ 
TesultInfo = FileUtil.createAutoExecFile(new File(rarfilePath)); // 调 用 创建 自 解压 文件 的 方法 
} 


%> 
图 秘笈 心 法 

在 类 中 获取 资源 ,通过 Class 类 的 getResourceAsStream() 方 法 可 以 获取 指定 资源 的 输入 流 ， 该 方法 是 根据 当 
前 类 的 位 置 在 ClassPath 环境 中 进行 查找 的 ， 比 指定 资源 位 置 要 灵活 。 其 方法 声明 如 下 : 

public InputStream getResourceAsStream(String name) 

在 使 用 程序 资源 时 ， 建 议 使 用 该 方法 获取 图 片 、 音 频 等 资源 的 输入 流 ， 因 为 它 在 ClassPath 变量 中 查找 资源 
比较 灵活 。 


图 实例 说 明 

RAR 作为 目前 最 流行 的 压缩 文档 ， 经 常 被 用 来 打包 资源 在 网 络 中 传输 ， 从 网 络 上 下 载 的 资源 、 软 件 、 音 频 
和 视频 等 很 多 都 是 经 过 RAR 压缩 后 供用 户 下 载 的 。 但 是 有 些 资源 需要 保密 ,只 有 知道 密码 的 人 才能 够 获取 压缩 
包 中 的 文件 。RAR 支持 对 压缩 包 设置 密码 的 功能 ， 本 程序 在 RAR 命令 的 基础 上 实现 了 图 形 化 操作 的 加 密 程序 ， 


程序 运行 效果 如 图 12.32 所 示 。 


ER 


【设置 RARE 增 包 杰 码 ] 


文件 地 址 : ENest1xt 

ER 
12.32 设置 RAR 压缩 包 密 码 

图 关键 技术 


本 实例 使 用 RAR 的 命令 把 用 户 选 定 的 资源 文件 压缩 为 RAR 压缩 包 并 支持 密码 设置 功能 ， 设 置 密码 以 后 只 
有 通过 合法 的 密码 才能 解压 缩 这 个 RAR 压缩 包 。 实 例 中 用 到 的 RAR 完整 命令 格式 如 下 : 


482 
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rara_p["password"] <rarFile> 

参数 说 明 

@ password: 是 要 设置 的 压缩 密码 。 

@ rarFile: 是 一 个 RAR 压缩 文档 文件 。 
例如 : 


rara -p"mrsoft" -y 资料 rar *.+ 


文件 的 批量 管理 


这 个 命令 是 把 当前 文件 夹 中 所 有 文件 压缩 成 名 称 为 “资料 .rar” 的 压缩 文件 ， 同 时 设置 该 压缩 文件 的 密码 为 


“mrsoft”。 


[加 说 明 : 示例 命令 中 使 用 双 引号 来 包含 密码 字符 串 ， 是 为 了 让 输入 的 密码 支持 空格 字符 ， 这 么 做 ， 空 格 字符 


会 把 之 后 的 密码 当成 命令 参数 。 


图 设计 过 程 


(1) 创建 FileUtil 工具 类 ， 编 写 执行 RAR 命令 的 内 部 线程 类 CompressThread， 关 键 代码 如 下 : 


private final class CompressThread extends Thread { 
Private String command; 
public CompressThread(String command){ 
this.command = command; 


} 
public void run| { 
try{ 
Runtime runtime = Runtime.getRuntime(); 


Process process = runtime.exec(command.toString() + "\n"); 


Process.getOutputStream().close|O; 
} catch (IOException e) { 
e.printStackTraceO; 
} 


} 
} 


/获取 Runtime 对 象 
/执行 压缩 命令 
/关闭 进程 输出 流 


(2) 编写 文件 压缩 为 RAR 文档 的 方法 toRarFile0， 参 数 folderPath 表示 要 压缩 的 文件 夹 路 径 ， 参 数 rarFile 
Path 表示 RAR 文件 路 径 ， 参 数 pwd 表示 为 压缩 文件 设置 的 密码 ， 关 键 代 码 如 下 : 


public boolean toRarFile(String folderPath,String rarFilePath,String pwd) { 


getFiles(folderPath); 
try{ 


File listFile = File.createTempFile("fileList", ".tmp"): 


StringBuffer fileList = new StringBuffer(); 

for(String filePath:filePaths){ 
fileList.append(filePath+"\n"):; 

1 


FileOutputStream fs = new FileOutputStream(listFile): 


fs.write(fileList.toString().getBytesO): 
fs.close|); 

File rarFile = new File(rarFilePath): 

String passCommand ="-p\"" +pwd +"\ "; 


1/ 调用 获取 文件 夹 所 有 文件 路 径 的 方法 
/创建 临时 文件 ， 用 于 保存 压缩 文件 列表 


/根据 临时 文件 ， 创 建文 件 输出 流 对 象 
/将 文件 路 径 写 入 临时 文件 


/根据 RAR 文件 路 径 创建 File 对 象 
/完成 密码 命令 


String command = "rar a " + passCommand+ rarFile.getPath() + " (@" + listFile.getPathO:// 文 件 压缩 命令 ， 并 设置 文件 密码 


new CompressThread(command).startO: 
return true: 
} catch (IOException e) { 
eprintStackTraceO: 
return false; 
了 
} 


/启动 线程 类 ， 执 行文 件 压缩 命令 


(3) 创建 index.jsp 页 ， 在 该 页 中 获取 用 户 输入 的 文件 夹 路 径 、RAR 压缩 包 路 径 以 及 密码 ， 然 后 调用 File 
Util 类 的 toRarFile0 方 法 ， 实 现 文件 压缩 到 RAR 文档 并 设置 压缩 文件 的 密码 ， 关 键 代 码 如 下 : 
=% 


Tequest.setCharacterEncoding("UTF-8"): 

String submit =request.getParameter("submit"); 
String rarfilePath = request.getParameter("rarFile"); 
String filePath = request.getParameter("filePath"); 
String pwd =request.getParameter("pwd"); 

FileUtil fileUtil = new FileUtil0: 


/设置 请 求 编码 

// 获 取 按 钮 的 值 

/获取 了 RAR 文件 路 径 
/获取 要 压缩 的 文件 夹 路 径 
/获取 用 户 输入 的 密码 
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if(submit!=nulD) { // 判 断 是 否 提交 表单 
if(filePath!=null&-&!filePath.equals("")&-&rarfilePath!=null&:&.!rarfilePath.equals("")) 
fileUtil.toRarFile(filePath.rarfilePath.pwd); 。 ”// 调 用 方法 ， 实 遇 交 各 计 委 年 压 纵 包 密码 
h 


%> 


国 秘笈 心 法 
某 些 程序 需要 处 理 的 数据 量 也 许 会 很 大 ， 如 图 片 处 理 ， 在 下 一 次 内 存 操作 之 前 ， 可 能 JVM 还 没有 整理 出 可 
用 内 存 。 但 是 可 以 调用 System 类 的 gc0 方 法 强制 执行 垃圾 回收 机 制 来 获取 可 用 内 存 。 


力 实例 说 明 

在 前 面 的 范例 中 ， 实 现 了 备份 网 络 文件 夹 的 功能 。 原 理 是 直接 将 网 络 文件 夹 复制 到 本 地 文件 来 ， 这 样 虽然 
能 实现 需求 ， 但 是 效果 并 不 理想 。 如 果 能 在 传输 过 程 中 使 用 压缩 技术 就 好 了 ， 这 样 能 提高 文件 的 下 载 速度 。 本 
实例 就 实现 了 这 样 的 功能 ， 实 例 运行 效果 如 图 12.33 所 示 ， 用 户 需 要 输入 想 备份 的 网 络 文件 夹 的 URI 地 址 和 备 
份 到 哪个 文件 夹 下 ， 单 击 “开始 备份 ”按钮 ， 会 在 用 户 选择 的 文件 夹 下 生成 一 个 ZIP 文件 。 


攻 


【后 六 运程 广 


源 文件 夫 : fie70:/ 避 斌 
亩 文件 类 :ERYb 


12.33 ”压缩 远程 文件 夹 
图 关键 技术 


压缩 远程 文件 夹 的 实现 过 程 ， 其 实 与 本 地 文件 夹 的 压缩 基本 类 似 ， 只 不 过 在 获取 远程 文件 夹 的 文件 时 ， 首 
先 需 要 应 用 java.net.URI 类 来 构建 与 远程 服务 器 的 连接 , 而 且 java.io.File 类 的 其 中 一 个 构造 方法 也 包含 一 个 URI 
类 型 的 构造 参数 ， 因 此 ， 根 据 URI 参数 来 创建 一 个 File 对 象 ， 就 可 以 应 用 File 对 象 的 相应 方法 获取 远程 文件 夹 
中 的 文件 。 获 取 远程 文件 之 后 ， 就 可 以 应 用 相应 的 文件 压缩 方法 将 文件 压缩 到 本 地 。 

图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 编 写 文件 压缩 的 方法 zipFile0， 关 键 代码 如 下 : 


public void zipFile( File targetZipFile, String base) throws IOException { 
FileOutputStream fos = new FileOutputStream(targetZipFile): // 根 据 给 定 的 targetZipFile 创建 文件 输出 流 对 象 


ZipOutputStream zos = new ZipOutputStream(fos); // 利 用 文件 输出 流 对象 创 建 Zip 输出 流 对 象 
byte[] buffer = new byte[1024]: 
for (String filePath : filePaths) { /遍历 所 有 要 压缩 文件 的 路 径 


File currentFile = new File(filePath); 
ZipEntry entry = new ZipEntry(filePath substring(baselengthO + 1. filePath lengthO)):// 利 用 要 压缩 文件 的 相对 路 径 创建 ZipEntry 对 象 
FileInputStream fis = new FileInputStream(currentFile): 
Zzos.putNextEntry(entry): 
int read = 0: 
while ((read = fis.read(buffer)) 二 -DT // 将 数据 写 入 到 Zip 输出 流 中 
Zos.write(buffer. 0. read): 


Zos.closeEntryO: /关闭 ZipEntry 对 象 
fis.closeO: 
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Zzos.closeO; /释放 资源 
fos.closeO; 
} 


< 注意 : 对 于 需要 下 载 含有 中 文 的 文件 ( 夹 ) 的 用 户 ， 可 以 考虑 使 用 Apache 的 ANT 组 件 实现 下 载 功能 ， 具 
体 参 考 前 面 的 范例 。 
(2) 编写 压缩 远程 文件 夹 的 方法 backupServerFile0， 参 数 uri 表示 远程 文件 夹 的 路 径 ， 参 数 targetFolder 表 
示 远 程 文件 的 压缩 路 径 。 在 该 方法 中 调用 zipFile0 方 法 ,将 获取 的 远程 文件 夹 中 的 文件 进行 压缩 ， 关 键 代码 
如 下 : 
Ppublic boolean backupServerFile(String uri ,String targetFolder) { 
本 File sourceFile = new File(new URI(uri)); 1/ 根据 用 户 输入 的 URI 创建 File 对 象 
getFiles(sourceFile.getAbsolutePathO); 1/ 调用 获得 文件 夹 中 所 有 文件 路 径 的 方法 
File targetFile = new File(targetFolder , sourceFile.getName() + ".zip"); /根据 用 户 选择 的 文件 夹 和 网 络 文件 夹 的 名 字 创 建 压缩 文件 
zipFile(targetFile, sourceFile.getAbsolutePathO): /调用 压缩 文件 的 方法 ， 实 现 压缩 功能 
return true; 
} catch (Exception e) { 
eprintStackTraceO: 
return false; 
| b 
(3) 创建 ndexjsp 页 , 在 该 页 中 获取 用 户 输入 的 远程 文件 夹 的 地 址 以 及 文件 压缩 的 目标 路 径 , 调用 FileUtil 
类 的 backupServerFile0 方 法 ， 实 现 远程 文件 夹 的 压缩 功能 ， 关 键 代 码 如 下 : 
<% 


Tequest.setCharacterEncoding("UTF-8"); /设置 请 求 编码 

String submit = request.getParameter("submit"); /获取 按钮 的 值 
String sourcePath = request.getParameter("sourcePath"): /1/ 获 取 远 程 文件 夹 路 径 
String targetPath = request.getParameter("targetPath"): // 获 取 目 标 文件 夹 路 径 
if(submit!=null) { /1/ 判 断 是 否 提交 表单 


if(sourcePath!=nullé-&!sourcePath.equals("")&-&-targetPath!=nullé-&-!targetPath.equals(™")){ 

FileUtil fileUtil = new FileUtilO: 

fileUtil.backupServerFile(sourcePath.targetPath): // 调 用 压缩 远程 文件 夹 的 方法 
时 


} 
%> 


图 秘笈 心 法 
在 文件 的 传输 过 程 中 ， 使 用 压缩 功能 可 以 提高 传输 的 效率 ， 而 且 压 缩 成 单个 文件 也 方便 管理 。 压 缩 可 以 在 
下 载 的 过 程 中 进行 。 


高 级 
实用 指数 : 三 宙 


实例 324 


图 实例 说 明 
在 前 面 的 范例 中 ， 实 现 了 下 载 单个 网 页 的 功能 ， 本 实例 使 用 压缩 技术 来 下 载 网 页 。 对 于 由 大 量 文本 组 成 的 
网 页 ， 压 缩 技 术 能 大 幅度 减少 下 载 的 流量 ， 提 高 了 网 速 ， 程 序 运行 效果 如 图 12.34 所 示 。 


12.34 ”实例 运行 效果 


Java Web 开发 实例 大 全 (基础 卷 ) 
[加 说 明 : 用 户 输入 的 网 址 需要 包含 协议 的 类 型 ， 如 http:/， 否 则 会 出 现 异 常 。 


图 关键 技术 

在 压缩 网 页 内 容 之 前 ， 需 要 应 用 java.net.URL 类 的 openConnection() 方 法 与 远程 网 页 建立 连接 ，open 
Connection0 方 法 返回 一 个 java.net.URLConnection 类 型 的 对 象 ， 它 代表 应 用 程序 和 URL 之 间 的 通信 链接 。 应 用 
URLConnection 对 象 来 读 取 和 写 入 此 URL 引用 的 资源 。 这 些 类 和 方法 的 具体 说 明 如 下 : 

OD public final class URL 

类 URL 代表 一 个 统一 资源 定位 符 ， 它 是 指向 互联 网 “资源 ”的 指针 。 资 源 可 以 是 简单 的 文件 或 目录 ， 也 可 
以 是 对 更 为 复杂 的 对 象 的 引用 ， 如 对 数据 库 或 搜索 引擎 的 查询 。 

口 “openConnection(0 方 法 

openConnection(0) 为 URL 类 中 的 方法 ， 通 过 它 可 以 返回 一 个 URLConnection 对 象 ， 它 表示 到 URL 所 引用 的 

OD public abstract class URLConnection 

抽象 类 URLConnection 是 所 有 类 的 超 类 , 它 代表 应 用 程序 和 URL 之 间 的 通信 链接。 此 类 的 实例 可 用 于 读 取 
和 写 入 此 URL 引用 的 资源 。 


图 设计 过 程 
(1) 创建 FileUtil 工具 类 ， 编 写实 现下 载 和 压缩 网 页 的 方法 zipWebPage0， 参 数 url 代表 用 户 输入 的 网 址 ， 
savePath 代表 用 户 输入 的 文件 夹 ， 关 键 代码 如 下 : 


Ppublic static void zipWebPage(String url, String savePath) throws IOException { 
URLConnection conn = new URL(url).openConnectionO; // 利 用 用 户 输入 的 网 址 创建 URL 链接 对 象 
InputStream in = conn.getInputStream(); // 从 URLConnection 对 象 中 获得 输入 流 
FileOutputStream fos = new FileOutputStream(savePath + "download.zip"); 
ZipOutputStream zos = new ZipOutputStream(fos); 
byte[] buffer = new byte[1024]; 
ZipEntry entry = new ZipEntry("download.html"); // 创 建 名 为 download.html 的 压缩 条 目 
zos.putNextEntry(entry); 
int read = 0; 
while ((read = in.read(buffer)) = -1) { // 写 入 数据 
Zos.write(buffer, 0, read); 
b 
Zos.closeEntryO; 
in.close0: /释放 资源 
Zos.close(); 
fos.close0; 
} 


< 全 注意 : 本 程序 直接 在 用 户 选 择 的 文件 夹 下 创建 了 一 个 名 为 download.zip 的 压缩 文件 ， 读 者 可 以 根据 实际 情 
况 进 行 修改 。 
(2) 创建 index.jsp 页 , 在 该 页 中 获取 用 户 输 入 的 网 址 和 网 页 保存 路 径 , 然后 调用 FileUtil 类 的 zipWebPage() 
方法 实现 网 页 的 下 载 并 压缩 保存 ， 关 键 代码 如 下 : 


<% 


Tequest.setCharacterEncoding("UTF-8"): // 设 置 请 求 编码 

String submit = request.getParameter("submit"); // 获 取 按 钮 的 值 

String downPath = request.getParameter("downPath"); /获取 网 址 

String savePath = request.getParameter("savePath"): /获取 保存 路 径 

if(submit!=nul) { 1/ 判断 是 否 提 交 表 单 
if(downPath!=null&&!downPath.equals("")&-&savePath!=nullé-&!savePath.equals("")){ 

FileUtil. zipWebPage(downPath.savePath): 1/ 调 用 压缩 存储 网 页 的 方法 

} 

} 

%> 


第 12 章 文件 的 批量 管理 


国 秘笈 心 法 
网 页 是 互联 网 的 重要 组 成 部 分 ， 用 户 在 上 网 的 过 程 中 ， 大 部 分 时 间 是 和 网 页 打交道 。 如 果 遇 到 自己 喜欢 的 


网 页 可 以 把 它 保存 到 本 地 。 此 时 如 果 使 用 压缩 技术 ， 就 能 节约 大 量 的 磁盘 空间 。 当 需要 浏览 时 ， 再 释放 即 可 。 


12.3 文件 的 批量 上 传 


oad 实现 文件 批量 上 伟 


图 实例 说 明 

在 开发 Web 应 用 程序 或 网 站 时 ， 文 件 上 传 的 功能 是 必 不 可 少 的 ， 单 个 文件 的 上 传 功能 不 方便 用 户 的 操作 ， 
用 户 每 上 传 一 个 文件 就 要 提交 一 次 ， 这 样 的 文件 上 传 功能 并 不 符合 用 户 的 实际 需求 。 目 前 ， 大 多 数 网 站 提供 的 
文件 上 传 功能 都 是 批量 上 传 。 本 实例 介绍 的 是 如 何 应 用 jspSmartUpload 实现 文件 批量 上 传 ， 程 序 运行 效果 如 
图 12.35 所 示 。 


传 天 二 伯 


\ 下 项 ] 本本 


图 12.35 ”使 用 jspSmartUpload 实现 文件 批量 上 传 


图 关键 技术 

应 用 jspSmartUpload 组 件 实现 文件 批量 上 传 与 单 文件 上 传 的 思路 基本 相同 。 在 实现 批量 上 传 时 ， 主 要 应 用 
jspSmartUpload 类 中 的 getFiles() 方 法 获取 上 传 的 所 有 文件 的 Files 数组 ， 然 后 通过 循环 这 个 文件 数组 ， 再 通过 每 
个 文件 表示 的 File 对 象 的 saveAs() 方 法 保存 文件 即 可 。 
图 设计 过 程 

(1) 创建 indexjsp 页 ， 在 该 页 面 中 添加 文件 域 表单 项 ， 并 添加 “添加 ”“ 删 除 ”“ 上 传 ”“ 取 消 ” 按 钮 。 用 


户 单 击 “ 添 加 ”按钮 将 触发 onClick 事件 ,调用 自 定义 的 addMoreRow0 函 数 ,在 页 面 中 添加 新 的 一 行 ; 单 击 “ 删 
除 ” 按 钮 将 触发 onClick 事件 ， 调 用 自 定义 的 deleteMoreRow0 函 数 ， 在 页 面 中 删除 一 行 。 这 两 个 自 定义 函数 的 


关键 代码 如 下 : 
‘<script type="text/avascript”> 
function addMoreRowO{ /添加 新 行 
var perent = event.srcElement parentNode parentNode: // 获 取 触 发 事件 的 上 两 级 元 素 
var oTable = perentparentNode parentNode: /获取 表格 元 素 
oNewRow = oTable insertRow0: /在 表格 中 添加 一 行 
for(i=0:i<perent.cells .Jength:i++) 
{ 1/ 循环 添加 触发 事件 上 级 元 素 拥有 的 子 元 素 
oNewRow.insertCellO|.innerHTML=perent.cells[i].innerHTML:; 

} 
perent.all("DelBtn").disabled—false; // 将 父 级 元 素 中 的 “删除 ”按钮 设置 为 可 选 状态 
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oNewRow.all("DelBtn").disabled-false: 
} 
function deleteMoreRowO{ 
var perent=event.srcElement.parentNode.parentNode; 
Var table=perent.parentNode.parentNode: 
if(table rows.length>1) 
{ 
table.deleteRow(perentrowIndex); 
if(table rows.length—1) 
{ 
table.all("DelBtn").disabled=true: 
} 


和. 
</script> 


/将 新 添加 的 行 中 的 “删除 ”按钮 设置 为 可 选 状态 


1/ 删除 行 

/获取 触发 事件 的 上 两 级 元 素 
/获取 表格 元 素 

/如 果 当 前 表格 的 指定 行 数 大 于 1 


/删除 当前 行 
// 如 果 当 前 表格 行 数 为 1 


// 将 “删除 ”按钮 设置 为 不 可 选 


(2) 创建 HttpServer 的 实现 类 FileUpload， 在 该 类 的 doPost0 方 法 中 ， 应 用 jspSmartUpload 组 件 获取 表单 
请 求 中 的 文件 对 象 ， 实 现 文件 的 批量 上 传 。doPost0 方 法 的 关键 代码 如 下 : 


public void doPost(HttpServletRequest request, HttpServletResponse response) 


throws ServletException, IOException { 
SmartUpload smartUpload= new SmartUploadO: 
String res = "没有 确定 要 上 传 的 文件 !"; 


String uploadPath = this.getServletContext().getRealPath("/")+"upload"; 


java.io.File uploadFolder = new java.io.File(uploadPath); 
if(!uploadFolder.exists()) 
UploadFoldermkdirsO:; 
long maxsize = 1024 * 1024 * 5; 
try{ 


smartUpload .initialize(this.getServletConfig0, request, response); 


smartUpload.uploadO; 

Files uploadFiles = smartUpload. getFiles(); 

if (uploadFiles.getSize() > maxsize) { 
res= "文件 大 小 超出 范围 ! "; 

} 

for (inti= 0:i<uploadFiles.getCountO: i++) { 
File file =uploadFiles.getFile(D: 


/创建 上 传 文件 的 核心 对 象 
/设置 返回 信息 字符 串 

/在 Web 服务 器 目录 下 定义 一 个 上 传 文件 夹 
/根据 目录 创建 File 对 象 

// 判 断 此 目录 是 否 存在 

// 如 果 不 存在 ， 则 创建 
/定义 上 传 文件 的 大 小 


/初始 化 SmartUpload 对 象 

/调用 upload0 方 法 

// 获 取 所 有 上 传 文件 

1/ 判断 上 传 文件 的 长 度 是 否 大 于 设置 的 最 大 文件 长 度 


/获取 遍历 上 传 的 所 有 文件 
/获取 每 个 上 传 的 文件 对 象 


if((!file.isMissing()) && (uploadFiles.getSize0 < maxsize)){/ 如 果 用 户 选择 了 上 传 文件 ， 并 且 上 传 的 文件 小 于 限制 的 大 小 


String fileName = uploadFolder getNameO0+"/" +file.getFileName0:// 定 义 上 传 文件 的 名 称 的 相对 路 径 


file.saveAs(fileName, File.SAVEAS_ VIRTUAL): 


Tes ==" 文件 上 传 成 功 !"; 
} 


. 
} catch (Exception e) { 
eprintStackTraceO: 


} 
Tequest.setAttribute("result". res); 


Tequest.getRequestDispatcher("index.jsp").forward(request, response); 


} 


国 秘笈 心 法 


在 实现 上 传 文件 的 功能 时 ， 需 要 限制 上 传 文件 的 大 小 ， 


// 保 存 文件 ， 注 意 参 数 fileName 为 只 能 是 相对 路 径 下 的 名 称 


// 将 页 面 请 求 转发 到 indexjsp 


否则 ， 如 果 有 些 恶 意 用 户 上 传 的 文件 非常 大 ， 会 给 


服务 器 造成 相当 大 的 压力 ， 服 务 器 可 能 由 于 读 写 大量 数 据 导 致 系统 崩溃 。 
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图 实例 说 明 


commons-fileUpload 组 件 是 目前 应 用 最 广泛 的 上 传 组 件 之 


Upload 实现 文件 批量 上 伟 


-， 应 用 该 组 件 可 以 很 方便 地 实现 文件 的 批量 上 
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传 。 在 实际 应 用 时 ， 只 需要 调用 该 组 件 中 相应 的 方法 即 可 实现 文件 的 批量 上 传 。 本 实例 将 介绍 如 何 使 用 
commons-fileUpload 组 件 实现 文件 的 批量 上 传 。 程 序 运行 的 效果 如 图 12.36 所 示 。 


信件 


图 12.36 ”使 用 commons-fileUpload 实现 文件 批量 上 传 


图 关键 技术 


ServletFileUpload 类 是 commons-fileUpload 组 件 处 理 文件 上 传 的 核心 类 。ServletFileUpload 类 的 常用 方法 如 
表 12.8 所 示 。 


表 12.8 ServletFileUpload 类 的 常用 方法 


返回 boolean 值 true 或 false， 用 于 判断 请 求 是 否 为 上 
传 文件 的 请 求 , 主要 是 判断 form 表单 提交 请 求 类 型 是 


否 为 “multipartform-data” 
该 方法 从 请 求 中 获取 上 传 文件 域 的 List 集合 
该 方法 从 请 求 中 获取 文件 的 迭代 器 


图 设计 过 程 

(1) 创建 ndex:jsp 页 ， 在 该 页 面 中 添加 文件 域 表单 项 ， 并 添加 “添加 ”“ 删 除 ”“ 上 传 ”“ 取 消 ” 按 钮 。 用 
户 单 击 “ 添 加 ”按钮 将 触发 onClick 事件 ， 调 用 自 定义 的 addMoreRow0 函 数 ,在 页 面 中 添加 新 的 一 行 ， 单 击 “ 删 
除 ” 按 钮 将 触发 onClick 事件 ， 调 用 自 定义 的 deleteMoreRow0 函 数 ， 在 页 面 中 删除 一 行 。 这 两 个 自 定义 函数 的 
具体 代码 请 参见 实例 325 中 的 设计 过 程 。 

(2) 创建 HttpServer 的 实现 类 FileUploadServlet， 在 该 类 的 doPost0 方 法 中 , 应 用 commons-fileUpload 组 件 


获取 表单 请 求 中 的 文件 对 象 ， 实 现 文件 的 批量 上 传 。doPost0 方 法 的 关键 代码 如 下 : 


Public void doPost(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
String uploadPath = this.getServletContext0.getRealPath("/")+"upload"; /定义 上 传 文件 的 服务 器 路 径 


File uploadFolder = new File(uploadPath): // 根 据 该 路 径 创 建 File 对 象 

if(!uploadFolder.exists()) 1/ 如果 路 径 不 存在 ， 则 创建 
UploadFoldermkdirs0: 

String message = “文件 上 传 成 功 由 

try{ 


if(ServietFileUpload isMiltipartContent(request){ 
DiskFileItemFactory factory = new DiskFileItemFactory0: 。” // 创 建 磁盘 工厂 ， 用 来 配置 上 传 组 件 ServletFileUpload 


factory.setSizeThreshold(20*1024):; /设置 内 存 中 允许 存储 的 字 节 数 
factory.setRepository(factory.getRepositoryO): 1 设置 存放 临时 文件 的 目录 
ServletFileUpload upload = new ServletFileUpload(factory); /创建 新 的 上 传 文件 句柄 
int maxSize = 5+1024*+1024: /定义 上 传 文件 的 大 小 
List<FileItem> files = upload.parseRequest(request): /1/ 从 请 求 中 得 到 所 有 上 传 域 列表 
for(FileItem fileItem:files){ // 遍 历 上 传 文件 集合 

if(!fileItem isFormmFieldO) { // 忽 略 其 他 不 是 文件 域 的 所 有 表单 信息 
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String name = fileltem getName(): 


if(fileTtem getSize()>maxSize){ // 限 制 文件 大 小 
message =" 上 传 文件 不 得 超过 5MB! "; 
break: 
} 
if((name 一 null) lameequals("))&c&(fileItem getsize0 一 0) 
continue: 
File file = new File(uploadPath.name); // 在 上 传 路 径 中 创建 文件 对 象 
fileItem write(file): /1/ 向 文件 写 数据 
} 
} 
} 
所 
catch(Exception ex){ 
ex.printStackTrace(O); 
} 
Tequest.setAttribute("result", message); // 将 提示 信息 保存 在 request 对 象 中 
Tequest.getRequestDispatcher("index.jsp").forward(request, response); 
lL 
图 秘笈 心 法 


实际 上 应 用 commons-fileUpload 组 件 实现 的 文件 批量 上 传 与 单 文件 上 传 的 实现 过 程 是 一 样 的 ， 在 后 台 获 得 
的 都 是 一 个 List 集合 。 需 要 注意 的 是 ， 集 合 中 有 些 元 素 不 一 定 是 文件 ， 它 可 能 是 表单 提交 过 来 的 其 他 数据 ， 这 
就 需要 应 用 FileItem 对 象 的 isFormField0 方 法 判断 每 个 集合 元 素 是 否 为 表单 域 ， 这 样 保证 了 只 有 是 文件 的 情况 
下 才 执 行 上 传 。 
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绘制 图 形 和 文本 
绘制 图 案 

图 形 的 合并 运算 
文字 特效 

图 片 特效 
简单 的 验证 码 应 用 
复杂 的 验证 码 应 用 
生成 条 形 码 
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13.1 绘制 图 形 和 文本 
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图 实例 说 明 

在 几何 中 ， 直 线 是 向 两 端 无 限 延伸 的 ， 本 实例 所 说 的 绘制 直线 ， 实 际 上 是 指 直 
线 上 两 点 之 间 的 线段 ， 线 段 在 实际 生产 和 生活 中 经 常 使 用 。 运 行程 序 ， 将 在 网 页 中 
显示 出 绘制 的 线段 ， 效 果 如 图 13.1 所 示 。 


图 关键 技术 
本 实例 主要 是 通过 使 用 java.awt.Graphics 类 的 drawLine() 方 法 来 实现 的 ， 创 建 13.1 绘制 直线 
-个 Graphics 类 的 实例 , 表示 的 是 图 形 上 下 文 对 象 , 用 它 来 绘制 基本 的 形状 和 文本 。 
drawLine( 方 法 的 定义 如 下 : 
public abstract void drawLine(int xl, intyl, int x2, int y2) 
参数 说 明 
@xl: 第 一 个 点 的 x 坐标 。 
@ yl1: 第 一 个 点 的 y 坐标 。 
@ x2: 第 二 个 点 的 x 坐标 。 
@ y2: 第 二 个 点 的 y 坐标 。 
图 设计 过 程 
(1) 创建 用 于 生成 图 像 的 Servlet 类 DrawLineServlet， 然 后 在 其 service0 方 法 中 实现 绘制 直线 ， 关 键 代码 
如 下 : 
Pprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
/禁止 页 面 缓 存 
Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/jpeg"); // 响 应 格式 为 jpeg 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=200, height=180; 
BufferedImage image = new BufferedImage(width. height BufferedImage.TYPE INT_ RGB): 


Graphics g = image.getGraphicsO: 1/ 获取 用 于 处 理 图 形 上 下 文 的 对 象 
&.setColor(new Color(178.186.174)): // 设 置 RGB 颜色 

gfililRect(0. 0. width, height): /填充 指 定 的 矩形 
gsetColor(Color BLACK): /设置 直线 的 颜色 

g.drawLine(70, 50, 180. 50): /给 制 第 一 条 水 平 线 
g.drawLine(70, 80, 180. 80): /绘制 第 二 条 水 平 线 
g.drawLine(110, 10. 140, 120): /绘制 斜 线 

gdisposeO: 1/ 释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputstream0): // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flushO): // 刷 新 输出 流 
Tesponse.getOutputStream().closeO; /关闭 输出 流 


了 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawLineServlet 类 生成 图 像 
显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" sre="DrawLineServlet"> 
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图 秘笈 心 法 
和 如 果 两 个 端点 的 距离 很 小 ， 就 相当 于 画 了 一 个 点 ， 根 据 这 个 特点 可 以 在 鼠标 移动 的 路 径 上 
连续 画 点 ， 完 成 各 种 图 形 的 绘制 ， 从 而 实现 画图 板 的 功能 。 


实例 328 


图 实例 说 明 

矩形 在 实际 生产 和 生活 中 经 常 使 用 ， 如 书桌 的 桌面 、 房 屋 的 门窗 等 。 本 实 
例 将 通过 绘制 矩形 让 读者 初步 了 解 Java 绘图 技术 。 运 行程 序 ， 将 在 网 页 上 显 
示 绘 制 的 矩形 ， 效 果 如 图 13.2 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 使 用 Graphics 类 的 drawRect0 方 法 和 filIRect0 方 法 来 实 图 13.2 绘制 矩形 
现 的 。 
(1) 使 用 Graphics 类 的 drawRect( 方 法 绘制 的 矩形 ， 只 有 线条 而 没有 填充 色 ， 该 方法 的 定义 如 下 : 
public abstract void drawRect(int x, int y, int width, int height) 
参数 说 明 
@x: 矩形 左上 角 的 x 坐标 。 
@y: 矩形 左上 角 的 了 坐标 。 
@ width: 矩形 的 宽度 。 
@ height: 算 形 的 高 度 。 
(2) 使 用 Graphics 类 的 flIRect0 方 法 绘制 带 填充 色 和 矩形 ， 该 方法 的 定义 如 下 : 
public abstract void fillRect(int x, int y, int width, int height) 
参数 说 明 
© x: 填充 矩形 左上 角 的 x 坐标 。 
@ y: 填充 矩形 左上 角 的 了 坐标 。 
@ width: 填充 矩形 的 宽度 。 
@ height: 填充 矩形 的 高 度 。 
用 设计 过 程 
(1) 创建 用 于 生成 矩形 图 像 的 Servlet 类 DrawRectServlet， 然 后 在 其 service() 方 法 中 实现 绘制 矩形 ， 关 键 
代码 如 下 : 


Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
/禁止 页 面 缓 存 


0); 
Tesponse.setContentType("image/JPEG"): /响应 格式 为 了 PEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=240, height=180; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphics():; // 获 取 用 于 处 理 图 形 上 下 文 的 对 象 
&.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
gfillRect(0, 0, 240, 180): /给 制 实心 矩形 

&g.setColor(Color. BLACK): /设置 第 2 个 矩形 的 颜色 
g.drawRect(30., 40. 80. 60) : /给 制 空 心 矩 形 

&g.setColor(new Color(178,186,174)): // 设 置 第 3 个 矩形 的 RGB 颜色 
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gfillIRect(140. 40. 80. 60): 
g.disposeO; 
TmageIO.write(image, "JPEG", response.getOutputStream()); 


Tesponse.getOutputStream() flushO; 
Tesponse.getOutputStream().closeO: 


图 像 生 成 


/ 允 制 实心 矩形 

/释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
/输出 JPEG 格式 图 片 到 页 面 

/刷新 输出 流 

/关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawRectServlet 类 生成 图 像 


并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" src="DrawRectServlet"> 


国 秘笈 心 法 


在 调用 Graphics 类 的 drawRect0 方 法 和 flRect0 方 法 绘制 矩形 之 前 ， 可 以 调用 其 setColor(0 方 法 为 矩形 设置 
颜色 。 应 用 setColor0 方 法 设置 颜色 时 ， 可 以 用 java.awt.Color 类 的 静态 常量 作为 参数 ， 也 可 以 指定 一 个 RGB 颜 


色 分 量 的 Color 对 象 。 
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图 实例 说 明 


初级 


实用 指数 : 银 人 请 廊 家 


本 实例 将 介绍 如 何在 Java 中 绘制 正方 形 。 运 行程 序 ， 将 在 网 页 上 显示 出 绘制 


的 正方 形 ， 效 果 如 图 13.3 所 示 。 


图 关键 技术 


本 实例 主要 是 使 用 Graphics 类 的 drawRect0 方 法 和 fillRect0 方 法 来 实现 的 。 
使 用 Graphics 类 的 drawRect0 方 法 和 fillRect0 方 法 绘制 矩形 时 ,如 果 将 这 两 个 


13.3 绘制 正方 天 


SS 


方法 中 表示 宽度 和 高 度 的 参数 设置 为 相同 的 值 ， 绘 制 出 来 的 图 形 就 是 正方 形 。 


例如 : 


g.drawRect( 30, 20, 120, 120 ); 


图 设计 过 程 


/在 点 (30.20) 处 绘制 边 长 是 120 的 正方 形 


(1) 创建 用 于 生成 正方 形 图 像 的 Servlet 类 DrawRectServlet， 然 后 在 其 service0 方 法 中 实现 绘制 正方 形 ， 


关键 代码 如 下 : 


Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 


1/ 禁止 页 面 缓存 

Tesponse.setHeader("Pragma", "No-cache"): 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
response.setContentType("i my 
/创建 一 个 指定 长 宽 的 图 像 

int width=260. height=180; 

BufferedImage image = new BufferedImage(width._ height, 
Graphics g 一 image.getGraphicsO: 

gsetColor(new Color(221.221.221)): 

gfillRect(0. 0. 260. 180): 

gsetColor(Color BLACK): 

g.drawRect(20, 20, 100. 100): 

g.drawRect(40, 40, 60, 60); 

g.drawRect(140, 20, 100, 100); 

&.setColor(new Color(178.186.174)): 

gfillRect(160. 40. 60. 60): 

gdisposeO; 

ImageIO.write(image, "JPEG", response.getOutputstream0): 


/响应 格式 为 JPEG 图 片 


.TYPE INT_ RGB): 

// 获 取 用 于 处 理 图 形 上 下 文 的 对 象 
/设置 第 1 个 矩形 的 RGB 颜色 

/ 参 制 实心 矩形 

/设置 颜色 

/绘制 空心 正方 形 

/绘制 空心 正方 形 
/给 制 空 心 正 方形 

/设置 RGB 颜色 

/给 制 实心 矩形 

/释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
/输出 了 PEG 格式 图 片 到 页 面 
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Tesponse.getOutputStreamO.fhushO: /刷新 输出 流 
Tesponse.getOutputStream().closeO; /关闭 输出 流 
} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawRectServlet 类 生成 图 像 
并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" src="DrawRectServlet"> 


图 秘笈 心 法 
在 实际 项 目 中 绘制 柱 形 图 表 时 ， 可 以 使 用 名 IRect( 方 法 实现 。 
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图 实例 说 明 
本 实例 将 介绍 如 何在 Java 中 绘制 椭圆 。 运 行程 序 ， 将 在 网 页 上 显示 绘制 的 椭 
圆 图 形 ， 效 果 如 图 13.4 所 示 。 


图 关键 技术 


本 实例 主要 是 使 用 Graphics 类 的 drawOval0 方 法 和 filloval0 方 法 来 实现 的 。 

(1) 使 用 Graphics 类 的 drawOval0 方 法 绘制 的 椭圆 ， 只 有 线条 而 没有 填充 图 13.4 绘制 椭圆 

色 ， 该 方法 的 定义 如 下 : 
public abstract void drawOval(int x, int y, int width, int height) 
参数 说 明 
x: 给 制 本 加 的 在 上 角 的 x 坐标 。 
会 制 椭圆 的 左上 角 的 y 坐标 。 

a ee 
@ height: 要 绘制 椭圆 的 高 度 。 

(2) 使 用 Graphics 类 的 Oval0 方 法 绘制 带 填充 色 的 椭圆 ， 该 方法 的 定义 如 下 : 
public abstract void fillOval(int x, int y, int width, int height) 
参数 说 明 
@ x: 要 填充 椭圆 的 左上 角 的 x 坐标 。 
@ y: 要 填充 椭圆 的 左上 角 的 y 坐标 。 
@ width: 要 填充 椭圆 的 宽度 。 
@ height: 要 填充 椭圆 的 高 度 。 


图 设计 过 程 
(1) 创建 用 于 生成 椭圆 图 形 的 Servlet 类 DrawOvalServlet， 然 后 在 其 service0 方 法 中 实现 绘制 椭圆 图 形 ， 
关键 代码 如 下 : 
Protected void service(HttpServletRequest request. HttpServletResponse response) throws ServletException, IJOException { 
/禁止 页 面 缓 存 
Tesponse. "No-cache"): 


0); 
Tesponse.setContentType("i image/JPEG"): /响应 格式 为 JPEG 图 片 

// 创 建 一 个 指定 长 宽 的 图 像 

int width=260, height=180: 

BufferedImage image = new BufferedImage(width. height. BufferedImage.TYPE INT RGB): 
Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
&.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
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gfillRect(0. 0, 260. 180): / 参 制 实心 和 矩形 
&g.setColor(Color. BLACK): // 设 置 椭圆 的 颜色 
g.drawOval(30, 20, 80, 50); /| 绘制 空心 椭圆 
g.drawOval(150, 10, 50. 80): /| 绘制 空 心 椭圆 
&.setColor(new Color(178.186.174)): // 设 置 椭圆 的 RGB 颜色 
gfillOval(40, 90, 50, 80): /| 绘制 实 心 椭圆 
gfillOval(140., 110. 80, 50); /绘制 实心 椭圆 
g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); // 输 出 了 PEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flushO: /刷新 输出 流 
Tesponse.getOutputStream().closeO: /关闭 输出 流 


1 
(2) 创建 用 于 显示 图 片 的 indexjsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawOvalServlet 类 生成 图 像 
并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 
<img alt="" src="DrawOvalServlet"> 
图 秘笈 心 法 
在 绘制 椭圆 时 ， 如 果 将 drawOval0 方 法 或 flloval0 方 法 的 后 两 个 参数 设置 为 相同 的 值 ， 就 可 以 绘制 出 圆 形 
或 填充 的 圆 形 。 


初级 | 
实用 指数 : 走廊 让 从 
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图 实例 说 明 


本 实例 演示 如 何在 Java 中 绘制 圆 弧 。 运 行程 序 ,将 在 网 页 上 显示 出 绘制 的 圆 弧 ， 
效果 如 图 13.5 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 使 用 Graphics 类 的 drawArc0 方 法 来 实现 的 。 使 用 Graphics 图 13.5 绘制 圆 弧 
类 的 drawArc0 方 法 绘制 圆 弧 ， 该 方法 的 定义 如 下 : 

public abstract void drawArc(int x, int y, int width, int height, int startAngle., int arcAngle) 

参数 说 明 

@ x: 要 绘制 弧 的 左上 角 的 x 坐标 。 

@y: 要 绘制 弧 的 左上 角 的 y 坐标 。 

@@ width: 要 绘制 弧 的 宽度 。 

@ height: 要 绘制 弧 的 高 度 。 

@ startAngle: 开始 角度 。 

@ arcAngle: 相对 于 开始 角度 而 言 ， 弧 跨越 的 角度 。 


| | 设计 过 程 


(1) 创建 用 于 生成 圆 弧 图 形 的 Servlet 类 DrawArcServlet， 然 后 在 其 service0 方 法 中 实现 绘制 圆 弧 图 形 ， 关 


键 代码 如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 
/禁止 页 面 缓 存 


Tesponse. ‘setContentType("image/JPEG 3 /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=260. height=180; 

BufferedImage image = new BufferedImage(width. height. BufferedImage.TYPE INT RGB): 


497 
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Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221.221.221): /设置 第 1 个 矩形 的 RGB 颜色 
&g.fillRect(0, 0, 260, 180): /| 绘制 实心 矩形 

&g.setColor(Color. BLACK): /设置 颜色 

gdrawArc(20, 20. 80, 80. 0, 120); // 绘 制 圆 弧 

g.drawArc(20, 40, 80, 80, 0. -120); 1/ 绘制 圆 弧 

g.drawArc(150. 20. 80. 80. 180, -120); /绘制 圆 弧 

g.drawArc(150, 40, 80, 80. 180. 120); /绘制 圆 弧 

g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream0): // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flushO; 1/ 刷新 输出 流 
Tesponse.getOutputStream0.closeO: /关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawArcServlet 类 生成 图 像 并 
显示 在 页 面 中 ， 关 键 代 码 如 下 : 
<img alt="™" sre="DrawArcServiet"> 
国 秘笈 心 法 
在 实际 开发 中 ， 如 果 需 要 绘制 扇形 ， 可 以 在 使 用 drawArc0 方 法 绘制 圆 弧 时 ， 用 drawLine( 方 法 从 圆 弧 的 两 
个 端点 向 圆心 画 直线 ， 这 样 就 可 以 画 出 扇形 。 
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实用 指数 : 廊 女 亦 页 


图 实例 说 明 


本 实例 演示 如 何在 Java 中 绘制 指定 角度 的 填充 扇形 。 运 行程 序 ， 将 在 
网 页 上 显示 出 绘制 的 填充 扇形 ， 效 果 如 图 13.6 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 使 用 Graphics 类 的 fillArc0 方 法 来 实现 的 。 使 用 图 13.6 绘制 指定 角度 的 填充 扇形 
Graphics 类 的 fillArc(0 方 法 绘制 填充 扇形 ， 该 方法 的 定义 如 下 : 

public abstract void fillArc(int x, int y int width, int height, int startAngle, int arcAngle) 

参数 说 明 

©@ x: 要 绘制 填充 扇形 的 左上 角 的 x 坐标 。 

@y: 要 绘制 填充 扇形 的 左上 角 的 y 坐标 。 

目 width: 要 绘制 填充 扇形 的 宽度 。 

@ height: 要 绘制 填充 扇形 的 高 度 。 

@ startAngle: 开始 角度 。 

@ arcAngle: 相对 于 开始 角度 而 言 ， 填 充 扇形 的 弧 跨 越 的 角度 。 
图 设计 过 程 

(1) 创建 用 于 生成 扇形 图 的 Servlet 类 DrawArcServlet， 然 后 在 其 service0 方 法 中 实现 绘制 填充 扇形 ， 关 键 
a Te void service(HttpServletRequest request, HttpServietResponse response) throws ServletException, IOException { 
/| 禁止 页 面 缓存 


Tesponse.setHeader("Pragma". "No-cache"); 
response setHeader("Cache-Control", "No-cache"): 


.setDateHeader(" : 
Tesponse.setContentType("i JPEG we // 响 应 格式 为 JPEG 图 片 
// 创 建 一 个 指定 长 宽 的 图 像 
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int width=260, height=180: 
BufferedImage image = new BufieredImage(width._ height BufferedImage.TYPE_INT RGB): 


Graphics g = image.getGraphics0: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221.221.221)): /设置 第 1 个 和 矩形 的 RGB 颜色 
g.filRect(0. 0. 260. 180): /给 制 实心 矩形 

gsetColor(new Color(178.186.174)): // 设 置 肩 形 的 RGB 颜色 
gfillArc(40, 20, 80, 80, 0, 150); /绘制 填充 扇形 

gfillArc(140, 20. 80, 80, 180, -150); /绘制 填充 扇形 

gfillArc(40, 40, 80, 80, 0. -110): /绘制 填充 扇形 

gfillArc(140, 40. 80. 80, 180, 110): /绘制 填充 扇形 

g.disposeO; // 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream0); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush(); /刷新 输出 流 
Tesponse.getOutputStream().closeO; // 关 闭 输 出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawArcServlet 类 生成 图 像 并 
显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" sre="DrawArcServlet"> 
图 秘笈 心 法 
在 实际 项 目 中 绘制 饼 形 图 表 时 ， 可 以 使 用 包 lAre0 方 法 绘制 填充 扇形 
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图 实例 说 明 


本 实例 演示 如 何在 Java 中 绘制 多 边 形 。 运行 程序 , 将 在 网 页 上 显示 绘制 的 多 
边 形 ， 效 果 如 图 13.7 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 使 用 Graphics 类 的 drawPolygon() 方 法 和 fiIPolygon0 方 法 
来 实现 的 。 
(1) 使 用 Graphics 类 的 drawPolygon0 方 法 绘制 的 多 边 形 ， 只 有 线条 而 没有 图 13.7 绘制 多 边 形 
填充 色 ， 该 方法 的 定义 如 下 : 
public abstract void drawPolygon(int[] xPoints, int[] yPoints, int nPoints) 
参数 说 明 
@ xPoints: 要 绘制 多 边 形 的 x 坐标 数组 。 
@ yPoints: 要 绘制 多 边 形 的 y 坐标 数组 。 
@@ nPoints: 要 绘制 多 边 形 的 顶点 总 数 。 
(2) 使 用 Graphics 类 的 fillPolygon( 方 法 绘制 带 填充 色 的 多 边 形 ， 该 方法 的 定义 如 下 : 
public abstract void fillpolygon(int[] xPoints, int[] yPoints, int npoints) 
参数 说 明 
@ xPoints: 要 绘制 填充 多 边 形 的 x 坐标 数组 。 
@ yPoints: 要 绘制 填充 多 边 形 的 y 坐标 数组 。 
目 nPoints: 要 绘制 填充 多 边 形 的 顶点 总 数 。 


图 设计 过 程 
(1) 创建 用 于 生成 多 边 形 的 Servlet 类 的 DrawPolyServlet， 然 后 在 其 service0 方 法 中 实现 绘制 多 边 形 ， 关 
键 代码 如 下 : 
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Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException. IOException { 
/禁止 页 面 缓 存 
Tesponse.setHeader("Pragma", "No-cache”): 
Tesponse.setHeader("Cache-Control", "No-cache"):; 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"): // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=360, height=280; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TZPE INT RGB): 


Graphics g = image.getGraphics(); /获取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0, 0, 360, 280); /绘制 实 心 矩形 

g.setColor(new Color(178.186.174)); /设置 多 边 形 的 RGB 颜色 
int[] xl = { 100.120.180.140.150.100.50,60.20.80 } /多 边 形 的 横 坐标 

imt y1 = { 20.85.90.120.180,140.180.120.90,85 } /多 边 形 的 纵 坐 标 

intnl = 10; /多 边 形 的 边 数 
g.fillPolygon(x1, y1, n1); /绘制 多 边 形 

int] x2 = { 210, 270, 310, 270, 210, 170 }; // 多 边 形 的 横 坐 标 

int[] y2 = { 20, 20. 65, 110, 110, 65 }; /多 边 形 的 纵 坐 标 

intn2= 6; /多 边 形 的 边 数 
g.fillPolygon(x2, y2, n2); /| 绘制 实心 多 边 形 

int[] x3 = { 180, 220, 260, 240, 260, 220. 180. 200 }; /多 边 形 的 横 坐标 

int[] y3 = { 120, 140, 120, 160, 200, 180, 200, 160 }; /多 边 形 的 纵 坐 标 

intn3 = 8; /多 边 形 的 边 数 
g.setColor(Color. BLACK); 

g.drawPolygon(x3, y3, n3); /| 绘制 多 边 形 

gdisposeO: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream0): // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush|; 1 刷新 输出 流 
Tesponse.getOutputStream().closeO: /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 indexjsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawPolyServlet 类 生成 图 像 
并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 
<img alt="™" ste="DrawPolyServiet"> 
图 秘笈 心 法 
由 于 绘制 多 边 形 需要 各 顶点 x 坐标 和 y 坐标 的 数组 。 因 此 ， 可 以 在 草 纸 上 把 图 形 画 出 来 ， 然 后 再 根据 图 形 
定义 坐标 点 就 容易 多 了 。 
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图 实例 说 明 


本 实例 演示 如 何在 Java 中 绘制 二 次 曲线 。 运 行程 序 ， 将 在 网 页 上 显示 绘制 的 
二 次 曲线 ， 效 果 如 图 13.8 所 示 。 SR 


图 关键 技术 2 


本 实例 主要 是 通过 使 用 Graphics2D 类 的 draw0 方 法 和 使 用 QuadCurve2D. 
Double 类 创建 二 次 曲线 对 象 来 实现 的 。 图 13.8 绘制 二 次 曲线 
(1) 使 用 Graphics2D 类 的 draw0 方 法 ， 并 将 QuadCurve2D.Double 类 创建 的 


二 次 曲线 对 象 ， 作 为 draw0 方 法 的 参数 ， 实 现 绘制 二 次 曲线 的 操作 ，draw0 方 法 的 定义 如 下 : 
public abstract void draw (Shape shape) 
参数 说 明 
shape: 要 绘制 的 形状 。 
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(2) 使 用 QuadCurve2D.Double 类 创建 二 次 曲线 对 象 ， 其 构造 方法 的 定义 如 下 : 


public QuadCurve2D.Double(double xl. double y1. double ctrix. double ctrly. double x2. double y2) 
参数 说 明 

@ x1: 起 始点 的 x 坐标 。 

@ yl1: 起 始点 的 了 坐标 。 

目 ctlx: 控制 点 的 x 坐 标 。 

@ ctrly: 控制 点 的 y 坐标。 

@ x2: 结束 点 的 x 坐标 。 

@ y2: 结束 点 的 y 坐标 。 


图 设计 过 程 


(1) 创建 用 于 生成 二 次 曲线 图 形 的 Servlet 类 DrawQuadCurve2DServlet， 然 后 在 其 service0 方 法 中 实现 绘 


制 二 次 曲线 图 形 ， 关 键 代码 如 下 : 
Pprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 


二 


// 茜 止 页 面 缓存 

Tesponse.setHeader("Pragma", "No-cache"); 

Tesponse.setHeader("Cache-Control", "No-cache"); 

Tesponse.setDateHeader("Expires", 0); 

Tesponse.setContentType("image/JPEG"); // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=260, height=180; 

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE INT_RGB): 


Graphics g = image. getGraphics(); /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0, 0, 260, 180); /给 制 实心 矩形 

Graphics2D g2=(Graphics2D)g; // 获 得 Graphics2D 对 象 
8&2.setColor(Color.BL4CKD: 


/创建 二 次 曲线 ， 其 中 点 〈120.100) 是 控制 点 坐标 ， 点 〈60.20) 是 起 始点 坐标 ， 点 〈180.20) 是 终点 坐标 
QuadCurve2D Double quadCurvel = new QuadCurve2D.Double(60.20.120.100.180.20): 

82.draw(quadCurvel); /绘制 二 次 曲线 

/创建 二 次 曲线 ， 其 中 点 〈120.40) 是 控制 点 坐标 ， 点 〈60.120) 是 起 始点 坐标 ， 点 〈180.120) 是 终点 坐标 
QuadCurve2D Double quadCurve2 = new QuadCurve2D.Double(60.120.120.40.180.120); 


82.draw(quadCurve2); 

.disposeO: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
g2.dispose(): 

ImagelIO.write(image, "JPEG", response.getOutputStreamO); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream(.flush|): // 刷 新 输出 流 

Tesponse.getOutputStreamO.closeO: /关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawQuadCurve2DServlet 类 
E 成 图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 


<img alt="" src="DrawQuadCurve2DServlet"> 


国 秘笈 心 法 


绘制 二 次 曲线 时 ， 可 以 使 用 QuadCurve2D .Double 类 和 QuadCurve2D Float 类 ， 其 中 QuadCurve2D Float 类 
更 节省 内 存 空 间 。 
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女 冯 妆 


图 实例 说 明 


本 实例 演示 如 何在 Java 中 绘制 三 次 曲线 。 运行 程序 , 将 在 网 页 上 显示 出 绘制 的 三 次 曲线 , 效果 如 图 13.9 所 示 。 
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图 13.9 绘制 三 次 曲线 


图 关键 技术 
本 实例 主要 是 通过 使 用 Graphics2D 类 的 draw0 方 法 和 使 用 CubicCurve2D.Double 类 创建 三 次 曲线 对 象 来 实 


现 的 。 


使 用 CubicCurve2D.Double 类 创建 三 次 曲线 对 象 ， 其 构造 方法 的 定义 如 下 : 


public CubicCurve2D.Double(double xl, double y1. double ctrlx1. double ctrly1, double ctrlx2, double ctrly2, double x2. double y2) 


参数 说 明 

@ x1: 起 始点 的 x 坐标 。 

@ yl1: 起 始点 的 y 坐标 。 

@ ctrlx1: 第 一 个 控制 点 的 x 坐标 。 
@ ctrlyl1: 第 一 个 控制 点 的 y 坐标 。 
@ ctrlx2: 第 二 个 控制 点 的 x 坐标 。 
@ ctrly2: 第 二 个 控制 点 的 了 坐标 。 
@ x2: 结束 点 的 x 坐标 。 

@ y2: 结束 点 的 y 坐标 。 


图 设计 过 程 


(1) 创建 用 于 生成 三 次 曲线 图 形 的 Servlet 类 DrawQuadCurve2DServlet， 然 后 在 其 service() 方 法 中 实现 绘 


制 三 次 曲线 图 形 ， 关 键 代码 如 下 : 


protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 


} 


/禁止 页 面 缓 存 

Tesponse.setHeader("Pragma", "No-cache"); 

Tesponse.setHeader("Cache-Control", "No-cache"); 

Tesponse.setDateHeader("Expires", 0); 

Tesponse.setContentType("image/JPEG"): // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=300, height=200; 

BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO; /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0. 0. 300, 200): /绘制 实心 矩形 

Graphics2D g2=(Graphics2D)g: // 获 得 Graphics2D 对 象 
g2.setColor(Color. BLACK): 


1/ 创 建 三 次 曲线 ， 其 中 点 (140.-140) 和 点 〈140.300) 是 控制 点 坐标 ， 点 〈20.80) 是 起 始点 坐标 ， 点 〈260.80) 是 终点 坐标 
CubicCurve2D.Double cubicCurve = new CubicCurve2D.Double(20.80.140.-140.140.300.260.80): 


g2.draw(cubicCurve); /| 绘制 三 次 曲线 

gdisposeO: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
82.dispose0: 

ImageIO.write(image, "JPEG", response.getOutputstream0): // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flush|: // 刷 新 输出 流 

Tesponse.getOutputStream().closeO: /关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawQuadCurve2DServlet 类 
生成 图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" src="DrawQuadCurve2DServlet"> 
国 秘笈 心 法 


绘制 三 次 曲线 时 ， 可 以 使 用 CubicCurve2D .Double 类 和 CubicCurve2D Float 类 ， 其 中 CubicCurve2D Float 
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类 更 节省 内 存 空 间 。 
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实用 指数 : 广 雯 雯 胡 ， 


图 实例 说 明 
本 实例 演示 如 何在 Java 中 绘制 文本 。 运 行程 序 ， 将 在 网 页 上 显示 绘制 的 文本 ， 效 果 如 图 13.10 所 示 。 


图 13.10 绘制 文本 


图 关键 技术 


本 实例 主要 是 使 用 Graphics 类 的 drawString0 方 法 来 实现 的 。 使 用 Graphics 类 的 drawString0 方 法 绘制 文本 ， 
该 方法 的 定义 如 下 : 
public abstract void drawString(String str, int x, int y) 
参数 说 明 
@ str: 绘制 的 文本 内 容 。 
@x: 绘制 点 的 x 坐标 。 
目 y: 绘制 点 的 y 坐 标 。 
图 设计 过 程 
(1) 创建 用 于 绘制 文本 的 Servlet 类 DrawStringServlet， 然 后 在 其 service0 方 法 中 实现 绘制 文本 ， 关 键 代码 
如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
1 禁止 页 面 缓 存 
Tesponse.setHeader("Pragma", "No-cache"): 
Tesponse.setHeader("Cache-Control". na 
Tesponse.setDateHeader("Expires", 0) 
response.setContentType("i 人 ); /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=300. height=200; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0. 0. 300, 200): /绘制 实 心 矩形 
g.setColor(Color. BLACK): 
String title = "静夜 思 ": 

int x = 120; // 文 本 位 置 的 横 坐 标 
int y= 30; // 文 本 位 置 的 纵 坐 标 
g.drawString(title, x, y); /绘制 文本 
String author = "李白 ": 
int xl = 135; 
intyl = 50: 


g.drawString(author x1, y1); /给 制 文本 
/此 处 省 略 了 部 分 代码 
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.dispose0: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
TmageIO.write(image, "JPEG", response.getOutputstream0): // 输 出 JPEG 格式 图 片 到 页 面 
response.getOutputStream() .flush(); /刷新 输出 流 

Tesponse.getOutputStream().closeO: /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 indexjsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawStringServlet 类 生成 图 像 


并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" src="DrawStringServlet"> 


图 秘笈 心 法 
对 于 一 些 有 可 能 侵权 的 图 片 ， 或 者 要 作为 宣传 的 图 片 ， 可 以 通过 使 用 drawString0 方 法 ， 将 用 到 的 文字 绘制 
到 图 片上 ， 从 而 得 到 所 谓 的 “水 印 文字 ”。 
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图 实例 说 明 
本 实例 演示 在 Java 中 绘制 文本 时 ， 如 何 设置 文本 的 字体 ， 其 中 包括 字体 
的 名 称 、 大 小 和 样式 ， 运 行程 序 ， 效 果 如 图 13.11 所 示 。 a 


关键 技术 http://conmunity. nrbccd. com 


本 实例 主要 是 使 用 Graphics 类 的 setFont0 方 法 和 使 用 Font 类 创建 字体 对 
象 来 实现 的 。 
(1) 使 用 Graphics 类 的 setFont0 方 法 ， 并 将 Font 类 创建 的 字体 对 象 作 
为 setFont0 方 法 的 参数 ， 实 现 为 文本 设置 字体 的 操作 ，setFont0 方 法 的 定义 
天 Ti abstract void setFont(Font font) 
参数 说 明 
font: 为 文本 设置 的 字体 对 象 。 
(2) 使 用 Font 类 创建 字体 对 象 ， 其 构造 方法 的 定义 如 下 : 


public Font(String name, int style, int size) 

参数 说 明 

@ name: 字体 的 名 称 。 

@ style: 字体 的 样式 。 

@ size: 字体 的 大 小 。 
图 设计 过 程 

(1) 创建 用 于 设置 文本 字体 的 Servlet 类 DrawStringServlet， 然 后 在 其 service0 方 法 中 实现 设置 文本 的 字 
体 ， 关 键 代码 如 下 : 


Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
// 禁 止 页 面 缓存 


13.11 设置 文本 字体 的 效果 


Tesponse.setCont ‘image/JPEG"); // 响 应 格式 为 JPEG 图 片 

// 创 建 一 个 指定 长 宽 的 图 像 

int width=330, height=200; 

BufferedImage image = new BufferedImage(width, height BufferedImage.TYPE INT RGB): 
Graphics g = image.getGraphics0: // 获 取 用 于 处 理 图 形 上 下 文 的 对 象 
&.setColor(new Color(221.221.221)): 1/ 设置 第 1 个 矩形 的 RGB 颜色 
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gfillRect(0. 0. 330, 200): /给 制 实心 矩形 
&g.setColor(Color. BLACK); 

String value =" 明 日 编程 词典 社区 ": 

int x =40; /文本 位 置 的 横 坐 标 

int y= 50; // 文 本 位 置 的 纵 坐标 

Font font = new Font(" 华 文 行 楷 ", Font.BOLD + Font.IT4LIC., 26); // 创 建 字体 对 象 
gsetFont(font); /设置 字体 
g.drawString(value, x, y); /| 绘制 文本 

value = "http://communitymrbccd.com' 

x=10; /文本 位 置 的 横 坐 标 

y= 100; /文本 位 置 的 纵 坐 标 

font = new Font(" 宋 体 " FontLBOLD, 20); // 创 建 字体 对 象 
g.setFont(font): /设置 字体 
g.drawString(value, x, y); /绘制 文 本 

g.dispose(); // 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG". response.getOutputStream()); /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush(); // 刷 新 输出 流 
Tesponse.getOutputStream().closeO: // 关 闭 输出 流 


} 

(2) 创建 用 于 显示 图 片 的 indexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawStringServlet 类 生成 图 像 
并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 

<img alt="" src="DrawStringServlet"> 
图 秘笈 心 法 

在 绘制 文本 的 同时 , 经常 需 要 设置 文本 的 字体 样式 , 以 达到 醒目 的 效果 , 字体 样式 包括 粗 体 样式 FontBOLD、 
斜体 样式 FontITALIC 和 普通 样式 Font.PLAIN， 这 些 字体 样式 可 以 单独 设置 ， 也 可 以 组 合 使 用 ， 在 组 合 使 用 时 
需要 用 连接 符 “+” 进 行 连接 ， 如 粗 斜 体 样式 为 “Font.BOLD+Font.ITALIC”。 
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字 何 | : 
实例 338 实用 指数 : 但 廊 丰 页 : 


图 实例 说 明 


本 实例 演示 在 Java 中 绘制 文本 和 图 形 时 , 如 何 设置 文本 和 图 形 的 颜 
色 。 运 行程 序 ， 效 果 如 图 13.12 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 使 用 Graphics 类 的 setColor0 方 法 和 使 用 Color 
类 创建 颜色 对 象 来 实现 的 。 
(1) 使 用 Graphics 类 的 setColor0 方 法 ， 并 将 Color 类 创建 的 颜色 13.12 设置 文本 和 图 形 颜色 的 效果 
对 象 作为 setColor0 方 法 的 参数 ， 实 现 为 文本 和 图 形 设置 颜色 的 操作 ， 
setColor( 方 法 的 定义 如 下 : 


public abstract void setColor(Color color) 
参数 说 明 
color: 为 文本 或 图 形 设置 的 颜色 对 象 。 
(2) 使 用 Color 类 创建 颜色 对 象 ， 其 构造 方法 的 定义 如 下 : 


public Color(int r int g, int b) 
参数 说 明 

Or: RGB 颜色 的 了 值 。 
@ g: RGB 颜色 的 G 值 。 
目 b: RGB 颜色 的 B 值 。 
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多 提示 : Color 类 提供 了 多 个 重 载 的 构造 方法 ， 用 户 可 以 根据 需要 进行 选择 。 


图 设计 过 程 


(1) 创建 用 于 设置 文本 和 图 形 颜色 的 Servlet 类 DrawImageServlet， 然 后 在 其 service0 方 法 中 实现 设置 文本 


和 图 形 的 颜色 ， 关 键 代码 如 下 : 


Pprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServietException, IOException { 


1/ 禁止 页 面 缓存 

Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse.setHeader("Cache-Control", "No-cache"); 
response.setDateHeader("Expires", 0); 
Tesponse.setC. "image/JPEG"): 
/创建 一 个 指定 长 宽 的 图 像 
int width=330, height=200; 


/响应 格式 为 JPEG 图 片 


BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphics(; 
&g.setColor(new Color(221,221,221)); 
gfillRect(0, 0, 330, 200); 

String value =" 只 要 努力 3 
int x = 60; 

int y= 60; 

Color color = new Color(255,0,0); 
&.setColor(color); 

g.drawString(value, x, y): 

value = "一 切 省 有 可 能 "; 

X= 140; 

y= 100; 

color = new Color(0,0,255); 
&.setColor(color); 

g.drawString(value, x, y); 

color = Color. ORANGE: 
g.setColor(color); 
g.drawRoundRect(40,30,200,100,40,30); 
g.drawRoundRect(45.35.190.90.36.26): 
g.disposeO); 

ImageIO.write(image, "JPEG", response.getOutputStream(); 
Tesponse.getOutputStream().flush(); 
Tesponse.getOutputStream().close|); 


} 


1/ 获取 用 于 处 理 图 形 上 下 文 的 对 象 
// 设 置 第 1 个 矩形 的 RGB 颜色 
/ 验 制 实心 矩形 


/文本 位 置 的 横 坐标 
/文本 位 置 的 纵 坐标 
/创建 颜 色 对 象 
/设置 颜色 

/绘制 文本 


/文本 位 置 的 横 坐标 
/文本 位 置 的 纵 坐 标 

/创建 颜色 对 象 

/设置 颜色 

/给 制 文本 

// 通 过 Color 类 的 字段 获得 颜色 对 象 
/设置 颜色 

/绘制 圆 角 矩 形 

1/ 绘制 圆 角 和 矩形 

// 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
// 输 出 PEG 格式 图 片 到 页 面 

/刷新 输出 流 

/关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 。 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawImageServlet 类 生成 图 像 


并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 
<img al sre—"DrawImageServlet"> 


图 秘笈 心 法 


在 绘制 文本 和 图 形 时 , 除了 使 用 Color 类 的 构造 方法 创建 颜色 对 象 处 , 还 可 以 使 用 Color 类 提供 的 字段 获得 


颜色 对 象 ， 如 红色 为 ColorRED 或 Colorred。 


i132 
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图 实例 说 明 


绘制 图 案 


本 实例 演示 大 家 所 熟悉 的 奥林匹克 运动 会 的 会 徽 ， 即 五 环 图 案 的 绘制 。 运 行程 序 ， 将 在 网 页 上 显示 绘制 的 


S06 


第 13 章 图 像 生成 
五 环 图 案 ， 效 果 如 图 13.13 所 示 。 


nae WD 
本 实例 主要 是 通过 使 用 Graphics2D 类 的 setStroke0 方 法 、setColor0 方 法 和 
drawOval0 方 法 来 实现 的 。 
(1) 使 用 Graphics2D 类 的 setStroke0 方 法 指定 笔画 的 粗细 。 13.13 五 环 图 案 


(2) 使 用 Graphics2D 类 的 setColor0 方 法 指定 颜色 。 
(3) 使 用 Graphics2D 类 的 drawOval0 方 法 在 指定 位 置 绘制 圆 环 ， 该 方法 是 从 Graphics 类 中 继承 的 。 
图 设计 过 程 
(1) 创建 用 于 生成 五 环 图 案 的 Servlet 类 DrawOvalServlet， 然 后 在 其 service0 方 法 中 实现 绘制 五 环 图 案 ， 
关键 代码 如 下 : 
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 


/禁止 页 面 缓 存 
Tesponse.setHeader("Pragma", "No-cache"); 
.SetHeader(' 


Tesponse.setCont vimage/JPEG"): /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=270, height=200; 


BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE RGB): 
Graphics g = image.getGraphics(); // 获 取 用 字 各 理 卫 捅 上 下 文 风 对 象 
g.setColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0, 0, 270, 200); /绘制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: // 获 得 Graphics2D 对 象 
BasicStroke stroke = new BasicStroke(3); /创建 宽度 是 3 的 笔画 对 象 
g2.setStroke(stroke); // 设 置 笔画 对 象 

Color color = new Color(0,162,232): 1/ 创建 颜色 对 和 象 
g2.setColor(color): /1/ 设 置 颜色 

g2.drawOval(30. 40. 60, 60); // 绘 制 第 1 个 圆 

ee /此 处 省 略 了 其 他 部 分 代码 

g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImagelIO.write(image, "JPEG", response.getOutputStreamO); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flush(); 1 刷新 输出 流 
Tesponse.getOutputStreamO.closeO: /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawOvalServlet 类 生成 图 像 
并 显示 在 页 面 中 ， 关 键 代码 如 下 : 
<img al sre="DrawOvalServlet"> 
图 秘笈 心 法 
在 五 环 图 案 中 ， 每 种 颜色 都 有 特定 的 含义 ， 为 了 获得 五 环 图 案 的 颜色 ， 可 以 在 Photoshop 中 按 F8 键 ， 在 打 
开 的 信息 面板 中 获得 颜色 的 RGB 值 ， 然 后 使 用 Color 类 的 构造 方法 创建 颜色 对 象 。 
初级 | 
实用 指 效 ， 友 妇 雪 家 | 
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图 实例 说 明 
本 实例 演示 如 何 使 用 坐标 轴 平 移 、 图 形 旋转 和 获得 随机 数 等 技术 绘制 艺术 图 案 。 运 行程 序 ， 将 在 网 页 上 显 
示 出 绘制 的 艺术 图 案 ， 效 果 如 图 13.14 所 示 。 


Java Web 开发 实例 大 全 (基础 卷 ) 


13.14 ”艺术 图 案 


图 关键 技术 


本 实例 主要 是 使 用 Graphics2D 类 的 translate0 方 法 、setColor0 方 法 、rotate0 方 法 和 draw0 方 法 来 实现 的 。 
(1) 使 用 Graphics2D 类 的 translate0 方 法 将 坐标 轴 平 移 到 指定 点 。 


} 


(2) 使 用 Graphics2D 类 的 setColor0 方 法 设置 颜色 。 


(3) 使 用 Graphics2D 类 的 rotate0 方 法 旋转 绘图 上 下 文 。 
(4) 使 用 Graphics2D 类 的 draw0 方 法 在 指定 位 置 绘制 椭圆 。 


图 设计 过 程 
(1) 创建 用 于 生成 艺术 图 案 的 Servlet 类 DrawArtServlet， 然 后 在 其 service0 方 法 中 实现 绘制 艺术 图 案 ， 关 


键 代码 如 下 : 
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 


1/ 禁止 页 面 缓存 

Tesponse.setHeader("Pragma", "No-cache"): 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"): 

1/ 创建 一 个 指定 长 宽 的 图 像 

int width=300, height=200; 


/响应 格式 为 了 PEG 图 片 


BufferedImage image = new BufferedImage(width, height, BufferedImage.TZPE INT RGB): 


Graphics g = image.getGraphics():; 

g.setColor(new Color(221,221,221)): 

g.fillRect(0, 0, 300, 200); 

Graphics2D g2 = (Graphics2D)g; 

Ellipse2D Float ellipse = new Ellipse2D.Float(-80, 5, 160, 10); 

Random random = new Random(): 

82.translate(160. 90): 

int R =random.nextInt(256); 

int G =random.nextInt(256); 

intB = random.nextInt(256); 

Color color = new Color(R.G.B); 

g2.setColor(color); 

g2.draw(ellipse); 

int i=0; 

while (i<100){ 
R=random.nextInt(256); 
G=random.nextInt(256); 
B =random.nextInt(256); 
color = new Color(R.G.B); 
g2.setColor(color): 
22.rotate(10); 


Tesponse.getOutputStream() flushO): 
Tesponse.getOutputStream().closeO): 


(2) 创建 用 于 显示 图 片 的 indexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawArtServlet 类 生成 图 像 并 


/获取 用 于 处 理 图 形 上 下 文 的 对 象 
/设置 第 1 个 矩形 的 RGB 颜色 
// 绽 制 实心 矩形 

/获得 Graphics2D 对 象 
/创建 椭圆 对 象 

// 创 建 随机 数 对 象 

// 平 移 坐 标 轴 

// 随 机 产生 颜色 的 RR 值 

/随机 产生 颜色 的 G 值 

/随机 产生 颜色 的 B 值 
/创建 颜色 对 象 

/指定 颜色 

/绘制 权 圆 


/随机 产生 颜色 的 及 值 
/随机 产生 颜色 的 G 值 
/随机 产生 颜色 的 B 值 
// 创 建新 的 颜色 对 象 
/指定 颜色 

/ 攻 转 画布 

// 驮 制 椭圆 


/释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
/输出 JPEG 格式 图 片 到 页 面 

// 刷 新 输出 流 

/关闭 输出 流 


tt 
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显示 在 页 面 中 ， 关 键 代 码 如 下 : 

<img alt="" src="DrawArtServlet"> 
国 秘笈 心 法 

使 用 Random 类 的 实例 生成 伪 随 机 数 流 ， 并 使 用 该 类 的 nextInt(int Dn) 方法， 产生 一 个 0 (包含 ) ~n (不 包 
含 ) 之 间 的 随机 整数 ,由 于 颜色 的 RGB 值 是 0 一 255 之 间 的 整数 值 , 所 以 为 nextInt(int n) 方 法 的 参数 n 传递 256， 
这 样 就 可 以 随机 产生 一 个 0 一 255 之 间 的 整数 表示 颜色 RGB 值 。 
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图 实例 说 明 
本 实例 演示 如 何 使 用 坐标 轴 平 移 和 图 形 旋转 等 技术 绘制 花瓣 。 运 行程 序 ， 将 在 网 页 上 显示 绘制 的 花瓣 ， 效 
果 如 图 13.15 所 示 。 


轩 关键 技术 NA 


本 实例 主要 是 通过 使 用 Graphics2D 类 的 translate0 方 法 、setColor0 方 法 、 %; 
rotate0 方 法 和 fl0 方 法 来 实现 的 。 SS 
(1) 使 用 Graphics2D 类 的 translate0 方 法 将 坐标 轴 平 移 到 指定 点 。 
(2) 使 用 Graphics2D 类 的 setColor0 方 法 设置 颜色 。 图 13.15 绘制 花瓣 
(3) 使 用 Graphics2D 类 的 rotate0 方 法 旋转 绘图 上 下 文 。 
(4) 使 用 Graphics2D 类 的 fill0 方 法 在 指定 位 置 绘制 带 填 充 色 的 椭圆 。 


图 设计 过 程 


(1) 创建 用 于 生成 花 泊 图 案 的 Servlet 类 DrawFlowerServlet， 然 后 在 其 service0) 方 法 中 实现 绘制 花 斩 图 案 ， 
关键 代码 如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
/禁止 页 面 缓存 
Tesponse.setHeader("Pragma". "No-cache"): 
Tesponse.setHeader("Cache-Control", "No-cache"): 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"): /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=300. height=200; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0. 0. width. height): /绘制 实心 矩形 
Graphics2D g2 = (Graphics2D)g: /获得 Graphics2D 对 象 
g2.translate(width/2.height/2): /平移 坐标 轴 
/绘制 绿色 花瓣 
Ellipse2D.Float ellipse = new Ellipse2D Float(30. 0, 70, 20): /创建 椭圆 对 象 
Color color = new Color(0.255.0): /创建 颜色 对 象 
g2.setColor(colon): /指定 颜色 
22.fill(ellipse); /绘制 椭圆 
int i=0; 
while (i<8){ 
g2.rotate(30); 1/ 旋转 画 布 
g2.fill(ellipse): /| 绘制 椭圆 
tt; 
} 
1/ 绘制 红色 花 状 


Java Web 开发 实例 大 全 (基础 卷 ) 


ellipse = new Ellipse2D Float(20, 0. 60. 15): /创建 椭圆 对 象 
color = new Color(255.0.0): /创建 颜色 对 象 
g2.setColor(color); // 指 定 颜色 
2g2.fill(ellipse); /绘制 椭圆 
i=0; 
while (i<15){ 
g2.rotate(75); /旋转 画布 
g2.fill(ellipse); /绘制 椭圆 
计 HH 
} 
/给 制 黄色 花瓣 
ellipse = new Ellipse2D .Float(10, 0, 50, 15); /创建 椭圆 对 象 
color = new Color(255.255.0); /创建 颜色 对 象 
g2.setColor(color); /指定 颜色 
g2.fill(ellipse); /绘制 椭圆 
i=0; 
while (i<8){ 
82.rotate(30); /旋转 画 布 
22.fill(ellipse); // 绘 制 椭圆 
计 +t; 
} 
/绘制 红色 中 心 点 
color = new Color(255, 0, 0); /创建 颜色 对 象 
g2.setColor(color); /指定 颜色 
ellipse = new Ellipse2D .Float(-10. -10, 20, 20); // 创 建 椭圆 对 象 
g2.fill(ellipse); 
g2.disposeO; 
g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush|): 1 刷新 输出 流 
Tesponse.getOutputStream().closeO; /关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 indexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawFlowerServlet 类 生成 图 
像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" src="DrawFlowerServlet"> 


国 秘笈 心 法 
利用 图 形 旋转 技术 和 坐标 轴 平 移 ， 还 可 以 实现 时 钟 的 绘制 ， 方 法 是 通过 线程 或 定时 器 控件 在 指定 的 时 间 间 
隔 内 绕 坐标 轴 分 别 旋转 表示 秒针 、 分 针 和 时 针 的 图 形 或 图 像 ， 从 而 达到 时 钟 显示 时 间 的 效果 。 


初级 
实用 指数 ， 育 良 雪 从 : 
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图 实例 说 明 
本 实例 演示 如 何 使 用 坐标 轴 平 移 和 缩放 、 绘 制 顶 圆 、 绘 制 多 边 形 和 绘制 文本 等 技术 实现 公章 的 绘制 。 运 行 
程序 ， 将 在 网 页 上 显示 绘制 的 公章 ， 效 果 如 图 13.16 所 示 。 


图 关键 技术 


本 实例 主要 是 使 用 Graphics2D 类 的 translate0 、setColor0 、scaleO 、 
drawStringO0、fillPolygon0 和 draw0 等 方法 来 实现 的 。 
(1) 使 用 Graphics2D 类 的 translate0 方 法 将 坐标 轴 平 移 到 指定 点 。 
(2) 使 用 Graphics2D 类 的 setColor0 方 法 设置 颜色 。 图 13.16 绘制 公章 
(3) 使 用 Graphics2D 类 的 scale0 方 法 对 公章 中 的 文本 进行 缩放 。 
(4) 使 用 Graphics2D 类 的 drawString0 方 法 绘制 文本 ， 该 方法 是 从 Graphics 类 继承 的 。 
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图 设计 过 程 


(1) 创建 用 于 入 


关键 代码 如 下 : 


Pprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 


/禁止 页 面 缓 存 

Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse.setHeader("Cache-Control", "No-cache"); 
response.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"); 

// 创 建 一 个 指定 长 宽 的 图 像 

int width=325, height=205; 


图 像 生成 


(5) 使 用 Graphics2D 类 的 flPolygon0 方 法 绘制 公章 的 五 星 ， 该 方法 也 是 从 Graphics 类 继承 的 。 
(6) 使 用 Graphics2D 类 的 draw0 方 法 绘制 表示 公章 的 圆 。 


成 公章 图 案 的 Servlet 类 DrawCachetServlet， 然 后 在 其 service0 方 法 中 实现 绘制 公章 图 案 ， 


// 响 应 格式 为 JPEG 图 片 


BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE ITNT RGB): 


Graphics g = image.getGraphicsO: 

8g.setColor(new Color(221,221,221)); 

gfillRect(0, 0, width, height); 

Graphics2D g2 = (Graphics2D) g; 

g2.translate(170, 100); 

BasicStroke stroke = new BasicStroke(6): 

g2.setStroke(stroke); 

/绘制 圆 

Ellipse2D.Float ellipse = new Ellipse2D.Float(-80, -80. 160, 160); 

Color color = new Color(255, 0, 0); 

8g2.setColor(color); 

g2.draw(ellipse); 

// 绘 制 五 星 

int[] xl = { 0, 8, 30, 16, 25, 0, -25, -16, -30, -8 }; 

int] y1 = { -35, -10, -15, 5, 28, 10, 28, 5, -15, -10 }; 

intn1= 10; 

g2.fillPolygon(x1, y1, n1); 

/绘制 文本 

g2.scale(1.8, 1.8); 

Font font = new Font(" 宋 体 ", Font.BOLD, 12); 

g2.setFont(font); 

g2.drawString(" 专 用 章 ", -25, 30); 

char[] array=” 明 日 科技 有 限 公司 

int len = array.length * 2; 

font = new Font(" 宋 体 ", Font.BOLD. 10); 

g2.setFont(font); 

double angl 

for (inti= 0; i < array.length: it+) { 
int x = (int) (len * Math.sin(Math.toRadians(angle + 270))): 
inty= (int) (len * Math.cos(Math.toRadians(angle + 270))): 


"toCharArray0: 


g2.drawString(array[i] + "", width / 2+x - 168. height /2 -y - 95); 


angle = angle + 360d / array.length: 
} 
82.disposeO: 
&.disposeO: 
ImageIO.write(image. "JPEG", response.getOutputsStream0): 
Tesponse.getOutputStream().flushO:; 
Tesponse.getOutputStream().close|O; 


并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" src="DrawCachetServlet"> 


图 秘笈 心 法 
在 进行 图 形 和 文本 的 绘制 时 ， 要 求 能 够 正确 设置 绘图 上 下 文 的 属性 ， 如 文本 的 字体 、 颜 色 、 图 形 线条 的 粗 


/获取 用 于 处 理 图 形 上 下 文 的 对 象 
/设置 第 1 个 矩形 的 RGB 颜色 

/| 绘制 实 心 答 形 

/| 获得 Graphics2D 对 象 

/平移 坐标 轴 

/创建 宽度 是 6 的 笔画 对 象 
/设置 笔画 对 象 


/创建 圆 对 象 
/创建 颜色 对 象 
/指定 颜色 

/| 绘制 贺 


/多 边 形 的 横 坐 标 
/多 边 形 的 纵 坐标 
/多 边 形 的 边 数 
/给 制 多 边 形 


1 放大 

// 创 建 字体 

/设置 字体 

/绘制 文本 

// 把 字符 串 转换 为 字符 数组 
// 定 义 半径 

// 创 建新 字体 

/设置 字体 

/初始 角度 

// 饥 历 字符 串 中 的 字符 
/计算 每 个 文字 的 位 置 
/计算 每 个 文字 的 位 置 
/绘制 每 个 字符 ， 其 中 168 和 95 是 坐标 平移 值 
/改变 角度 


1/ 释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
/输出 JPEG 格式 图 片 到 页 面 

/刷新 输出 流 

// 关 闭 输 出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 ,在 该 页 中 添加 一 个 <img> 标 签 ， 调用 DrawCachetServlet 类 生成 图 像 
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细 、 虚 线 还 是 实 线 ， 以 及 颜色 等 ， 正 确 设置 的 方法 是 在 绘制 每 一 种 新 样式 的 文本 或 图 形 之 前 ， 先 对 绘图 上 下 文 
的 属性 进行 设置 ， 然 后 再 绘制 文本 和 图 形 ， 这 样 设置 的 绘图 上 下 文 属性 才 是 有 效 的 。 


13.3 图形 的 合并 运算 


实例 343 


图 实例 说 明 
本 实例 演示 在 Java 中 如 何 实现 图 形 的 加 运算 ， 即 取 两 个 图 形 的 并 集 。 
运行 程序 ， 将 在 网 页 上 显示 进行 加 运算 后 的 图 形 ， 效 果 如 图 13.17 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 Graphics2D 类 的 draw0 方 法 和 Area 类 来 实现 的 ， 
其 中 Area 类 用 于 封装 图 形 对 象 ， 并 通过 add0 方 法 对 封装 的 图 形 对 象 进行 13.17 图形 进行 加 运算 的 效果 
加 运算 。 

(1) 使 用 Area 类 的 构造 方法 封装 图 形 对 象 ， 其 构造 方法 的 定义 如 下 : 

public Area(Shape s) 

参数 说 明 

s: 是 Area 类 封装 的 图 形 对 象 。 

(2) 使 用 Area 类 的 add0 方 法 对 封装 的 图 形 对 象 进行 加 运算 ， 该 方法 的 定义 如 下 : 

参数 说 明 

public void add(Area rhs) 

ths: 与 当前 Area 对 象 进行 加 运算 的 Area 对 象 。 

图 设计 过 程 
(1) 创建 用 于 进行 图 形 加 运算 的 Servlet 类 PlusOperationServlet， 然 后 在 其 service0 方 法 中 实现 图 形 的 加 运 
算 ， 关 键 代 码 如 下 : 
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 

// 禁 止 页 面 缓存 

Tesponse.setHeader("Pragma", "No-cache"); 

Tesponse.setHeader("Cache-Control". "No-cache”"); 

Tesponse.setDateHeader("Expires", 0); 

Tesponse.setContentType("image/JPEG"): // 响 应 格式 为 JPEG 图 片 

/创建 一 个 指定 长 宽 的 图 像 

int width=370. height=205; 

BufferedImage image = new BufferedImage(width. height, BufferedImage.TZPE INT RGB); 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221,221,221)): /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0. 0. width. height): /给 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: // 获 得 Graphics2D 对 象 
2g2.setColor(Color. BLUE): 

Ellipse2D Float ellipsel = new Ellipse2D Float(20. 70. 160. 60): /创建 椭圆 对 象 

Ellipse2D Float ellipse2 = new Ellipse2D Float(120. 20, 60, 160): /创建 椭圆 对 象 

Area areal = new Area(ellipsel): // 创 建 区 域 椭圆 

Area area2 = new Area(ellipse?); // 创 建 区 域 椭圆 
areal.add(area2): // 两 个 区 域 椭圆 进行 加 运算 
g2.draw(areal); /| 绘制 加 运算 后 的 区 域 椭圆 
Ellipse2D Float ellipse3 = new Ellipse2D Float(200. 70. 160. 60): // 创 建 椭圆 对 象 
Ellipse2D.Float ellipse4 = new Ellipse2D.Float(250, 20, 60, 160): /创建 椭圆 对 象 
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Area area3 = new Area(ellipse3); // 创 建 区 域 椭圆 

Area area4 = new Area(ellipse4); // 创 建 区 域 椭圆 

area3.add(area4); // 两 个 区 域 椭圆 进行 加 运算 

g2.draw(area3): /| 绘制 加 运算 后 的 区 域 椭圆 

22.disposeO; 

.dispose0: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO .writelimage, "JPEG", response.getOutputStream()): /| 输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flush(): // 刷 新 输出 流 

Tesponse.getOutputStream().close(): /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 PlusOperationServlet 类 生成 图 
像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" src="PlusOperationServlet> 


图 秘笈 心 法 


在 调用 完 Graphics 或 Graphics2D 之 后 ， 一 定 不 要 忘记 调用 其 dispose0 方 法 , 释放 图 形 上 下 文 以 及 它 使 用 的 
所 有 系统 资源 。 


实例 344 


图 实例 说 明 


本 实例 演示 在 Java 中 如 何 实现 图 形 的 减 运算 ， 即 从 当前 图 形 中 减 去 
与 另 一 个 图 形 的 交集 。 运 行程 序 ， 将 在 网 页 上 显示 进行 减 运算 后 的 图 形 ， 
效果 如 图 13.18 所 示 。 


图 关键 技术 


本 实例 主要 是 使 用 Graphics2D 类 的 draw0 方 法 和 Area 类 来 实现 的 ， 
其 中 Area 类 用 于 封装 图 形 对 象 ， 并 通过 subtract0 方 法 对 封装 的 图 形 对 象 图 13.18 图形 进行 减 运算 的 效果 
进行 减 运 算 。 

使 用 Area 类 的 subtract0 方 法 对 封装 的 图 形 对 象 进行 减 运算 ， 该 方法 的 定义 如 下 : 

public void subtract(Area rhs) 

参数 说 明 

ths: 与 当前 Area 对 象 进行 减 运算 的 Area 对 象 。 

图 设计 过 程 
(1) 创建 用 于 进行 图 形 减 运算 的 Servlet 类 SubtractOperationServlet， 然 后 在 其 service() 方 法 中 实现 图 形 的 
减 运算 ， 关 键 代 码 如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IJOException { 
// 禁 止 页 面 缓存 
Tesponse.setHeader("Pragma". "No-cache”): 
Tesponse.setHeader("Cache-Control", "No-cache"): 
Tesponse.setDateHeader("Expires". 0); 
Tesponse.setContentType("image/JPEG"): // 响 应 格式 为 JPEG 图 片 
// 创 建 一 个 指定 长 宽 的 图 像 
int width=370, height=205; 
BufferedImage image = new BufferedImage(width._ height BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: // 获 取 用 于 处 理 图 形 上 下 文 的 对 象 
&.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
gfillRect(0. 0. width., height): /给 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: // 获 得 Graphics2D 对 象 

Ellipse2D .Float ellipsel = new Ellipse2D .Float(20. 20. 160. 160): /创建 圆 对 象 
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Ellipse2D Float ellipse2 = new Ellipse2D Float(90. 20, 160. 160): /创建 圆 对 象 

Area areal = new Area(ellipsel); // 创 建 区 域 圆 

Area area2 = new Area(ellipse2); // 创 建 区 域 圆 

areal .subtract(area2); /两 个 区 域 圆 进行 减 运算 
g2.setColor(new Color(178,186.174)): 

g2.fill(areal); /绘制 减 运算 后 的 区 域 圆 
Ellipse2D Float ellipse3 = new Ellipse2D Float(200. 70. 160. 60): // 创 建 椭圆 对 象 
Ellipse2D.Float ellipse4 = new Ellipse2D Float(250. 40. 60, 60): /创建 圆 对 象 

Area area3 = new Area(ellipse3): // 创 建 区 域 椭圆 

Area area4 = new Area(ellipse4); 1/ 创建 区 域 圆 
area3.subtract(area4); /两 个 区 域 图 形 进行 减 运算 
g2.setColor(Color. BLUE); 

g2.draw(area3); // 绘 制 减 运算 后 的 区 域 图 形 
g2.dispose(); 

g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()):; /| 输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream( .flush|); /刷新 输出 流 
Tesponse.getOutputStream().closeO; /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 SubtractOperationServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 
<img alt=" sre="SubtractOperationServlet"> 
图 秘笈 心 法 
在 利用 Servlet 生成 图 像 时 ， 必 须 设 置 响应 正文 的 MIME 类 型 为 图 片 格式 image/jpeg， 这 样 才能 生成 一 个 
图 片 。 


初级 
实用 指数 : 食 食 食 谷 


实例 345 


图 实例 说 明 


本 实例 演示 在 Java 中 如 何 实现 图 形 的 交 运 算 ， 即 保留 两 个 图 形 的 交 
集 。 运 行程 序 ， 将 在 网 页 上 显示 进行 交 运算 后 的 图 形 ， 效 果 如 图 13.19 一 


sp [| 


本 实例 主要 是 使 用 Graphics2D 类 的 draw0 方 法 和 Area 类 来 实现 的 ， 
其 中 Area 类 用 于 封装 图 形 对 象 ， 并 通过 intersect0 方 法 对 封装 的 图 形 对 13.19 ”图形 进行 交 运 算 的 效果 
象 进行 交 运 算 。 

使 用 Area 类 的 intersect0 方 法 对 封装 的 图 形 对 象 进行 交 运算 ， 该 方法 的 定义 如 下 : 

public void intersect(Area rhs) 

参数 说 明 

ths: 与 当前 Area 对 象 进行 交 运 算 的 Area 对 象 。 
图 设计 过 程 

(1) 创建 用 于 进行 图 形 交 运算 的 Servlet 类 IntersectOperationServlet， 然 后 在 其 service0 方 法 中 实现 图 形 的 

交 运算 ， 关 键 代码 如 下 : 


Protected void service(HttpServletRequest request. HttpServletResponse response) throws ServletException, IOException { 
/禁止 页 面 缓 存 
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Tesponse.setContentType("image/JPEG"): // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=370, height=205: 


BufferedImage image = new BufferedImage(width, height BufferedImage.TYPE INT RGB): 

Graphics g = image.getGraphics0: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221,221,221)): /设置 第 1 个 矩形 的 RGB 颜色 
gfilIRect(0, 0, width. height); /给 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g; /获得 Graphics2D 对 象 
g2.setColor(Color. BLUE): 


Rectangle2D.Float rect = new Rectangle2D.Float(30, 30, 160. 120):; // 创 建 答 形 对 象 
Ellipse2D.Float ellipse = new Ellipse2D.Float(20, 30, 180, 180); 。“ // 创 建 圆 对 象 


Area areal = new Area(rect); /创建 区 域 矩 形 

Area area2 = new Area(ellipse); // 创 建 区 域 贺 

areal .intersect(area2); // 两 个 区 域 图 形 进行 交 运 算 
22.draw(areal); 1/ 绘制 交 运算 后 的 区 域 图 形 


Ellipse2D.Float ellipsel = new Ellipse2D Float(190. 20, 100, 140);”// 创 建 椭圆 对 象 
Ellipse2D.Float ellipse2 = new Ellipse2D Float(240. 20, 100, 140);”// 创 建 椭圆 对 象 


Area area3 = new Area(ellipsel); // 创 建 区 域 椭圆 

Area area4 = new Area(ellipse2); // 创 建 区 域 椭圆 

area3.intersect(area4); // 两 个 区 域 行 交 运算 

g2.setColor(new Color(178,186,174)); 

g2.fill(area3); // 绘 制 交 运算 后 的 区 域 椭圆 

g2.dispose(); 

g.dispose(); 1/ 释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
TImagelO.write(image, "JPEG", response.getOutputStream()); /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush(|); /刷新 输出 流 

Tesponse.getOutputStream().closeO; // 关 闭 输出 流 


> 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 IntersectOperationServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" sre="IntersectOperationServlet"> 


图 秘笈 心 法 
利用 Area 类 的 交 运 算 方法 intersect0 可 以 轻松 地 获取 两 个 不 同形 状 的 图 形 的 交集 ， 而 用 户 只 需要 创建 不 同 
形状 的 图 形 对 象 ， 然 后 调用 其 intersect0 即 可 ， 并 不 需要 编写 大 量 代码 计算 它 是 如 何 进行 交 运算 的 。 


实例 346 


实用 指数 : 妇女 妇女 


图 实例 说 明 


本 实例 演示 在 Java 中 如 何 实现 图 形 的 异 或 运算 ， 即 两 个 图 形 去 除 交 
集 后 剩 下 的 部 分 。 运 行程 序 ， 将 在 网 页 上 显示 进行 异 或 运算 后 的 图 形 ， 效 
果 如 图 13.20 所 示 。 


图 关键 技术 


本 实例 主要 是 使 用 Graphics2D 类 的 draw0 方 法 和 Area 类 来 实现 的 ， 
其 中 Area 类 用 于 封装 图 形 对 象 ， 并 通过 exclusiveOr0 方 法 对 封装 的 图 形 13.20 图形 进 行 异 或 运算 的 效果 
对 象 进行 异 或 运算 。 

使 用 Area 类 的 exclusiveOr0 方 法 对 封装 的 图 形 对 象 进行 异 或 运算 ， 该 方法 的 定义 如 下 : 

Public void exclusiveOr(Area 1hs) 

参数 说 明 

ths: 与 当前 Area 对 象 进行 异 或 运算 的 Area 对 象 。 
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图 设计 过 程 


(1) 创建 用 于 进行 图 形 异 或 运算 的 Servlet 类 ExclusiveOrOperationServlet， 然 后 在 其 service0 方 法 中 实现 图 


形 的 异 或 运算 ， 关 键 代 码 如 下 : 


Pprotected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 


// 禁 止 页 面 缓存 

response.setHeader("Pragma", "No-cache"); 
Tesponse setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"); 
/创建 一 个 指定 长 宽 的 图 像 

int width=370, height=205; 


/响应 格式 为 JPEG 图 片 


BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE ITNT RGB): 


Graphics g = image.getGraphics(): 
&g.setColor(new Color(221,221,221)); 
gfillRect(0, 0, width, height); 
Graphics2D g2 = (Graphics2D)g; 
8g2.setColor(new Color(178,186,174)); 
Ellipse2D.Float ellipsel = new Ellipse2D.Float(20, 70, 160, 60); 
Ellipse2D Float ellipse2 = new Ellipse2D.Float(120, 20, 60, 160); 
Area areal = new Area(ellipsel); 
Area area2 = new Area(ellipse2); 
areal.exclusiveOr(area2); 
g2.fill(areal); 
Ellipse2D.Float ellipse3 = new Ellipse2D.Float(200, 70, 160, 60); 
Ellipse2D Float ellipse4 = new Ellipse2D.Float(250, 20, 60. 160); 
Area area3 = new Area(ellipse3); 
Area area4 = new Area(ellipse4); 
area3.exclusiveOr(area4); 
g2.fill(area3); 
g2.disposeO; 
g.dispose(); 
TmageIO.write(image, "JPEG", response.getOutputStream()); 
Tesponse.getOutputStream().flush(); 
: Tesponse.getOutputStream().close(); 


/获取 用 于 处 理 图 形 上 下 文 的 对 象 
/设置 第 1 个 矩形 的 RGB 颜色 

/| 绘制 实心 答 形 

/获得 Graphics2D 对 象 


// 创 建 椭圆 对 象 
// 创 建 椭圆 对 象 
/创建 区 域 椭圆 
/创建 区 域 椭圆 
// 两 个 区 域 椭圆 进行 异 或 运算 
// 绘 制 异 或 运算 后 的 区 域 椭圆 
// 创 建 椭圆 对 象 
// 创 建 椭圆 对 象 
// 创 建 区 域 椭圆 
/创建 区 域 椭圆 
// 两 个 区 域 椭圆 进行 异 或 运算 
// 绘 制 异 或 运算 后 的 区 域 椭圆 


1/ 释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
/输出 JPEG 格式 图 片 到 页 面 

/刷新 输出 流 

// 关 闭 输 出 流 


(2) 创建 用 于 显示 图 片 的 indexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 ExclusiveOrOperationServlet 


类 生成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" src="ExclusiveOrOperationServlet"> 


图 秘笈 心 法 


利用 Area 类 的 异 或 运算 方法 exgclusiveOr0， 可 以 轻松 地 对 不 同形 状 的 图 形 进行 异 或 运算 ， 而 用 户 只 需要 创 


建 不 同形 状 的 图 形 对 象 ， 然 后 调用 其 exclusiveOrO 即 可 ， 并 不 需要 编写 大 量 代 码 计算 它 是 如 何 进行 异 或 运算 的 。 


13.4 文字 特效 


实例 347 


图 实例 说 明 


实用 指数 ， 雄 朗 妇 家 | 


本 实例 演示 如 何 利用 Java 的 绘图 技术 ， 实 现 立 体 效果 文字 的 绘制 。 运 行程 序 ， 将 在 网 页 上 显示 出 绘制 立体 


效果 的 文字 ， 效 果 如 图 13.21 所 示 。 
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明日 科技 


13.21 立体 效果 的 文字 
图 关键 技术 


使 用 Graphics 类 的 setFont(0 方 法 设置 完 字体 、 字 型 和 字号 后 ， 使 用 Graphics 类 的 setColor0 方 法 将 绘图 上 下 
文 的 前 景色 设置 为 灰色 ， 然 后 使 用 Graphics 类 的 drawString0 方 法 绘制 文本 ， 并 且 每 次 绘制 的 文本 都 向 右 向 下 移 
动 一 小 段 距 离 ， 最 后 再 将 绘图 上 下 文 的 前 景色 更 改 为 黑色 ， 然 后 再 绘制 一 次 文本 ， 从 而 实现 立体 字 效 果 。 

(1) 使 用 Graphics 类 的 setFont0 方 法 ,并 将 Font 类 创建 的 字体 对 象 作为 setFont0 方 法 的 参数 ,实现 为 文本 
设置 字体 的 操作 ，setFont0 方 法 的 定义 如 下 : 

public abstract void setFont(Font font) 

参数 说 明 

font: 为 文本 设置 的 字体 对 象 。 

(2) 使 用 Graphics 类 的 setColor0 方 法 ， 并 将 Color 类 创建 的 颜色 对 象 作 为 setColor0 方 法 的 参数 ， 实 现 为 
文本 和 图 形 设置 颜色 的 操作 ，setColor0 方 法 的 定义 如 下 : 

public abstract void setColor(Color color) 

参数 说 明 

color: 为 文本 或 图 形 设置 的 颜色 对 象 。 

(3) 使 用 Graphics 类 的 drawString0 方 法 绘制 文本 ， 该 方法 的 定义 如 下 : 

public abstract void drawString(String str, int x, int y) 

参数 说 明 

@ str: 绘制 的 文本 内 容 。 

@x: 绘制 点 的 x 坐标 。 
绘制 点 的 y 坐标 。 


| | RE 
(1) 创建 用 于 绘制 立体 效果 文字 的 Servlet 类 DrawSolidTextServlet， 然 后 在 其 service0 方 法 中 实现 绘制 立 
体 效果 的 文字 ， 关 键 代 码 如 下 : 


Protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
1 禁止 页 面 缓 存 
Tesponse.setHeader("Pragma", "No-cache"); 
response.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"): // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=370. height=205; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: // 获 取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221.221.221)): 1/ 设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0. 0. width. height): /绘制 实心 矩形 
String value =" 明 日 科技 "; 
int x= 16: /文本 位 置 的 横 坐标 
inty= 100: /文本 位 置 的 纵 坐 标 
Font font = mew Font(" 宋 体 ". Font.BOLD. 72); /创建 字体 对 象 
g.setFont(font); /设置 字体 
g.setColor(Color. GRAY): /设置 颜色 为 灰色 
inti= 0: /循环 变量 
while (i<8){ 
g.drawString(value, x. y): /绘制 文本 
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= /调整 绘制 点 的 横 坐 标 值 
yt=l; /调整 绘制 点 的 纵 坐 标 值 
tt; /调整 循环 变量 的 值 
} 
g.setColor(Color. BLACK): // 设 置 颜色 为 黑色 
g.drawString(value, x, y); /绘制 文本 
.dispose0O: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() flushO|: /刷新 输出 流 
Tesponse.getOutputStream().close(); 1/ 关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawSolidTextServlet 类 生成 
图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" src="DrawSolidTextServlet"> 


图 秘笈 心 法 


在 程序 中 使 用 Graphics 类 的 drawString0 方 法 绘制 文本 时 ， 可 以 通过 变量 来 指定 文本 绘制 点 的 横 、 纵 坐标 ， 
并 在 绘制 文本 时 通过 线程 来 改变 文本 绘制 点 的 横 、 纵 坐标 ， 从 而 可 以 实现 文本 移动 的 动画 效果 。 


实例 348 
图 实例 说 明 
本 实例 演示 如 何 利用 Java 的 绘图 技术 , 实现 阴影 效果 文字 的 绘制 .运行 程序 ， 
将 在 网 页 上 显示 阴影 效果 的 文字 ， 效 果 如 图 13.22 所 示 。 编程 词典 
图 关键 技术 


使 用 Graphics 类 的 setFont0 方 法 设置 完 字 体 、 字 型 和 字号 后 ， 使 用 Graphics 13.22 ”阴影 效果 的 文字 

类 的 setColor0 方 法 将 绘图 上 下 文 的 前 景色 设置 为 灰色 ， 然 后 使 用 Graphics 类 的 
drawString() 方 法 绘制 文本 ， 然 后 再 将 绘图 上 下 文 的 前 景色 更 改 为 黑色 ， 并 且 将 绘制 的 文本 都 向 左 向 上 移动 一 小 
段 距离 ， 从 而 实现 阴影 文字 的 效果 。 

(1) 使 用 Graphics 类 的 setFont0 方 法 ， 并 将 Font 类 创建 的 字体 对 象 作为 setFont0 方 法 的 参数 ， 实 现 为 文本 
设置 字体 的 操作 。 

(2) 使 用 Graphics 类 的 setColor0 方 法 ， 并 将 Color 类 创建 的 颜色 对 象 作为 setColor0 方 法 的 参数 ， 实 现 为 
文本 和 图 形 设 置 颜 色 的 操作 。 

(3) 使 用 Graphics 类 的 drawString0 方 法 绘制 文本 。 


图 设计 过 程 
(1) 创建 用 于 绘制 阴影 效果 文字 的 Servlet 类 DrawShadowTextServlet， 然 后 在 其 service0 方 法 中 实现 绘制 


阴影 效果 的 文字 ， 关 键 代码 如 下 : 
Pprotected void service(HttpServletRequest Tequest, HttpServletResponse response) 
throws ServletException. IOException { 
1/ 禁 止 页 面 缓存 


1esponse.setDateHeader("Expires". 0): 


Tesponse.setContentType("i py /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=370, height=205; 
BufferedImage image = new BufferedImage(width. height. BufferedImage.TYPE INT_ RGB): 
Graphics g = image getGraphics0: 用 了 处理 六 各 上 下文 约 对 锭 
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gsetColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
gfillRect(0. 0, width, height); /| 绘制 实心 和 矩 形 

String value = "编程 词典 "; 

int x=16; /文本 位 置 的 横 坐标 

inty= 100; /文本 位 置 的 纵 坐 标 

Font font = new Font(" 华 文 行 楷 ". Font.BOLD. 72): /创建 字体 对 象 
gsetFont(font); /设置 字体 

g.setColor(Color. GRAY): // 设 置 颜色 为 灰色 

inti=0; // 循 环 变量 

g.drawString(value, x, y); 1/ 绘制 文本 

X=3; // 调 整 绘制 点 的 横 坐 标 值 
y=3; // 调 整 绘制 点 的 纵 坐 标 值 
g.setColor(Color. BLACK): // 设 置 颜色 为 黑色 
g.drawString(value, x, y); /| 绘制 文本 

g.dispose(); // 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush(): // 刷 新 输出 流 
Tesponse.getOutputStreamO.closeO: /关闭 输出 流 


} 

(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawShadowTextServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 

<img alt=" sre="DrawShadowTextServlet"> 
图 秘笈 心 法 

在 绘制 阴影 文字 时 ， 有 时 会 出 现 阴影 不 在 文字 的 下 方 ， 这 是 由 于 先 绘制 的 内 容 是 显示 在 下 面 的 ， 而 后 绘制 
的 内 容 是 显示 在 上 面 的 ， 所 以 解决 的 方法 是 在 绘制 阴影 文字 时 ， 应 先 将 阴影 绘制 到 绘图 上 下 文 上 ， 然 后 再 绘制 
需要 显示 的 文本 ， 并 在 横向 和 纵向 分 别 偏 移 一 小 段 距 离 ， 这 样 就 能 正常 显示 文字 的 阴影 。 


实例 349 


图 实例 说 明 
本 实例 演示 如 何 利用 Java 的 绘图 技术 ， 实 现 倾斜 效果 文字 的 绘制 。 运 行 
程序 ， 将 在 网 页 上 显示 出 倾斜 效果 的 文字 ， 效 果 如 图 13.23 所 示 。 号 典 
、 往 
图 关键 技术 痪 程 
使 用 Graphics2D 类 的 setShear0 方 法 , 倾斜 绘图 上 下 文 对 象 , 然后 使 用 从 
Graphics 类 继承 的 setFont0 方 法 设置 字体 、 字 型 和 字号 ， 使 用 drawString0 方 图 13.23 ”倾斜 效果 的 文字 
法 绘制 文本 ， 从 而 实现 文字 的 倾斜 效果 。 
(1) 使 用 从 Graphics 类 继承 的 setFont0 方 法 设置 绘图 上 下 文 的 字体 。 
(2) 使 用 Graphics2D 类 的 setShear0 方 法 ， 使 绘图 上 下 文 倾斜 这样 绘制 的 文本 就 是 倾斜 的 文本 ， 该 方法 
的 定义 如 下 : 
public abstract void shear(double shx, double shy) 
参数 说 明 
@ shx: 在 正和 X 轴 方向 移动 坐标 的 乘 数 ， 它 可 以 作为 其 y 坐标 的 函数 。 
@ shy: 在 正 立 轴 方 向 移动 坐标 的 乘 数 ， 它 可 以 作为 其 x 坐标 的 函数 。 
(3) 使 用 从 Graphics 类 继承 的 drawString0 方 法 绘制 文本 。 


图 设计 过 程 
(1) 创建 用 于 绘制 倾斜 效果 文字 的 Servlet 类 DrawShearTextServlet， 然 后 在 其 service0 方 法 中 实现 绘制 倾 
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斜 效 果 的 文字 ， 关键 代码 如 下 : 


Tesponse.setCon ‘image/JPEG"): // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

it width=370, height=205; 

BufferedImage image = new BufferedImage(width height, BufferedImage.TYPE INT RGB); 


Graphics g = image.getGraphicsO: // 获 取 用 于 处 理 图 形 上 下 文 的 对 象 
gsetColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.filRect(0. 0. width, height); // 绽 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g; // 转 换 为 Graphics2D 类 型 
g2.setColor(Color. BLACK): 

String value = "编程 词典 "; /| 绘制 的 文本 

intx= 10; // 文 本 位 置 的 横 坐 标 

int y= 170; // 文 本 位 置 的 纵 坐 标 

Font font = new Font(" 华 文 行 楷 ", Font.BOLD, 72); // 创 建 字 体 对 象 

g2.setFont(font); /设置 字体 

g2.shear(0.1, -0.4); /倾斜 画布 

g2.drawString(value, x, y); /绘制 文本 

g2.disposeO; 

g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream0); // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush|); 1 刷新 输出 流 
Tesponse.getOutputStream(.closeO; /关闭 输出 流 


} 

(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawShearTextServlet 类 生成 
图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 

<img alt="" sre="DrawShearTextServlet"> 
图 秘笈 心 法 

在 Java 中 可 以 通过 Polygon 类 创建 多 边 形 ， 从 而 实现 平行 四 边 形 的 绘制 ， 但 是 使 用 该 类 有 一 个 缺点 ， 就 是 
必须 要 正确 计算 出 每 个 点 的 横 、 纵 坐标 ， 为 此 可 以 使 用 Graphics2D 类 的 ee :图 上 下 文 ， 并 使 用 
shear(0 方 法 倾斜 绘图 上 下 文 ， 然 后 再 绘制 矩形 ， 这 样 所 绘制 的 矩形 就 可 以 显示 为 平行 四 边 形 。 


初级 
S | :i 
实例 350 实用 指数 : 但 宙 友人 页 


图 实例 说 明 

在 程序 中 绘制 的 文本 信息 通常 都 是 单一 的 颜色 ， 本 实例 使 用 GradientPaint 类 创建 封装 渐变 颜色 的 对 象 ， 并 
为 绘图 上 下 文 指定 该 对 象 ， 从 而 实现 绘制 渐变 效果 文字 的 功能 。 运 行程 序 ， 将 
在 网 页 上 显示 出 绘制 渐变 效果 的 文字 ， 效 果 如 图 13.24 所 示 。 Java 全 能 


图 关键 技术 on 


本 实例 主要 是 使 用 Graphics2D 类 的 setPaint0 方 法 来 实现 的 ,为 绘图 上 下 文 。 
指定 GradientPaint 类 创建 的 渐变 色 对 象 ， 从 而 实现 给 制 渐变 效果 文字 的 功能 。 图 1324 渐变 效果 的 文字 

(1) 使 用 Graphics2D 类 的 setPaint0 方 法 ， 并 将 GradientPaint 类 创建 的 封装 渐变 颜色 的 对 象 作为 setPaintO 
方法 的 参数 ， 实 现 为 图 形 填充 渐变 色 的 操作 ，setPaint0 方 法 的 定义 如 下 : 

public abstract void setPaint(Paint paint) 

参数 说 明 

paint: 封装 了 渐变 颜色 的 Paint 对 象 
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(2) 使 用 GradientPaint 类 创建 封装 渐变 颜色 的 对 象 ， 其 构造 方法 的 定义 如 下 : 


public GradientPaint(float x1, float y1, Color colorl, float x2, float y2, Color color2, boolean cyclic) 
参数 说 明 
©@ x1: 用 户 空间 中 第 一 个 指定 点 的 x 坐标 。 
@ yl: 用 户 空间 中 第 一 个 指定 点 的 y 坐标 。 
@ colorl1: 第 一 个 指定 点 处 的 Color 对 象 。 
@ x2: 用 户 空间 中 第 二 个 指定 点 的 x 坐标 。 
上 日 Y2: 用 户 空间 中 第 二 个 指定 点 的 y 坐标 。 
@ color2: 第 二 个 指定 点 处 的 Color 对 象 。 
@ cyclic: 如 果 渐 变 模式 在 两 种 颜色 之 间 重 复 循环 ， 则 该 值 设置 为 rue; 否则 设置 为 false。 
图 设计 过 程 
(1) 创建 用 于 绘制 渐变 效果 文字 的 Servlet 类 DrawGradientTextServlet， 然 后 在 其 service(0 方 法 中 实现 绘制 
渐变 效果 的 文字 ， 关 键 代码 如 下 : 
protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
// 禁 止 页 面 缓存 
Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
response.setContentType("image/JPEG"); // 响 应 格式 为 JPEG 图 片 
// 创 建 一 个 指定 长 宽 的 图 像 
int width=370, height=205; 
BufferedImage image = new BufieredImage(width, height, BufferedImage.TYPE INT_RGB):; 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0, 0, width, height); /绘制 实 心 矩形 

Graphics2D g2 = (Graphics2D)g: /| 转换 为 Graphics2D 类 型 
String value = "Java 全 能 "; /绘制 的 文本 

intx= 15; /文本 位 置 的 横 坐标 

inty= 60; /文本 位 置 的 纵 坐标 

Font font = new Font(" 楷 体 ", Font.BOLD, 60); 1/ 创建 字体 对 象 
g2.setFont(font); /设置 字体 

/创建 循环 渐变 的 GradientPaint 对 象 

GradientPaint paint = new GradientPaint(20, 20. Color BLUE, 100.120. Color RED, truej: 
g2.setPaint(paint); /设置 渐变 
g2.drawString(value, x, y); /| 绘制 文本 

font = new Font(" 华 文 行 楷 ", Font.BOLD, 60); // 创 建新 的 字体 对 象 
g2.setFont(font); /设置 字体 

X= 80; /文本 位 置 的 横 坐 标 

y= 130:; // 文 本 位 置 的 纵 坐 标 

value = "编程 词典 "; 1/ 绘制 的 文本 
g2.drawString(value, x, y); /| 绘制 的 文本 

82.dispose0: 

g.disposeO: // 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStreamO); // 输 出 JPEG 格式 图 片 到 页 面 
response.getOutputStream() .flushO): 1 刷新 输出 流 
Tesponse.getOutputStreamO.closeO: /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawGradientTextServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" src="DrawGradientTextServlet"> 


国 秘笈 心 法 
在 绘制 具有 渐变 颜色 的 图 形 和 文本 时 ， 如 果 对 各 种 颜色 的 距离 有 所 限制 ， 可 以 在 使 用 GradientPaint 类 创建 
渐变 对 象 时 ， 通 过 改变 起 始点 和 终止 点 之 间 的 距离 来 实现 。 
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图 实例 说 明 

水 印 文字 是 通过 改变 绘图 上 下 文 的 透明 度 来 实现 的 , 本 实例 将 演示 水 
印 文字 的 实现 。 运行 程序 ,将 在 网 页 上 显示 绘制 图 片 ， 并 为 图 片 添 加 水 印 
文字 ， 效 果 如 图 13.25 所 示 。 
图 关键 技术 


本 实例 主要 是 通过 Graphics2D 类 的 setComposite( 方 法 ， 为 绘图 上 下 
文 指定 表示 透明 度 的 AlphaComposite 对 象 实现 的 。 


(1) 使 用 AlphaComposite 类 获得 表示 透明 度 的 AlphaComposite 对 13.25 水 印 文字 特效 
象 , 该 对 象 使 用 AlphaComposite 类 的 字段 SrcOver 调用 derive0 方 法 获得 ， 
该 方法 的 定义 如 下 : 
public AlphaComposite derive(float alpha) 
参数 说 明 


@ alpha: 闭 区 间 0.0f 一 1.0f 之 间 的 一 个 浮 点 数字 ， 为 0.0f 时 完全 透明 ， 为 1.0f 时 不 透明 。 
@ 返回 值 : 表示 透明 度 的 AlphaComposite 对 象 。 
(2) 使 用 Graphics2D 类 的 setComposite0 方 法 ， 为 绘图 上 下 文 指定 表示 透明 度 的 AlphaComposite 对 象 ， 该 
方法 的 定义 如 下 : 
public abstract void setComposite(Composite comp) 
参数 说 明 
comp: 表示 透明 度 的 AlphaComposite 对 象 。 


图 设计 过 程 
(1) 创建 用 于 绘制 图 片 并 为 图 片 添加 水 印 效果 文字 的 Servlet 类 DrawWatermarkTextServlet， 然 后 在 其 
service0 方 法 中 实现 绘制 图 片 并 为 图 片 添加 水 印 效果 ， 关 键 代码 如 下 : 


protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
1/ 禁止 页 面 缓存 
Tesponse.setHeader("Pragma", "No-cache"); 
response.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"): /响应 格式 为 PEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=470. height=305; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
&.fillRect(0. 0. width. height): /给 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: /转换 为 Graphics2D 类 型 
g2.setColor(Color. BLACK): 

String imgPath = getServletContextO.getRealPath("imgyimagejpg"); /获取 图 片 的 路 径 

BufferedImage bufferImg = ImageIO .read(new File(imgPath)): // 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 
AffineTransformOp op = new AffineTransformOp(new AffineTransform().null) : // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
g2.drawImage(bufferImg.op. 0. 0): /绘制 图像 

g2.rotate(Math.toRadians(-30)); 1/ 旋转 绘图 上 下 文 对 象 

Font font = new Font(" 楷 体 "Font.BOLD.60): 1/ 创建 字体 对 象 

g2.setFont(font); /指定 字体 

g2.setColor(Color. WHITE): /指定 颜色 
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AlphaComposite alpha = AlphaComposite .SecOver derive(0.39: /获得 表示 透明 度 的 AlphaComposite 对 象 
g2.setComposite(alpha); /指定 AlphaComposite 对 象 
82.drawString(" 编 程 词典 ". -60. 180); /| 绘制 文本 ， 实 现 水 印 

g2.disposeO; 

gdispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
TImageIO.write(image, "JPEG", response.getOutputStream()): /| 输出 了 PEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flush():; 1 刷新 输出 流 

Tesponse.getOutputStream().closeO: /关闭 输出 流 


} 
(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawWatermarkTextServlet 类 

生成 图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 

<img alt="" sre="Draw WatermarkTextServlet"> 
图 秘笈 心 法 

除了 使 用 本 实例 提供 的 方法 获得 表示 透明 度 的 AlphaComposite 对 象 以 外 , 还 可 以 使 用 AlphaComposite 类 提 
供 的 getImstance() 方 法 获得 AlphaComposite 对 象 ,如 语句 AlphaComposite.getmstance(AlphaComposite.SRC_OVER) 
就 获得 了 一 个 规则 是 AlphaComposite.SRC_OVER 的 AlphaComposite 对 象 〈 与 本 实例 使 用 的 字段 SrcOver 具有 
相同 的 规则 )， 通 过 该 对 象 调用 derive0 方 法 ， 可 以 获得 具有 指定 透明 度 的 AlphaComposite 对 象 。 


13.5 图 片 特效 


实例 352 


图 实例 说 明 
在 窗 体 上 显示 的 图 像 通常 都 以 矩形 显示 ， 本 实例 使 用 Java 的 绘图 技术 ， 
实现 以 椭圆 形 显示 图 像 。 运 行程 序 ， 效 果 如 图 13.26 所 示 。 


图 关键 技术 
本 实例 的 实现 主要 是 通过 图 形 区 域 的 减 运算 ,将 矩形 区 域 与 椭圆 形 区 域 进 
行 减 运算 ， 并 用 运算 结果 害 盖 图 像 ， 从 而 实现 以 帖 圆 形 显示 图 像 的 功能 。 痢 36 以 搞 国 江 是 示 国 性 
(1) 使 用 Area 类 的 构造 方法 封装 图 形 对 象 ， 其 构造 方法 的 定义 如 下 : 
public Area(Shape s) 
参数 说 明 


s: 是 Area 类 封装 的 图 形 对 象 。 
(2) 使 用 Area 类 的 subtract0 方 法 对 封装 的 图 形 对 象 进行 减 运算 ， 该 方法 的 定义 如 下 : 
参数 说 明 
public void subtract(Area ths) 
hs: 与 当前 Area 对 象 进行 减 运 算 的 Area 对 象 。 
图 设计 过 程 
(1) 创建 以 椭圆 形 显示 图 像 的 Servlet 类 DrawEllipseImageServlet， 然 后 在 其 service0 方 法 中 实现 绘制 椭圆 
形 图 像 ， 关 键 代 码 如 下 : 
Protected void service(HttpServietRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
/| 禁止 页 面 缓存 


Tesponse.setHeader("Pragma". "No-cache”); 
response.setHeader("Cache-Control". "No-cache"); 
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Tesponse.setDateHeader("Expires". 0): 

Tesponse.setContentType("image/JPEG"): /响应 格式 为 了 PEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=310. height=220; 

BufferedImage image = new BufferedImage(width._ height, BufferedImage.TZPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 

gsetColor(new Color(221,221,221)): /设置 第 1 个 矩形 的 RGB 颜色 

gfillRect(0, 0, width, height): /给 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: /转换 为 Graphics2D 类 型 

String imgPath = getServletContext|.getRealPath("/img/image.jpg"): /获取 图 片 的 路 径 

BufferedImage bufferImg = ImageIO .read(new File(imgPath)): // 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 
AffineTransformOp op = new AffineTransformOp(new AffineTransform(.null) ; // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
g2.drawImage(bufferImg.op, 0, 0); /给 制图 像 

Rectangle2D.Float rectangle = new Rectangle2D .Float(0, 0, width heightb: /创建 矩形 对 象 

Ellipse2D.Float ellipse = new Ellipse2D .Float(20. 20. 260. 160); // 创 建 椭圆 形 对 象 

Area areal = new Area(rectangle); /创建 区 域 矩形 

Area area2 = new Area(ellipse); // 创 建 区 域 椭圆 

areal.subtract(area2); // 两 个 区 域 形状 进行 减 运 算 

g2.setColor(new Color(221,221,221)); /设置 绘图 上 下 文 的 颜色 为 面板 的 背景 颜色 
22.fill(areal); // 绘 制 减 运 算 后 的 区 域 形状 

g2.dispose(); 

g.disposeO; /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flush(|); 1 刷新 输出 流 

Tesponse.getOutputStream().closeO; /关闭 输出 流 


(2) 创建 用 于 显示 图 片 的 mdexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawEllipseImageServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 

<img alt=" sre="DrawEllipseImageServlet"> 
图 秘笈 心 法 

本 实例 实现 了 以 椭圆 形 显示 图 像 ， 对 本 实例 进行 扩充 ， 可 以 将 不 同 图 形 进行 加 、 减 、 交 和 异 或 等 运算 ， 得 
到 所 需要 的 形状 ， 然 后 用 该 形状 覆盖 原 图 像 ， 就 能 够 以 该 形状 显示 图 像 。 


实例 353 0 


实用 指数 去 太 相让 ， 


图 实例 说 明 


本 实例 演示 了 如何 利用 Java 的 绘图 技术 ， 实 现 图 片 百 叶 窗 特效 。 运 
行程 序 ， 将 在 网 页 上 显示 图 片 百 叶 窗 效果 ， 如 图 13.27 所 示 。 


图 关键 技术 


本 实例 主要 是 在 缓冲 图 像 对 象 上 绘制 直线 , 并 对 缓冲 图 像 对 象 进行 模 
糊 处 理 实现 的 ,对 图 像 进行 模糊 处 理 需 要 用 到 Kernel 类 和 ConvolveOp 类 。 三 = 
(1) Kemel 类 定义 了 一 个 矩阵 ， 用 于 描述 指定 的 像素 及 其 周围 像 


素 ,， 如何 影响 过 滤 操 作 输出 图 像 中 像素 位 置 的 计算 值 ， 其 构造 方法 的 定义 图 13.27 图 片 百叶 窗 特效 
na Kernel(int width. int height, float[] data) 

参数 说 明 

@ width: 当前 Kemel 的 宽度 。 

@ height 当前 Kernel 的 高 度 。 

@ data: 以 行 优先 顺序 提供 的 Kemel 数据 。 
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(2) ConvolveOp 类 实现 从 源 到 目标 的 卷 积 ， 是 一 种 通过 输入 像素 来 计算 输出 像素 的 空间 运算 ， 方 法 是 将 
核 与 输入 像素 邻 域 相 乘 。 这 种 运算 使 得 直接 邻 域 可 按 核 数学 指定 的 方式 影响 输出 像素 ， 其 构造 方法 定义 如 下 : 
public ConvolveOp(Kemel kemel) 
参数 说 明 
kernel: 指定 的 Kernel。 
(3) ConvolveOp 类 提供 了 一 个 fter0 方 法 ， 可 以 对 缓冲 图 像 进行 过 滤 ， 实 现 对 图 像 的 特殊 处 理 ， 如 模糊 、 
照 亮 边缘 等 ， 该 方法 的 定义 如 下 : 
public final BufferedImage filter(BufferedImage sre, BufferedImage dst) 
参数 说 明 
@ src: 要 过 滤 的 源 BufferedImage。 
@ dst: 已 过 滤 的 src 的 目标 BufferedImage 或 为 null。 
四 返回 值 ， 对 缓冲 图 像 进行 处 理 后 的 新 BufferedImage 对 象 。 


图 设计 过 程 
(1) 创建 用 于 绘制 图 片 百 叶 窗 特效 的 Servlet 类 DrawShutterImageServlet， 然 后 在 其 service() 方 法 中 实现 绘 
制图 片 的 百叶 窗 特 效 ， 关 键 代码 如 下 : 


protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
1/ 禁止 页 面 缓存 
Tesponse.setHeader("Pragma", "No-cache"): 
Tesponse.setHeader("Cache-Control", "No-cache"); 
response.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"); /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=340, height=230; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TZPE INT RGB): 


Graphics g = image.getGraphicsO): /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0, 0, width, height); /绘制 实心 矩形 
Graphics2D g2 = (Graphics2D)g: /转换 为 Graphics2D 类 型 
String imgPath = getServletContext|.getRealPath("/img/image.jpg"): /获取 图 片 的 路 径 
BufferedImage bufferImg = ImageIO.read(new File(imgPath)); // 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 
AffineTransformOp op = new AffineTransformOp(new AffineTransform0,null); /根据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
g2.drawImage(bufferImg.op. 10. 10); // 绘 制图 像 
inty=5; /直线 绘制 点 的 了 坐标 
int space = 10; /下 一 条 直线 的 偏 移 量 
Line2D.Float line = null; 
// 创 建 缓冲 图 像 对 象 
BufferedImage img = new BufferedImage(bufferImg.getWidth() . bufferImg.getHeight(),BufferedImage.TYPE _INT_ ARGB): 
Graphics2D gs2d = (Graphics2D) img.getGraphicsO: /获得 缓冲 图 像 对 象 的 Graphics2D 对 象 
BasicStroke stroke = new BasicStroke(7); // 创 建 宽度 是 7 的 笔画 对 象 
gs2d.setStroke(stroke); /设置 笔画 对 象 
gs2d.setColor(Color. WHITE): /指定 颜色 
while (y <= bufferImg.getHeightO) { 

line = new Line2D.Float(0, y.bufferImg. getWidth(), y); // 创 建 直线 对 象 

gs2d.draw(line); /在 缓冲 图 像 对 象 上 绘制 直线 

y=y+ space: /计算 下 一 条 直线 的 了 坐标 
: 
for (inti=0:i<3;it+) { // 该 for 循环 实现 3 次 模糊 

float[] elements = new float[9]: /定义 表示 像素 分 量 的 数组 

for (intj=0:j<9:j+Hb { 

elements[j] = 0.11f: // 为 数组 赋值 

} 

Kernel kernel = new Kernel(3, 3. elements): /创建 Kernel 对 象 

ConvolveOp op1 = new ConvolveOp(kernel): // 创 建 ConvolveOp 对 象 

i (mg—nulD) { 

Teturn: 
} 
img = opl.filter(img. null): // 过 滤 缓 冲 图 像 对 象 
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g2.drawImage(img, op, 10. 10); /| 绘制 缓冲 图 像 对 象 

gs2d.disposeO:; 

g2.dispose|; 

gdisposeO: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG". response.getOutputStream0): // 输 出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush(); /刷新 输出 流 

Tesponse.getOutputStream().close(); /关闭 输出 流 


下 

(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawShutterImageServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 

<img alt="" sre="DrawShutterImageServiet"> 
图 秘 签 心 法 

在 使 用 Kemel 类 创建 对 象 时 ， 有 时 会 出 错 ， 这 是 由 于 在 使 用 Kernel 类 创建 对 象 时 ， 一 定 要 保证 数组 data 
的 长 度 ， 也 就 是 datalength 的 值 ， 必 须要 大 于 或 等 于 width*height， 否 则 程序 就 会 出 错 。 


实例 354 | 
实用 指数 : 信人 让 从 


图 实例 说 明 

对 人 物 或 图 像 进行 马赛 克 处 理 后 可 使 其 变 得 模糊 ， 对 于 不 想 公 开 的 内 
容 部 分 可 以 起 到 保护 作用 。 运 行程 序 ， 效 果 如 图 13.28 所 示 。 
国 关键 技术 


在 实现 本 实例 时 ， 主 要 用 到 了 Graphics2D 类 的 setPaint0 方 法 和 
setComposite() 方 法 ， 并 且 应 用 了 表示 透明 度 的 AlphaComposite 类 。 有 关 
Graphics2D 类 的 setComposite0 方 法 以 及 AlphaComposite 类 的 用 法 ,请 参见 
实例 351 的 关键 技术 。 下 面 主要 介绍 Grahpics2D 类 的 setPaint0 方 法 。 站 

使 用 Graphics2D 类 的 setPaint0 方 法 时 ， 需 要 将 GradientPaint 类 创建 的 封装 渐变 颜色 的 对 象 作为 setPaintO 
方法 的 参数 ， 实 现 为 图 形 填充 渐变 色 的 操作 ，GradientPaint 类 的 构造 方法 的 定义 如 下 : 

public GradientPaint(float x1, float y1, Color colorl, float x2. float y2. Color color2. boolean cyclic) 

参数 说 明 

@ x1: 用 户 空间 中 第 一 个 指定 点 的 x 坐标 。 

@yl: 用 户 空间 中 第 一 个 指定 点 的 y 坐标 。 

上 @ color1: 第 一 个 指定 点 处 的 Color 对 象 。 

@ x2: 用 户 空间 中 第 二 个 指定 点 的 x 坐标 。 

@ y2: 用 户 空间 中 第 二 个 指定 点 的 y 坐标 。 

@ color2: 第 二 个 指定 点 处 的 Color 对 象 。 

@ cyclic: 如 果 渐 变 模式 在 两 种 颜色 之 间 重 复 循 环 ， 则 该 值 设 置 为 true; 否则 设置 为 false。 

图 设计 过 各 
(1) 创建 用 于 绘制 图 片 并 且 为 图 片 添加 马赛 克 特 效 的 Servlet 类 DrawMosaicImageServlet， 然 后 在 其 
service() 方 法 中 实现 图 片 的 马赛 克 特效 ， 关 键 代码 如 下 : 

protected void service(HttpServletRequestrequest HttpServletResponse response) 

throws ServletException. IOException { 


// 蔡 止 页 面 缓存 
Tesponse.setHeader("Pragma". "No-cache”): 
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Tesponse.setHeader("Cache-Control", "No-cache"); 

Tesponse.setDateHeader("Expires", 0); 

Tesponse.setContentType("image/JPEG"): /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=340, height=230; 

BufferedImage image = new BufferedImage(width. height. BufferedImage.TYPE_INT RGB): 


Graphics g = image.getGraphics(): /获取 用 于 处 理 图 形 上 下 文 的 对 象 

g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 

g.fillRect(0. 0. width, height); /给 制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: /转换 为 Graphics2D 类 型 

String imgPath = getServletContext|.getRealPath("/img/image.jpg”); /获取 图 片 的 路 径 

BufferedImage bufferImg = ImageIO .read(new File(imgPathb)): // 读 取 图 片 数 据 ， 转 换 为 BufferImage 对 象 
AffineTransformOp op = new AffineTransformOp(new AffineTransform().null); /根据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
g2.drawImage(bufferImg.op. 10, 10); /绘制 图 像 

intx= 104; /矩形 绘制 点 的 x 坐标 

inty= 60; // 矩 形 绘制 点 的 y 坐标 


Rectangle2D.Float rect = null; 
BufferedImage img = new BufferedImage(bufferImg.getWidth() , bufferImg. getHeightO.BufferedImage.TYPE_INT_ARGB);// 创 建 缓冲 图 像 对 象 


Graphics2D gs2d = (Graphics2D) img.getGraphics(); /获得 缓冲 图 像 对 象 的 Graphics2D 对 象 
AlphaComposite alpha = AlphaComposite.SrcOver.derive(0.90f); /获得 表示 透明 度 的 AlphaComposite 对 象 
gs2d.setComposite(alpha); /设置 透明 度 

GradientPaint paint = null; 


for (inti=0;i< 


全 
paint = new GradientPaint(x, y, Color.white, x + 10, 


y + 10, Color.gray,true): // 创 建 循环 渐变 的 GraphientPaint 对 象 
gs2d.setPaint(paint); /设置 渐变 
Tect = new Rectangle2D.Float(x, y, 20, 20); // 创 建 答 形 对 象 
gs2d.fill(rect); /在 缓冲 图 像 对 象 上 绘制 矩形 
y=y+20; /计算 下 一 个 矩形 的 了 坐标 
} 
y=60; /还 原 y 坐 标 
X=X+20; /计算 x 坐 标 
} 
for (inti=0;i<3;it) { /该 for 循环 实现 3 次 模糊 
float[] elements = new float[9]; /定义 表示 像素 分 量 的 数组 
for (intj=0:j<9:j+H{ 
elements[j] =0.11f; // 为 数组 赋值 
} 
Kernel kernel = new Kernel(3, 3, elements); /创建 Kernel 对 象 
ConvolveOp op1 = new ConvolveOp(kernel); /创建 ConvolveOp 对 象 
if (img— nul) { 
return; 
} 
img = opl.filter(img, null): /过 滤 缓 冲 图 像 对 象 
} 
g2.drawImage(img, op. 10, 10): /绘制 缓冲 图 像 对 象 
gs2d.dispose(); 
g2.dispose(); 
g.disposeO): // 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImagelO.write(image. "JPEG", response.getOutputStream()): /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flush(): /刷新 输出 流 
Tesponse.getOutputStream().close(): // 关 闭 输 出 流 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawMosaicImageServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 

<img alt=" ste="DrawMosaicImageServlet'> 
图 秘笈 心 法 

在 实际 应 用 中 ， 如 果 在 网 页 中 添加 的 图 片 不 想 显示 其 中 的 某 个 指定 区 域 ， 可 以 应 用 本 实例 中 实现 的 方法 进 
行 设 置 。 
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国 实例 说 明 
本 实例 使 用 Java 绘制 技术 实现 了 图 片 的 模糊 效果 。 运 行程 序 ， 将 在 网 页 
上 显示 图 片 的 模糊 效果 ， 效 果 如 图 13.29 所 示 。 


图 关键 技术 


本 实例 主要 是 在 缓冲 图 像 对 象 上 绘制 图 片 ， 并 对 缓冲 图 像 对 象 进行 模 糊 
处 理 实现 的 ， 对 图 像 进行 模糊 处 理 需 要 用 到 Kemel 类 和 ConvolveOp 类 ， 这 
两 个 类 的 具体 用 法 请 参考 实例 353 的 关键 技术 ， 此 处 不 再 獒 述 。 


图 设计 过 程 
(1) 创建 用 于 绘制 图 片 模糊 特效 的 Servlet 类 DrawBlurImageServlet， 然 后 在 其 service0 方 法 中 实现 图 片 的 
模糊 特效 ， 关 键 代 码 如 下 : 


protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
/禁止 页 面 缓存 
Tesponse.setHeader("Pragma", "No-cache"): 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"); /响应 格式 为 PEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=340, height=230; 
BufferedImage image = new BufferedImage(width. height, BufferedImage.TZPE_TNT RGB); 


图 13.29 图 片 模糊 后 的 效果 


Graphics g = image.getGraphics(); /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
&g.fillRect(0, 0, width, height); /绘制 实心 矩形 

Graphics2D g2 = (Graphics2D)g; /转换 为 Graphics2D 类 型 

String imgPath = getServletContext|.getRealPath("/img/image.jpg"); /获取 图 片 的 路 径 

BufferedImage bufferImg = ImageIO .read(new File(imgPath)): 1/ 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 


AffineTransformOp op = new AffineTransformOp(new AffineTransform(.null) ; // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
BufferedImage img = new BufferedImage(bufferImg. getWidth() , bufferImg. getHeightO,BufferedImage.TYPE_INT_ARGB):// 创 建 缓冲 图 像 对 象 


Graphics2D gs2d = (Graphics2D) img.getGraphics(); /获得 缓冲 图 像 对 象 的 Graphics2D 对 象 
gs2d.drawImage(bufferImg, op.10.10); 
for (inti=0;i<3;itD) { // 该 for 循环 实现 3 次 模糊 

float[] elements = new float[9]: /定义 表示 像素 分 量 的 数组 

for (intj=0:j<9:j+Hb{ 

elements[j] =0.11£: // 为 数组 赋值 

} 

Kemel kermel = new Kemel(3. 3, elements); // 创 建 Kernel 对 象 

ConvolveOp op1 = new ConvolveOp(kemel): /创建 ConvolveOp 对 象 

if (mg—null) { 

return; 

} 

img = op1 filter(img, nulD: /过 滤 缓冲 图 像 对 象 
} 
g2.drawImage(img, op. 10, 10); // 绘 制 缓冲 图 像 对 象 
gs2d.disposeO: 
22.disposeO: 
g.dispose(); /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()); /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flushO): /1 刷新 输出 流 
Tesponse.getOutputStream().close(): // 关 闭 输 出 流 


} 
(2) 创建 用 于 显示 图 片 的 indexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 DrawBlurImageServlet 类 生成 
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图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 


<img alt="" src="DrawBlurImageServlet"> 
图 秘笈 心 法 

本 实例 实现 的 关键 是 应 用 ConvolveOp 类 ,该 类 提供 了 一 个 fter0 方 法 ， 用 于 对 缓冲 图 像 进行 过 滤 ， 实 现 对 
图 像 的 特殊 处 理 ， 如 模糊 、 照 亮 边 缘 、 锐 化 等 


初级 | 
实用 指数 : 让 廊 廊 从 


实例 356 


图 实例 说 明 

本 实例 使 用 Java 绘制 技术 实现 了 图 片 的 锐 化 效果 。 运 行程 序 ， 将 在 网 页 
上 显示 锐 化 效果 的 图 片 ， 如 图 13.30 所 示 。 
图 关键 技术 


本 实例 主要 是 在 缓冲 图 像 对 象 上 绘制 图 片 ， 并 对 缓冲 图 像 对 象 进行 锐 化 
处 理 实现 的 , 对 图 像 进行 锐 化 处 理 时 , 同样 需要 用 到 Kernel 类 和 ConvolveOp 
类 。 这 两 个 类 的 详细 说 明 请 参见 实例 353 的 关键 技术 。 

图 设计 过 程 13.30 图片 锐 化 后 的 效果 


(1) 创建 用 于 绘制 图 片 的 锐 化 特效 的 Servlet 类 DrawSharpenImageServlet， 然 后 在 其 service0 方 法 中 实现 
图 片 的 锐 化 特效 ， 关 键 代码 如 下 : 
protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
/禁止 页 面 缓 存 
Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"): /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=340, height=230; 
BufferedImage image = new BufferedImage(width. height. BufferedImage.TYPE INT_RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0. 0. width, height): /绘制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: /转换 为 Graphics2D 类 型 

String imgPath = getServletContext|.getRealPath("/img/image.jpg"); /获取 图 片 的 路 径 

BufferedImage bufferImg = ImageIO .read(new File(imgPath)): // 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 


AffineTransformOp op = new AffineTransformOp(new AffineTransform(),nul) ; // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
BufferedImage img = new BufferedImage(bufferImg.getWidth() , bufferImg.getHeight(|.BufferedImage.TYPE_INT_ARGB):// 创 建 缓冲 图 像 对 象 


Graphics2D gs2d = (Graphics2D) img.getGraphicsO: /获得 缓冲 图 像 对 象 的 Graphics2D 对 象 
gs2d.drawImage(bufferImg. op.10.10): 
float[] elements = {0.0£.-1.0£.0.0f£.-1.0f.5.0£.-1.0f.0.0£.-1.0£.0.0f}: /声明 表示 像素 分 量 的 数组 
Kernel kemel = new Kernel(3. 3, elements); /创建 Kernel 对 象 
ConvolveOp opl = new ConvolveOp(kemel): // 创 建 ConvolveOp 对 象 
if (img— nul) { 
return; 
} 
img = op1 filter(img, nul): /过 滤 缓 冲 图 像 对 象 
g2.drawImage(img, op. 10. 10): /| 终 制 缓冲 图 像 对 象 
gs2d.disposeO; 
82.disposeO: 
g.dispose(): /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
TImageIO.write(image, "JPEG", response.getOutputStream()): /输出 JPEG 格式 图 片 到 页 面 
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Tesponse.getOutputStreamO.fhushO: /刷新 输出 流 
Tesponse.getOutputStream().closeO; // 关 闭 输 出 流 
} 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 ,在 该 页 中 添加 一 个 <img> 标 签 , 调用 DrawSharpenImageServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代码 如 下 : 
<img alt=" sre="DrawSharpenImageServiet’> 


图 秘笈 心 ; 


ConvolveOp 类 可 对 颜色 分 量 预 乘 alpha 分 量 的 BufferedImage 数据 进行 运算 .如 果 源 BufferedImage 有 alpha 
分 量 ， 并 且 颜 色 分 量 没 有 预 乘 alpha 分 量 ， 则 在 卷 积 运算 前 要 先 预 乘 该 数据 。 如 果 Destination 有 未 进行 预 乘 的 
颜色 分 量 , 则 在 存 入 到 Destination 之 前 除 以 alpha 分 量 (如 果 alpha 为 0, 则 颜色 分 量 被 设置 为 0)。 如 果 Destination 
没有 alpha 分 量 ， 则 在 颜色 分 量 除 以 alpha 分 量 之 后 即 丢弃 alpha 分 量 。 


实例 357 i 
实用 指数 :友良 去 家 


图 实例 说 明 


本 实例 使 用 Java 绘制 技术 实现 图 片 的 半 透 明 效 果 。 运 行程 序 ， 将 在 
网 页 上 显示 出 半 透 明 的 图 片 ， 效 果 如 图 13.31 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 Graphics2D 类 的 setComposite0 方 法 为 绘图 上 下 文 
指定 表示 透明 度 的 AlphaComposite 对 象 , 从 而 实现 了 图 片 的 半 透 明 效 果 。 
具体 用 法 请 参见 实例 351 的 关键 技术 。 
ee 图 13.31 图 片 的 半 透 明 效果 
图 设计 过 程 


(1) 创建 用 于 绘制 图 片 的 半 透 明 特 效 的 Servlet 类 TranslucenceImageServlet， 然 后 在 其 service0 方 法 中 实现 
图 片 的 半 透 明 特 效 ， 关 键 代 码 如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IJOException { 
1 禁止 页 面 缓 存 


Tesponse.setContentType("image/JPEG"): /响应 格式 为 了 PEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=340. height=230; 

BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 

g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 

g.fillRect(0. 0. width. height): /绘制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: /| 转换 为 Graphics2D 类 型 

String imgPath = getServletContextO.getRealPath("img/imagejpg"): /获取 图 片 的 路 径 

BufferedImage bufferImg = ImageIO .read(new File(imgPath)): // 读 取 图 片 数 据 ， 转 换 为 BufferImage 对 象 
AffineTransformOp op = new AffineTransformOp(new AffineTransform(.null) ; // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
AlphaComposite alpha= AlphaComposite.SrcOver.derive(0.5f): /获得 表示 半 透 明 的 AlphaComposite 对 象 
82.setComposite(alpha): 

g2.drawImage(bufferImg, op, 10, 10): // 绘 制 缓冲 图 像 对 象 

82.disposeO: 

g.disposeO: // 释 放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputsStreamO): /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flushO: 1 刷新 输出 流 
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Tesponse.getOutputStream().closeO: /1/ 关 闭 输出 流 
} 


(2) 创建 用 于 显示 图 片 的 index.jsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 TranslucenceImageServlet 类 生 
成 图 像 并 显示 在 页 面 中 ， 关 键 代 码 如 下 : 
<img alt="" src="TranslucenceImageServlet> 


图 秘笈 心 法 
本 实例 主要 应 用 为 绘图 上 下 文 指定 表示 透明 度 的 AlphaComposite 对 象 ， 从 而 实现 了 图 片 的 半 透明 效果 。 


实例 358 


图 实例 说 明 
本 实例 使 用 Java 的 绘图 技术 实现 了 两 幅 图 片 的 溶 合 效果 。 运 行程 序 ， 在 
网 页 上 将 显示 两 幅 图 片 的 溶 合 特效 ， 如 图 13.32 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 Graphics2D 类 的 setComposite() 方 法 为 绘图 上 下 文 设 
置 表示 透明 度 的 AlphaComposite 对 象 ， 从 而 实现 了 两 幅 图 片 溶 合 的 效果 。 具 
体 用 法 请 参见 实例 351 的 关键 技术 。 


图 设计 过 程 13.32 ”图片 溶 合 特效 


(1) 创建 用 于 绘制 图 片 的 溶 合 特效 的 Servlet 类 PictureMixServlet， 然 后 在 其 service0 方 法 中 实现 两 个 图 片 


的 溶 合 特效 ， 关 键 代 码 如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
/禁止 页 面 缓存 
response.setHeader("Pragma", "No-cache"): 
response.setHeader("Cache-Control", "No-cache"); 


Tesponse.setContentType("image/JPEG"): /响应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 

int width=340, height=230; 

BufferedImage image = new BufferedImage(width. height, BufferedImage.TYPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 

g.setColor(new Color(221.221.221)): /设置 第 1 个 矩形 的 RGB 颜色 

g.fillRect(0. 0. width. height): /绘制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: // 转 换 为 Graphics2D 类 型 

String imglPath = getServletContext|.getRealPath("/img/img1.jpg"): /获取 图 片 的 路 径 

String img2Path = getServletContext|.getRealPath("/img/img2.jpg"): /获取 图 片 的 路 径 

BufferedImage bufferImg1 = ImageIO .read(new File(img1Path)): // 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 
BufferedImage bufferImg2 = ImageIO .read(new File(img2Path)): // 读 取 图 片 数据 ， 转 换 为 BufferImage 对 象 
AffineTransformOp op = new AffineTransformOp(new AffineTransform(,null) : // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
AlphaComposite alpha = AlphaComposite.SreOver.derive(0.5f); /获得 表示 透明 度 的 AlphaComposite 对 象 
g2.setComposite(alpha); /指定 AlphaComposite 对 象 
g2.drawImage(bufferImg1, op.10.10): 

alpha = AlphaComposite.SrcOver.derive(0.3f); /获得 表示 透明 度 的 AlphaComposite 对 象 
g2.setComposite(alpha): /指定 AlphaComposite 对 象 
82.drawImage(bufierImg2. op.10.10): 

82.disposeO: 

g.dispose(): /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
ImageIO.write(image, "JPEG", response.getOutputStream()): /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream().flushO): /1/ 刷 新 输出 流 

Tesponse.getOutputStream().closeO: /1/ 关 闭 输出 流 
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(2) 创建 用 于 显示 图 片 的 idexjsp 页 ， 在 该 页 中 添加 一 个 <img> 标 签 ， 调 用 PictureMixServlet 类 生成 图 像 
并 显示 在 页 面 中 ， 关 键 代码 如 下 : 


<img alt="" src= "PictureMixServlet > 
国 秘笈 心 法 

本 实例 实现 的 图 片 溶 合 效果 ， 其 实 并 不 难 ， 主 要 就 是 将 两 张 图 片 进行 重合 ， 然 后 应 用 AlphaComposite 设置 
每 张 图 片 的 透明 度 即 可 达到 理想 效果 。 


实例 359 


图 实例 说 明 
本 实例 演示 如 何 利用 Java 的 绘图 技术 实现 光栅 图 像 的 绘制 。 运 行程 序 ， 将 
在 网 页 上 显示 绘制 的 光栅 图 像 ， 效 果 如 图 13.33 所 示 。 


图 关键 技术 

本 实例 的 实现 主要 是 通过 已 有 数字 序列 的 数学 公式 , 计算 数字 序列 在 指定 的 
点 (a,b) 上 是 收敛 的 ， 还 是 发 散 的 ， 如 果 是 收敛 的 ， 就 绘制 光栅 上 的 点 ， 如 果 是 
发 散 的 ， 则 不 进行 光栅 的 绘制 。 图 13.33 光栅 图 像 

公式 x*x-y*y+a 和 2*x*y+b 分 别 用 于 计算 点 (a,b) 在 义 轴 和 在 Y 轴 
方向 上 的 坐标 值 ， 如 果 x 或 者 y 小 于 等 于 2 说 明 该 点 是 收敛 的 ， 就 绘制 光栅 上 的 点 ， 否 则 说 明 该 点 是 发 散 的 ， 
则 不 绘制 光栅 上 的 点 。 
图 设计 过 程 

(1) 创建 用 于 绘制 光栅 图 像 特效 的 Servlet 类 RasterImageServlet， 创 建 isOrNotConvergence( 方 法 用 于 判断 


指定 点 是 收敛 的 ， 还 是 发 散 的， 关键 代码 如 下 : 
private boolean isOrNotConvergence(double a. double b) { // 判 断 数 字 序列 上 的 点 (a.b) 是 收敛 的 ， 还 是 发 散 的 


double x = 0.0D; // 如 果 x 大 于 2， 数字 序列 就 是 发 散 的 
double y = 0.0D:; /1/ 如 果 y 大 于 2， 数字 序列 也 是 发 散 的 
intiterations = 0; /循环 变量 
while (x <= 2 &S&y<=2&&iterations < MAX ITERATIONS) { 
double xNew =x* x-y*y+a: // 计 算 每 个 点 的 x 值 
double yNew =2* x * y+b:; // 计 算 每 个 点 的 y 值 
x=xNew; // 赋 值 给 变量 x， 用 于 判断 是 收敛 还 是 发 散 
y=yNew:; // 赋 值 给 变量 y， 用 于 判断 是 收敛 还 是 发 散 
iterations++: /调整 迭代 器 变量 的 值 
} 
return x>2||y>2; /返回 false 表示 收敛 则 进行 绘制 ， 为 true 表示 发 散 则 透明 


} 
(2) 创建 makeRasterImage() 方 法 ， 用 于 获得 绘制 有 光栅 的 缓冲 图 像 ， 关 键 代 码 如 下 : 


Private BufferedImage makeRasterImage(int width int height) { 
BufferedImage image = new BufferedImage(width. height. 


BufferedImage.TYPE_INT_ARGB): // 创 建 缓冲 图 像 对 象 
WritableRaster raster = image.getRasterO: /获得 提供 像素 写 入 功能 的 WritableRaster 对 象 
ColorModel model = image.getColorModel0: /获得 缓冲 图 像 的 颜色 模型 
Color fractalColor = ColorRED: /定义 表示 红色 的 颜色 对 象 
int argb = fractalColor getRGBO: /获得 表示 颜色 的 RGB 值 


Object colorData = model.getDataElements(argb, nulD); /返回 ColorModel 中 指定 像素 的 数组 表示 形式 
for (inti=0;i<width: it+) { 
for (intj =0;j < height: j++) { 
1/ 计算 点 (ij) 是否 导致 与 点 (a.b) 上 的 像素 收敛 
double a = XMIN +i* (XMAX- XMIN) /width: 
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doubleb = YMIN+j * (YMAX- YMIN) / height: 
这 (!isOrNotConvergence(a, b)) {// 如 果 点 (ij) 导 致 与 点 (a.b) 上 的 像素 收 全 ，escapesToInfinity0 方 法 返回 false， 则 进行 光栅 绘制 
Taster.setDataElements((i, j, colorData); / 仿 类 型 TransferType 基本 数组 中 的 单个 像素 设置 数据 
} 
} 
} 
Teturn image: /返回 绘制 有 光栅 图 像 的 缓冲 图 像 对 象 
} 
(3) 在 service0 方 法 中 调用 makeRasterImage0 方 法 ， 实 现 绘制 光栅 图 像 。service0 方 法 的 具体 代码 如 下 : 
Protected void service(HttpServletRequest request, HttpServletResponse response) 
throws ServletException. IOException { 
// 蔡 止 页 面 缓存 
Tesponse.setHeader("Pragma", "No-cache'"); 
Tesponse.setHeader("Cache-Control", "No-cache"); 
Tesponse.setDateHeader("Expires", 0); 
Tesponse.setContentType("image/JPEG"); // 响 应 格式 为 JPEG 图 片 
/创建 一 个 指定 长 宽 的 图 像 
int width=340, height=230; 
BufferedImage image = new BufferedImage(width, height, BufferedImage.TZPE INT RGB): 


Graphics g = image.getGraphicsO: /获取 用 于 处 理 图 形 上 下 文 的 对 象 
g.setColor(new Color(221,221,221)); /设置 第 1 个 矩形 的 RGB 颜色 
g.fillRect(0, 0, width, height): /绘制 实心 矩形 

Graphics2D g2 = (Graphics2D)g: /转换 为 


Graphics2D 类 型 
AffineTransformOp op = new AffineTransformOp(new AffineTransform0,null) ; // 根 据 仿 射 转换 和 插值 类 型 构造 一 个 AffineTransformOp 
g2.drawImage(this.makeRasterImage(270, 230), op,50,10); 


g2.disposeO); 
gdispose0: /释放 此 图 形 的 上 下 文 以 及 它 使 用 的 所 有 系统 资源 
JmageIO.witelimage, "JPEG", response.getOutputStream()); /输出 JPEG 格式 图 片 到 页 面 
Tesponse.getOutputStream() .flush(); // 刷 新 输出 流 
Tesponse.getOutputStream().close(); /关闭 输出 流 
} 
图 秘笈 心 法 


本 实例 的 实现 要 求 有 一 定 的 数学 基础 ， 这 样 才能 真正 理解 该 程序 ， 否 则 可 以 跳 过 该 实例 。 
13.6 简单 的 验证 码 应 用 


在 实际 的 程序 开发 过 程 中 ， 对 图 像 的 操作 非常 频繁 ， 这 其 中 经 常用 到 的 就 是 验证 码 的 功能 。 无 论 是 Web 应 


用 程序 还 是 桌面 应 用 程序 ， 应 用 验证 码 都 可 以 有 效 地 控制 非法 或 暴力 程序 的 破解 ， 大 大 提高 了 安全 性 能 。 


实例 360 


图 实例 说 明 


目前 ， 比 较 常见 的 验证 都 是 由 数字 或 英文 字母 组 成 的 ， 这 样 的 验证 安全 性 相对 较 弱 ， 为 了 提高 验证 码 的 安 


全 性 ， 可 以 生成 中 文 验证 码 。 运 行 本 实例 ， 在 页 面 中 将 显示 中 文 验证 码 ， 如 果 看 不 清 图 片 中 的 验证 文字 ， 可 以 


单 寺 


Ff “看 不 清 ? 换 一 个 ” 超 链接 生成 新 的 验证 码 ， 运 行 效果 如 图 13.34 所 示 。 


图 关键 技术 


本 实例 主要 应 用 的 是 生成 随机 数 技术 和 汉字 的 编码 原理 ， 在 Java API 中 提供 了 一 个 可 以 生成 随机 数 的 类 


Random。 在 使 用 此 类 时 需要 通过 实例 化 一 个 Random 对 象 创建 一 个 随机 数 生成 器 ， 其 语法 格式 如 下 : 


Random R =new Random(): 
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13.34 ”生成 中 文 验证 码 
在 Random 类 中 提供 了 获取 各 种 类 型 随机 数 的 方法 ， 如 表 13.1 所 示 。 
[说 明 : 以 这 种 方式 实例 化 对 象 时 ，Java 编译 器 以 系统 当前 时 间作 为 随机 数 生成 器 的 种 子 ， 因 为 时 间 不 可 能 
相同 ， 所 以 产生 的 随机 数 也 将 不 同 ， 但 是 如 果 运行 速度 太 快 ， 也 会 产生 两 次 运行 结果 相同 的 随机 数 。 
表 13.1 Random 类 中 的 方法 


方法 描述 
public int nextInt 返回 一 个 随机 整数 
public int nextInt(int n 返回 一 个 大 于 等 于 0 小 于 n 的 随机 整数 
public long nextLong 返回 一 个 随机 长 整 型 值 
public Boolean nextBoolean() 返回 一 个 随机 布尔 型 值 
public float nextFloat 返回 一 个 随机 浮 点 型 值 
public double nextDouble 返回 一 个 随机 双 精 度 型 值 
public double nextGaussian0) 返回 一 个 概率 密度 为 高 斯 分 布 的 双 精 度 型 值 


例如 ， 随 机 生成 一 个 0 一 20 之 间 的 随机 整数 ， 代 码 如 下 : 
Random random = new Random0: 
R3 =random.nextInt(20); 
图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表单 及 其 相关 的 元 素 属 性 ， 并 在 验证 码 的 <img> 标 记 处 引用 
Servlet 方法 , 然后 <a/> 超 链接 中 使 用 onClick 事件 调用 自 定 义 myReloadO 函 数 来 实现 更 换 验 证 码 , 关键 代码 如 下 : 
<tr align="center”" height="1096"> 
<td width "align="center" valign="fop > 验证 码 :</td> 
<td align="1eft" ><input name="checkCode"” type="text" id="checkCode” size="8" maxlength="4"><br/> 
<img sre="ChineseCheckCode" name="chineseCheckCode" width="120" 
height="109%" border="1" id="chineseCheckCode" /> 
<a style="cursor: hand;" onClick="myReload0">&nbsp;&nbsp; 看 不 清 ? 换 一 个 </a> 
</td></t> 
<tr align="center" height="1096"> 
<td>&nbsp;</td> 
<td height="40" colspan="2" align="1eft"> 
<input name="submit1" type="submit” id="submit1"value=" 登 录 " /> 
(2) 创建 生成 验证 码 的 Servlet 实现 类 ChineseCheckCode， 此 类 继承 自 HttpServlet， 在 其 service0 方 法 中 生 
成 验证 码 。 在 生成 验证 码 的 过 程 中 ， 首 先 设置 响 应 头 信息 禁止 页 面 缓存 ， 并 指定 生成 的 响应 是 图 片 ， 关 键 代码 
如 下 : 


response.setHeader("Pragma", "No-cache"”); 
response.setHeader("Cache-Control"”. "No-cache"): 
ires". 0): 


Tesponse.setDateHeader(" 
// 指 定 生成 的 响应 是 图 片 
Tesponse.setContentType("image/jpeg"); 


入 
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(3) 首先 创建 一 个 BufferedImage 类 型 的 图 像 对 象 ， 该 对 象 创建 之 后 只 存在 于 缓冲 区 中 。 


获取 该 图 像 


对 象 的 用 于 处 理 图 像 上 下 文 的 Graphics 类 型 的 对 象 ， 用 于 在 图 像 上 进行 绘制 ， 然 后 通过 Font 设置 构造 字体 、 背 


景 等 ， 关 键 代码 如 下 : 


int width = 166; 1/ 指定 验证 码 的 宽度 

int height = 45; /指定 验证 码 的 高 度 
BufferedImage image = new BufferedImage(width, heightBufiferedImage.TZPE INT RGB): 
Graphics g = image.getGraphics0: /获取 Graphics 类 的 对 象 

Random random = new Random(): /实例 化 一 个 Random 对 象 

Font mFont = new Font(" 宋 体 ", FontJT4LTC, 26); 。”// 通 过 Font 构造 字体 

gfillRect(0, 0, width, height); 1/ 绘制 验证 码 背景 
g.setFont(mFont); /设置 字体 

String sRand ="™"; 


(4) 使 用 random0 方 法 随机 生成 由 4 个 中 文 汉字 组 成 的 验证 码 文字 ， 关 键 代 码 如 下 : 

// 输 出 随机 的 验证 码 文字 
String ctmp = ""; 
int itmp = 0; 
for (inti=0;i<4;ith) { 
/生成 汉字 
String[] rBase = { "0", "1 
/生成 第 1 位 的 区 码 
int rl =random.nextInt(3) + 11; /生成 1 一 14 之 间 的 随机 数 
String str_rl =IBase[rl]; 
/| 生成 第 2 位 的 区 码 
int 12; 
(1 =13){ 

12 = random.nextInt(7); // 生 成 0~7 之 间 的 随机 数 
}else{ 

r2 =random.nextInt(16); /生成 0 一 16 之 间 的 随机 数 


rn "3m mA", 5", "6", "7", grgn "a", "b", ren nd", ren "Pp }; 


} 
String str 12 = rBase[r2]; 
/生成 第 1 位 的 位 码 
int r3 =random.nextInt(6) + 10; // 生 成 10~16 之 间 的 随机 数 
String str_r3 = rBase[r3]; 
// 生 成 第 2 位 的 位 码 
int r4; 
if(r3—10) { 
14=random.nextInt(15) + 1; /生成 1 一 16 之 间 的 随机 数 
}elseif(r3=—=15){ 
14 =random.nextInt(15); /生成 0 一 15 之 间 的 随机 数 
}else{ 
14 =random.nextInt(16); /生成 0 一 16 之 间 的 随机 数 
} 
String str_r4 = rBase[r4]; 
// 将 生成 机 内 码 转换 为 汉字 
byte[] bytes = new byte[2]; 
/将 生成 的 区 码 保存 到 字 节 数 组 的 第 1 个 元 素 中 
String str r12 = str_rl + str_r2; 
int tempLow = Integer.parseInt(str_r12, 16); 
bytes[0] = (byte) tempLow: 
/将 生成 的 位 码 保存 到 字 节 数 组 的 第 2 个 元 素 中 
String str 134= str_ 13 + str_T4: 
int tempHigh = Integer.parseInt(str 134, 16): 
bytes[1] = (byte) tempHigh: 
ctmp = new String(bytes): /根据 字 节 数 组 生成 汉字 
sRand += ctmp: 
Color color = new Color(20 +random.nextInt(110)): 
g.setColor(color); 
g.drawString(ctmp., width/6 *+ 计 23. height/3): 
(5) 将 生成 的 验证 码 保存 在 Session 中 ， 并 输出 生成 后 的 验证 码 图 片 ， 关 键 代 码 如 下 : 
/将 生成 的 验证 码 保存 到 Session 中 
HttpSession session = request.getSession(true): 
session setAttribute("randCheckCode". sRand): 
8.disposeO: 
TImageIO.write(image. "JPEG". response.getOutputStream()): 
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图 秘笈 心 法 

本 实例 用 到 了 汉字 的 编码 原理 。 在 1980 年 为 了 使 每 一 个 汉字 有 一 个 全 国 统 一 的 代码 ,我 国 制定 了 “中 华人 
民 共 和 国 国家 标准 信息 交换 汉字 编码 ” 标准 代号 为 GB2312-80， 这 种 编码 又 称 为 国标 码 ， 在 国标 码 的 字符 集中 
共 收 录 了 一 级 汉字 3755 个 ， 二 级 汉字 3008 个 ， 图 形 符号 682 个 。 

在 国标 GB2312-80 中 规定 ， 所 有 的 国标 汉字 及 符号 分 配 在 一 个 94 行 94 列 的 方 阵 中 ， 方 阵 的 每 一 行 称 为 一 
个 “区 ”， 编 号 为 01 区 一 94 区 ， 每 一 列 称 为 一 个 “位 ”， 编 号 为 01 位 一 94 位 ， 方 阵 中 的 每 一 个 汉字 和 符号 所 
在 的 区 号 和 位 号 组 合 在 一 起 形成 的 4 个 阿拉 伯 数 字 就 是 它们 的 “区 位 码 ”。 区 位 码 的 前 两 位 是 它 的 区 号 ， 后 两 
位 是 它 的 位 号 。 用 区 位 码 就 可 以 唯一 地 确定 一 个 汉字 或 符号 ， 反 过 来 说 ， 任 何 一 个 汉字 或 符号 也 都 对 应 着 一 个 
唯一 的 区 位 码 。 例 如 ， 汉 字 “ 辉 ” 字 的 区 位 码 是 2752， 表 明 它 在 方 阵 的 27 区 52 位 。 

所 有 的 汉字 和 符号 所 在 的 区 分 为 以 下 4 个 组 : 

(1) 01 区 ~15 区 

图 形 符号 区 ， 其 中 01 区 一 09 区 为 标准 符号 区 ，10 区 一 15 区 为 自 定义 符号 区 。 

(2) 16 区 ~55 区 

-级 常用 汉字 区 ， 包 括 了 3755 个 一 级 汉字 。 这 40 个 区 中 的 汉字 是 按 汉 语 拼音 排序 的 ， 同 音字 按 笔划 顺序 
排序 。 其 中 ，55 区 的 90 位 一 94 位 未 定义 汉字 。 

(3) 56 区 ~87 区 

二 级 汉字 区 ， 包 括 了 3008 个 二 级 汉字 ， 按 部 首 排序 。 

(4) 88 区 一 94 区 

自 定义 汉字 区 。 

其 中 , 第 10 区 一 15 区 的 自 定义 符号 区 和 第 88 一 94 区 的 自 定义 汉字 区 可 由 用 户 自行 定义 国标 码 中 未 定义 的 
符号 和 汉字 。 

与 汉字 的 区 位 码 类 似 的 还 有 汉字 机 内 码 , 汉 字 的 机 内 码 是 在 汉字 的 区 位 码 的 区 码 和 位 码 上 分 别 加 上 AOH( 这 
里 的 联 表示 前 两 位 数字 为 十 六 进 制 数 ) 而 得 到 的 。 使 用 机 内 码 表示 的 一 个 汉字 占用 两 个 字 节 ， 分 别称 为 高 位 字 
节 和 低位 字 节 ， 这 两 位 字 节 的 机 内 码 按 以 下 规则 表示 。 

高 位 字 节 = 区 码 +20H+80H (或 区 码 +AOH) 

低位 字 节 = 位 码 +20H+80H (或 位 码 +A0H) 

例如 ， 汉 字 “ 啊 ”的 区 位 码 为 1601， 区 码 和 位 码 分 别 用 十 六 进 制 表示 即 为 1001H， 它 的 机 内 码 的 高 位 字 节 
为 BOH， 低 位 字 节 为 A1H， 机 内 码 就 是 BOA1H。 


力 实例 说 明 

在 设计 登录 网 页 时 设计 带 验证 码 的 用 户 登 录 模 块 是 非常 普遍 的 ， 这 个 登录 模块 是 指 除了 正常 填写 用 户 名 和 
密码 以 外 ， 必 须 还 要 填写 随机 生成 验证 码 ， 这 样 可 以 加 强 网 站 的 安全 性 。 运 行 本 实例 ， 在 用 户 登 录 页 面 中 还 可 
以 看 到 随机 生成 的 数字 验证 码 ， 运 行 结果 如 图 13.35 所 示 。 
图 关键 技术 

本 实例 主要 应 用 JavaScript 脚本 中 的 Math 类 random0) 函 数 来 生成 4 个 随机 数 ， 并 在 for 循环 中 使 用 ， 最 后 
把 随机 生成 的 数字 验证 码 赋值 给 文本 框 。Math 类 的 random0) 函 数 的 语法 格式 如 下 : 

Math random0) 


功能 : 获取 0 一 1 之 间 的 伪 随 机 数 。 


又 


区 
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13.35 ”随机 生成 数字 的 验证 码 


若 要 获取 0 一 100 之 间 的 数字 ， 可 以 将 该 数字 乖 以 100， 即 Math randomO*100; 若 要 获取 0 一 50 之 间 的 随机 
数 ， 可 以 再 与 50 进行 求 余 运算 ， 即 (Math .randomO*100)9650。 
图 设计 过 程 
(1) 创建 index.jsp 页 面 ， 在 页 面 中 添加 表单 及 相关 元 素 ， 关 键 代码 如 下 : 
<table width="420" border="0" height="300" align="center”cellpadding="0”cellspacing="0”background= "images/yzm.jpg”style="font-size:12px; 


Color:#FFFFFF; font-weight:bold"> 
<Tr height="50"><td>&nbsp;</td></Tr> 
<t> 


<td height="200"><table width="989%%" border="0" align="center" cellpadding="5" cellspacing="0"> 
<form name="forml1" method="post" > 
<tb> 
<td width="239%6" height="22" align="right" class="font_white"> 管 理 员 :</td> 
<td width="77%" height="22"><input name="txt_name" type="text" class="textbox" id="txt_name" size="18" maxlength="50"></td> 
</tr> 
<tr> 
<td height="22" align="right" class="font_white"> 密 码 :</td> 
<td height="22"><input name="txt_passwd" type="password" class="textbox" id="txt_passwd" size="19" maxlength="50"></td> 
</tr> 
<tr> 
<td height="22" align="right" class="font_white"> 验 证 码 :</td> 
<td height="22"><input name="verifycode” id-="verifycode” class="textbox” onFocus="this.select); "onMouseOver="this.style. background 
= #E1F4EE';"onMouseOut="this.style.background—#FFFFFF"" size="6" maxlength="4"> 
<input name="txt_ver" type="text" id="txt_ver" size="4" readonly="ture"><input type="button”value=" 换 一 个 "onclick="veriO:” 
></td> 
<tr> 
<u> 
<td>&nbsp;</td> 
<td height="22" colspan="2" align="left"><input name="login" type="submit" id="login" value=" 登 录 " class="button"> 
&nbsp: &nbsp:&nbsp:&nbsp: 
<input type="reset" name="Submit2" value=" 重 置 " class="button"></td> 
<ltr> 


</table> 
(2) 使 用 JavaScript 脚本 自 定义 veri0 函 数 ， 编 写实 现 随机 生成 数字 和 字母 的 验证 码 ， 关 键 代码 如 下 : 
‘<script language="javascript"> 
function veriO{ 
Var sourcenum—="0123456789"; 
Var singlenum—="™"; 


Var checknum—=""; 
Var index=0; 
forGi=O:i<8:i++){ 
index=(Math randomO*100)9620: 
singlenum=sourcenun.substring(index.index+1); 
inglenum; 
计 +; 


document form] .txt_ver.value=checknum:; 
i 
</script> 
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国 秘笈 心 法 


在 本 实例 的 自 定义 JavaScript 脚本 veri0 函 数 中 ， 先 定义 一 个 变量 sourcenum 为 产生 随机 数 的 范围 ， 然 后 使 
用 random0 方 法 产生 的 随机 数 对 20 进行 求 余 运 算 。 对 运算 完 的 数值 使 用 subString(index,index+1) 方 法 ， 是 指 返 
回 index 一 index+1l 范围 内 的 数值 。 


图 实例 说 明 

在 网 站 中 应 用 验证 码 时 ， 简 单 的 验证 码 容 易 被 机 器 人 程序 暴力 破解 。 本 实例 实现 的 是 中 文 、 英 文字 母 和 数 
字 混 合 的 验证 码 ， 这 种 验证 码 相对 来 说 安全 性 会 高 很 多 ， 在 实际 开发 中 这 种 验证 码 使 用 很 常见 ， 实 例 运 行 结果 
如 图 13.36 所 示 。 


高 级 
实用 指数 : 广 南 


Copyright OE HSROS AlFisht Recerved 


13.36” 中文、 英文 和 数字 混合 的 验证 码 


图 关键 技术 


本 实例 主要 是 在 Servlet 中 的 service0 方 法 下 , 实现 生成 汉字 与 英文 字母 验证 码 的 过 程 。 在 生成 英文 字母 时 ， 
可 以 使 用 Random 类 的 nextInt0 方 法 来 生成 随机 的 26 个 英文 字母 的 其 中 一 个 或 几 个 。 

在 生成 汉字 时 是 分 4 个 区 码 的 , 同样 需要 使 用 Random 类 的 nextInt0 方 法 随机 生成 4 个 区 码 , 然后 组 合 在 一 
起 , 最 后 应 用 byte[] 字 节 数 组 将 生成 的 内 码 转换 为 汉字 , 再 将 生成 的 区 码 分 别 保存 到 字 节 数组 的 第 一 个 元 素 和 第 
二 个 元 素 中 ， 最 后 根据 字 节 数组 生成 汉字 。 


图 设计 过 程 
(1) 创建 indexjsp 和 dealjsp 页 面 文件 ， 在 页 面 中 添加 表单 及 其 相关 的 元 素 ， 关 键 代码 如 下 : 
<t> 


<td align="center"> 验 证 码 : </td> 
<td width="1896"><input name="checkCode” type="text” id="checkCode” title=" 狗 证 厄 区 从 太 小 写 " size="8" maxlength="4"></td> 
<td width="5996" style="padding-top: dpx "><img src="CheckCode" id="createCheckCode"><a href="#" onClick="myReload0">&nbsp: 看 不 清 ? 
换 一 个 <la></td> 
<t> 
<tr valign="top> 
<td>&nbsp:<ltd> 
<td colspan="2"><input name="Submit" type="submit” value=" 登 灵 一 


作 ， 
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在 dealjsp 中 验证 登录 的 用 户 名 、 密 码 以 及 填写 验证 的 内 容 是 否 有 误 ， 关 键 代码 如 下 : 
<% 


request.setCharacterEncoding("GBK"); 
String checkCode = request.getParameter("checkCode"); 
if("".equals(checkCode) || checkCode — null) { 
outprintin("<script>alert( 请 输入 验证 码 ! ):window:location href='index.jsp';</script>"); 
}else{ 
if(!checkCode.equals(session.getAttribute("randCheckCode"))) { 
out.printin("<script>alert(' 您 输入 的 验证 码 不 正确 ! :history.back(-1):</script>"): 


} 

1 

if("".equals(request.getParameter("username")) || "".equals(request.getParameter("pwd")){ 
out.printin("<script>alert( 请 输入 用 户 名 或 密码 ! ');window.location href=index.jsp';</script>"); 

Jelse{ 
if(!("mr".equals(request.getParameter("username")) &é&: "mingri".equals(request.getParameter("pwd")) { 

out.println("<script>alert(' 您 输入 的 用 户 名 或 密码 不 正确 ! ");windowlocation href='index.jsp';</script>"); 

} 


} 
%> 


(2) 使 用 JavaScript 脚本 自 定义 函数 myReload0 来 重 载 验 证 码 的 图 片 ， 关 键 代 码 如 下 : 
function myReloadO{ 
document.getElementById("createCheckCode").src=document.getElementById("createCheckCode").srct+"?nocache="+new Date().getTime(); 

} 
</script> 


(3) 本 实例 实现 需要 通过 Servlet 来 完成 ， 建 立 在 CheckCode 类 中 的 service0 方 法 下 完成 验证 码 生 成 的 操 


首先 设置 响应 头 信息 为 JPG 图 片 和 图 片 的 大 小 及 字体 的 样式 ， 关 键 代 码 如 下 : 
Tesponse.setHeader("Pragma", "No-cache"); 

Tesponse.setHeader("Cache-Control", "No-cache"); 

Tesponse.setDateHeader("Expires", 0); 

/指定 生成 的 响应 是 图 片 

Tesponse.setContentType("image/jpeg"); 

int width = 86; 
int height = 22; 

BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE INT RGB): 
Graphics g = image.getGraphics(); 

Graphics2D g2d = (Graphics2D) g: 

Random random = new Random(); 

Font mFont = new Font(" 黑 体 ", Font.BOLD. 17); 

&.fillRect(0, 0, width, height): 


(4) 使 用 random nextInt0 方 法 随机 生成 英文 26 个 字母 和 汉字 ， 关 键 代 码 如 下 : 
/| 输出 随机 的 验证 文字 
String ctmp = ""; 
intitmp = 0; 
for (inti=0:i<4:i 计 HT 
switch (random.nextInt(4)) { 


case 1: 
itmp = random.nextInt(26) + 65; /1/ 生 成 A~Z 的 字母 
ctmp = String.valueOR (char) itmp); 
break; 
case 2: /生成 汉字 
Sitingl] Bane = { "0%, “1, 2%, 3, ”6 oo ng am, wb", we, de, en, os 
/生成 第 1 位 的 区 码 
int rl =random.nextInt(3) + 11: /1/ 生 成 11~14 之 间 的 随机 数 
String str r1 = TBase[rl]: 
/生成 第 2 位 的 区 码 
int 172; 
if (l=13){ 
12 =random.nextInt(7); // 生 成 0~7 之 间 的 随机 数 
} else { 
12 =random.nextInt(16); /生成 0~16 之 间 的 随机 数 


} 
String str 12 = ITBase[r2]:; 
/生成 第 1 位 的 位 码 
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int r3 =random.nextInt(6) + 10: /生成 10~16 之 间 的 随机 数 
String str 13 =rBase[r3]; 
/生成 第 2 位 的 位 码 
int r4; 
if63 一 10){ 
革 =randomnextInt(15)+1; ”// 生 成 1~16 之 间 的 随机 数 


14 =random nextInt(15): // 生 成 0~15 之 间 的 随机 数 
}else{ 
14 =random.nextInt(16); /| 生成 0~16 之 间 的 随机 数 
} 
str_r4 =rBase[r4]; 
/时 成 抽 机 内 红 科 换 和 汉字 
byte[] bytes = new byt 


ke[2]; 

/将 生成 的 区 码 保存 到 字 节 数组 的 第 1 个 元 素 中 

String str r12 = str r1 + str 72; 

int tempLow = NE T12. 16): 

bytes[0] = (byte) temp 

/六 生 成 的 位 取保 认 到 字 宙 数组 的 第 2 个 元 素 中 

String str r34 = str TI3 + str r4; 

int tempHigh = Integer.parseInt(str_r34, 16); 

bytes[1] = (byte) tempHigh: 

ctmp = new String(bytes); /| 根据 字 节 数组 生成 汉字 
break: 
default: 

itmp =random.nextInt(10) + 48: /生成 0 一 9 的 数字 

ctmp = String.valueON (char) itmp): 


} 
sRand 二 ; 
Color color = new Color(20); 
g.setColor(color); 


(5) 把 生成 的 验证 码 保存 到 Session 中 ， 并 输出 生成 后 的 验证 码 图 片 ， 关 键 代码 如 下 : 

HttpSession session = request.getSession(true); 

session.setAttribute("randCheckCode”, sRand); 

&.disposeO): 
图 秘笈 心 法 

本 实例 中 用 到 Graphics 和 Graphics2D 类 ，Graphics2D 类 对 Graphics 类 进行 了 扩展 ， 提 供 对 几何 形状 、 坐 标 
转换 、 颜 色 管理 和 文本 布局 等 更 为 复杂 的 控制 。 它 是 用 于 在 Java(TM) 平台 上 呈现 二 维 形状 、 文 本 和 图 像 的 基 
础 类 ， 而 Graphics 是 所 有 图 形 上 下 文 的 抽象 基 类 ， 人 允许 应 用 程序 在 组 件 ( 已 经 在 各 种 设备 上 实现 ) 以 及 闭 屏 图 
像 上 进行 绘制 ，Graphics 对 象 封装 了 Java 支持 的 基本 呈现 操作 所 需 的 状态 信息 。 


13.7 复杂 的 验证 码 应 用 


简单 的 验证 码 满足 不 了 网 站 的 安全 指标 ， 这 时 可 以 考虑 在 验证 码 上 增加 背景 颜色 或 者 带 多 个 直线 、 折 线 的 
干扰 暴力 扫描 程序 的 攻击 。 下 面 介绍 几 种 常见 的 干扰 验证 码 的 效果 。 


实例 363 


图 实例 说 明 


在 开发 网 站 中 ， 为 了 达到 统一 的 美观 效果 ， 通 常设 置 验证 码 字体 的 颜色 随机 变换 。 运 行 本 实例 ， 在 输入 验 
证 码 处 ， 可 以 看 到 验证 码 的 字体 颜色 都 是 不 一 样 的 ， 运 行 效果 如 图 13.37 所 示 。 
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13.37 ”随机 变换 颜色 的 验证 码 


图 关键 技术 


本 实例 主要 用 到 了 java.awt.Color 类 ， 其 构造 方法 的 语法 格式 如 下 : 

public Color(int rint gint b) 

参数 说 明 

上 1I: 红色 分 量 。 

@ g: 绿色 分 量 。 

目 b: 蓝 色 分 量 。 

Color 类 是 创建 具有 指定 红色 、 绿 色 和 蓝 色 值 的 不 透明 的 sRGB 颜色 ， 这 些 值 都 在 (0,-255) 的 范围 内 。 绘 制 
时 实际 使 用 的 颜色 取决 于 从 给 出 的 可 用 于 给 定 输出 设备 的 颜色 空间 中 找到 的 最 匹配 颜色 。alpha 值 的 默认 值 为 
255， 如 果 r、g、b 其 中 的 某 一 个 值 超 过 了 255， 将 会 抛 出 IlegalArgumentException 异常 。 


图 设计 过 程 
(1) 创建 ndexjsp 和 dealjsp 页 面 文件 ， 在 indexjsp 页 面 中 添加 一 个 表单 及 其 相关 的 元 素 属性 ， 并 引用 


style.css 的 样式 ， 在 “看 不 清 ? 换 一 个 ”的 <input> 标 记 中 调用 onClick 事件 并 加 载 自 定义 的 JavaScript 函数 
ImyReload0， 关 键 代 码 如 下 : 
<tr> 


<td align="center"> 验 证 码 : </td> 

<td width="1896"><input name="checkCode” type="text" id="checkCode" title=" 狗 证 码 区 人 大 小 写 " size="8" maxlength="4"></td> 

<td width="5996" style="padding-top: dpx"><img src="CheckCode" id="createCheckCode"><a href=#" onClick="myReload0">&nbsp: 看 不 清 ? 换 
一 个 </a></td> 
</tr> 


(2) 本 实例 在 生成 验证 码 的 过 程 中 ， 需 要 随机 生成 输出 内 容 的 颜色 ， 所 以 需要 编写 一 个 用 于 随机 生成 


RGB 颜色 的 方法 getRandColor()， 返 回 值 为 java.awt.Color 类 型 的 颜色 。getRandColor() 方 法 的 具体 代码 如 下 : 
public Color getRandColor(int s. int e) 
Random random = new 
f(s >255) s=255; 
if(e>255) e=255; 


intr=s +random.nextInt(e - $); /随机 生成 RGB 颜色 中 的 r 值 
int g=s +random.nextInt(e - s): /随机 生成 RGB 颜色 中 的 g 值 
int b= s +random.nextInt(e - $); /随机 生成 RGB 颜色 中 的 b 值 


Tetum new Color(r, g, b); 
} 
(3) 在 CheckCode 类 的 Servlet 中 的 service0 方 法 中 调用 getRandColor0 方 法 ， 用 于 设置 验证 码 的 字体 颜 
色 ， 关 键 代码 如 下 : 
g.setColor(getRandColor(100, 200)): 
由 于 生成 验证 码 的 CheckCode 类 的 service0 方 法 的 其 他 代码 与 前 几 个 实例 基本 类 似 ， 所 以 此 处 并 没有 具体 
给 出 ， 详 细 代码 请 参见 本 书 附 赠 的 光盘 源码 。 


图 秘笈 心 法 
本 实例 主要 在 CheckCode 的 Servlet 类 中 自 定 义 了 getRandColor(0 方 法 随机 生成 RGB 颜色, 此 方法 有 两 个 参 


541 


Java Web 开发 实例 大 全 (基础 卷 ) 
数 s 和 e 分 别 小 于 等 于 255， 使 用 random.nextInt0 方 法 分 别 随 机 生成 RGB 颜色 r、g、b 的 值 。 


力 实例 说 明 
在 用 户 登 录 时 ， 通 常会 看 到 验证 码 的 图 片 具 有 背景 颜色 ， 而 且 背 景 颜 色 也 是 随机 变化 的 。 本 实例 将 实现 这 
-功能 ， 运 行 本 实例 ， 效 果 如 图 13.38 所 示 。 


13.38 ”随机 变换 背景 颜色 的 验证 码 


图 关键 技术 
本 实例 的 实现 与 实例 363 基本 类 似 ， 首 先 获取 一 个 随机 颜色 ， 然 后 再 应 用 绘制 图 像 上 下 文 的 Graphics 类 的 
setColor( 方 法 ， 在 指定 的 验证 码 图 像 的 矩形 区 域内 填充 颜色 即 可 。 
在 图 像 上 填充 矩形 ， 主 要 使 用 Graphics 类 的 fillRect0 方 法 ， 语 法 格式 如 下 : 
fillRect(x,y;width,height) 
参数 说 明 
@ x 和 y: 表示 矩形 的 左上 角 的 x 坐标 和 y 坐标 。 
@ width 和 height: 表示 矩形 的 宽度 和 高 度 。 
图 设计 过 程 
(1) 创建 index.jsp 页 面 文件 ， 分 别 在 页 面 中 添加 表单 及 其 相关 元 素 。 在 自 定义 的 JavaScript 中 检查 验证 码 
的 文本 框 内 容 不 允许 为 空 ， 并 定义 JavaScript 自 定义 函数 myReload0， 实 现在 看 不 清 验 证 码 时 进行 刷新 ， 关 键 
代码 如 下 : 
<script language="javascript"> 
function checkformtmyform){ 
for(i=0:i<myformlength:it-Hf 
if(myform.elements[i].value—""){ 
alert(myform.elements[i].title+" 不 能 为 空 ! "); 
myform.elements[i] focusO:; 
Teturn false: 


’ 
} 


function myReloadO{ 
document.getElementById("createCheckCode").sre=document.getElementById("createCheckCode").sre+"?nocache="+new DateO.getTime(); 
} 
</script> 
<t> 
<td align="center"> 验 证 码 : </td> 
<td width="]896"><input name="checkCode" type="text" id="checkCode" title="" size="8" maxlength="4"></td> 
<td width="5996" style="padding-top:4px "><img src="CheckCode” id="createCheckCode"><a href="#”" onClick="myReload0">&nbsp: 看 不 清 ? 
换 一 个 </a></td> 
</tr> 
<tr> 
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(2) 在 Servlet 类 中 定义 getRandColor0 方 法 , 随机 生成 RGB 颜色， 并 在 service0 方 法 中 填充 指定 矩形 的 颜 


色 ， 这 个 矩形 也 就 是 最 后 生成 的 验证 码 图 像 ， 关 键 代 码 如 下 : 
g.setColor(getRandColor(200, 250)):/ 设 置 颜色 
gfilIRect(0, 0, width, heighb:// 填 充 一 个 矩形 


由 于 生成 验证 码 的 service( 方 法 的 其 他 代码 与 前 几 个 实例 基本 类 似 ， 所 以 此 处 并 没有 具体 给 出 ， 详 细 代码 
请 参见 本 书 附 赠 的 光盘 源码 。 
图 秘笈 心 法 

需要 注意 的 是 ， 设 置 颜色 的 setColor(0 方 法 必须 在 填充 矩形 的 flIRectO 方 法 之 前 调用 ， 否 则 无 法 实现 填充 颜 
色 。 这 类 似 于 画图 工具 ， 在 画图 之 前 需要 设置 画笔 的 颜色 。 


图 实例 说 明 

在 上 面 的 几 个 实例 中 ， 验 证 码 中 的 文字 都 是 正常 显示 的 ， 如 果 希 望 增加 防 破解 能 力 ， 可 以 把 汉字 或 字母 随 
机 缩放 或 将 文字 按照 指定 角度 旋转 ， 使 机 器 人 软件 不 容易 识别 。 运 行 本 实例 ， 在 加 载 页 面 后 会 看 到 在 验证 码 图 
片 中 汉字 与 字母 都 是 按 随机 旋转 角度 缩放 的 ， 如 图 13.39 所 示 。 


字 旋 转 指 定 角 度 的 验证 码 高 级 


恭候 明 目 编 程 词 典 止 市 一 一 查询 系统 
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图 13.39 ”随机 缩放 文字 并 将 文字 旋转 指定 角度 


图 关键 技术 


本 实例 主要 应 用 java.awt.geom.AffineTransform 类 ， 用 来 实现 对 图 像 缩放 或 旋转 操作 。AffineTransform 类 的 
构造 方法 的 语法 格式 如 下 : 
AffineTransform atf = new AffineTransform(); 
然后 使 用 AffineTransform 类 提供 的 相关 方法 对 图 片 进 行 缩放 或 旋转 。 其 中 ， 对 图 像 进 行 缩放 的 方法 为 
scale0， 对 图 像 进 行 旋转 的 方法 为 rotate0。 下 面 对 这 两 个 方法 进行 详细 说 明 。 
(1) public void scale(double sx,double sy) 
参数 说 明 
@ sx: 坐标 沿 X 轴 方 向 缩放 的 因子 。 
@ sy: 坐标 沿 立轴 方向 缩放 的 因子 。 
(2) public void rotate(double vecx,double vecy,double anchorx,double anchory) 
参数 说 明 
@ vecx: 旋转 向 量 的 x 坐标 。 
@ vecy: 旋转 向 量 的 y 坐标 。 
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@ anchorx: 旋转 锚 点 的 x 坐标 。 

@ anchory: 旋转 锚 点 的 y 坐标 。 

连接 此 变换 与 根据 旋转 向 量 绕 锚 点 旋转 坐标 的 变换 。 所 有 坐标 按 相 同 的 量 绕 指定 的 锚 坐 标 旋转 。 旋 转 量 使 
沿 原 义 轴 正 半 轴 的 坐标 随后 将 与 从 坐标 原点 指向 指定 向 量 坐 标的 向 量 对 齐 。 如果 vecx 和 vecy 都 是 0.0， 则 不 以 


任何 方式 修改 此 变换 。 此 方法 等 效 于 调用 : 
1otate(Math.atan2(vecy, vecx), anchorx anchory); 


图 设计 过 程 
(1) 创建 indexjsp 页 面 文件 ， 并 在 页 面 中 添加 一 个 加 载 验证 码 的 <img> 标 签 。 编 写 自 定义 的 JavaScript 函 


数 myReload0)， 实现 当 看 不 清 验 证 码 时 调用 Servlet 重新 生成 验证 码 ， 关 键 代 码 如 下 : 
ee Date|.getTime(): 
} 


<img sre="CheckCode" id="createCheckCode”><a href="#" onClick="myReloadO"> 
(2) 在 Servlet 的 service0 方 法 中 ， 应 用 AffineTransform 类 的 相关 方法 实现 对 图 片 的 缩放 和 旋转 操作 ， 关 


键 代码 如 下 : 
/随机 缩放 文字 并 将 文字 旋转 指定 角度 
/将 文字 旋转 指定 角度 
Graphics2D g2d_word = (Graphics2D) g; 
AffineTransform trans = new AffineTransform(); 
trans.rotate(random.nextInt(45) * 3.14/ 180, 15 * i+ 8, 7): 
/缩放 文字 
float scaleSize = random.nextFloat() +0.8f: 


trans.scale(scaleSize, scaleSize); 
g2d_word.setTransform(trans); 


图 秘笈 心 法 
在 AffineTransform 类 的 rotate0 方 法 中 还 有 几 个 重 载 方法 ， 其 中 有 些 方法 是 在 JDK 1.2 中 定义 的 , 具体 说 明 
请 参考 JDK API， 在 此 就 不 详细 说 明了 。 
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国 实例 说 明 


本 实例 将 介绍 如 何 生 成 带 有 干扰 线 的 验证 码 。 运 行 本 实例 ， 在 页 面 中 将 显示 带 有 干扰 线 的 验证 码 ， 用 户 只 
有 输入 正确 的 验证 码 后 ， 才 可 完成 登录 ， 运 行 效果 如 图 13.40 所 示 。 


开心 明日 农场 = 登 永 


Mg rs 
BD: eeeeeeoveee 
ES: rr 


EE 


13.40 ”随机 生成 带 有 干扰 线 的 验证 码 
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图 关键 技术 


本 实例 在 生成 验证 码 时 ， 随 机 绘制 一 条 具有 4 个 端点 的 折线 效果 ， 首 先 定义 一 个 端点 个 数 的 变量 ， 然 后 分 
别 定义 保存 和 轴 坐 标的 数组 和 了 轴 坐 标的 数组 ,通过 for 循环 为 X 轴 坐标 和 YY 轴 坐 标的 数组 赋值 ,使 用 Random 
类 的 nextInt0 方 法 随机 生成 坐标 和 随机 位 置 。 

应 用 Graphics 类 中 的 drawPolyline0 方 法 ， 可 以 绘制 干扰 线 ， 该 方法 将 使 用 当前 颜色 绘制 一 系列 相互 连接 的 
线段 ，drawPolyline0 方 法 的 语法 格式 如 下 : 

public abstract void drawPolyline(int[JxPoints,int[]yPoints,int npoints) 

参数 说 明 

@ xPoints: 用 于 指定 线段 端点 的 义 轴 坐标 。 

@ yPoints: 用 于 指定 线段 端点 的 Y 轴 坐 标 。 

@ nPoints: 用 于 指定 线段 端点 的 个 数 。 
图 设计 过 程 

(1) 编写 一 个 名 称 为 LineCheckCode 的 Servlet， 并 保存 在 com.zm.servlet 包 中 ， 该 类 继承 了 HttpServlet。 
主要 在 service0 方 法 中 生成 验证 码 ， 首 先 设置 响应 头 信息 禁止 页 面 缓 存 ， 并 指定 生成 的 响应 是 JPG 图 片 ， 关 键 
NEE Tp "No-cache"); 1/ 禁止 缓存 


Tesponse.setHeader("Cache-Control", "No-cache"); 
response.setDateHeader("Expires", 0); 


Tesponse.setContentType("image/jpeg"); /指定 生成 的 响应 是 图 片 

(2) 创建 用 于 随机 生成 验证 码 的 绘图 类 对 象 ， 并 绘制 一 个 填充 矩形 作为 验证 码 的 背景 ， 关 键 代 码 如 下 : 
int width = 116; /指定 验证 码 的 宽度 
int height = 33; /指定 验证 码 的 高 度 
BufferedImage image = new BufferedImage(width, height.BufferedImage.TYPE INT RGB): 
Graphics g = image.getGraphics(); // 获 取 Graphics 类 的 对 象 
Random random = new Random(); // 实 例 化 一 个 Random 对 象 
Font mFont = new Font(" 宋 体 ", Font.BOLD, 22); // 通 过 Font 构造 字体 
g.fillRect(0, 0, width, height); /绘制 验证 码 背 景 
&.setFont(mFont): /设置 字体 
g.setColor(getRandColor(180. 200)): /设置 颜色 

(3) 使 用 Graphics 类 的 drawLine() 方 法 绘制 折线 ， 关 键 代 码 如 下 : 
/ 画 随 机 的 线条 


for (inti=0;i<100;iH) { 
int x = random.nextInt(width - 1); 
int y =random.nextInt(height - 1); 
int xl = random.nextInt(3) + 1: 
int yl =random.nextInt(6) + 1: 


g.drawLine(x, y, x+ x1, y+ yl); /绘制 直线 

BasicStroke bs=new BasicStroke(2fBasicStroke.C4P BUTT.BasicStroke_JOIN_BEFED); 

Graphics2D g2d = (Graphics2D) g: // 通 过 Graphics 类 的 对 象 创建 一 个 Graphics2D 类 的 对 象 
g2d.setStroke(bs); /改变 线条 的 粗细 

g.setColor(Color.GRAY): /设置 当前 颜色 为 预定 义 颜色 中 的 灰色 

int lineNumber=4; /指定 端点 的 个 数 

int[] xPoints=new int[lineNumber]: /定义 保存 和 X 轴 坐标 的 数组 

int[] yPoints=new int[lineNumber]: /定义 保存 立轴 坐标 的 数组 

// 通 过 循环 为 X 轴 坐标 和 YY 轴 华 标的 数组 赋值 

for(int j=0:j<lineNumberij++){ 


xPoints[j=random.nextInt(width - 1); 
yPoints[j]j=random.nextInt(height - 1); 

} /给 制 折线 
g.drawPolyline(xPoints, yPoints,lineNumiber); 

(4) 随机 生成 由 4 个 英文 字母 组 成 的 验证 码 文 字 ， 并 对 文字 进行 缩放 与 旋转 ， 关 键 代码 如 下 : 
String sRand 
// 输 出 随机 的 验证 文字 
for (inti=0;i<4:iHHD) { 

char ctmp = (char)(random.nextInt(26) + 65): ”// 生 成 A~Z 的 字母 


545 
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sRand += ctmp: 
Color color = new Color(20 + random nextInt(110), 20 + random 
nextInt(110), 20 +random.nextInt(110)); 


&.setColor(color); 
/4* 4# 随 机 缩放 文字 并 将 文字 旋转 指定 角度 * */ 
/将 文字 旋转 指定 角度 
Graphics2D g2d_word = (Graphics2D) g: 
AffineTransform trans = new AffineTransform(); 
trans.rotate(random.nextInt(45) * 3.14/ 180, 22 * i+ 8, 7):; 
/| 缩放 文字 
float scaleSize = random.nextFloat() +0.8f: 
证 (scaleSize > 11) 

scaleSize = 1f; 
trans.scale(scaleSize, scaleSize); /进行 缩放 


/设置 颜色 


trans); 
和 
g.drawString(String.valueOf ctmp), width/6 * i+23, height/2): 
图 秘笈 心 法 
本 实例 使 用 BasicStroke 类 创建 一 个 供 画笔 选择 线条 粗细 的 对 象 ， 语 法 格式 如 下 : 
public BasicStroke(floast widthint cap intjoin) 
参数 说 明 
@ width: BasicStroke 的 宽度 。 
@ cap: BasicStroke 端点 的 装饰 。 
@@ join: 应 用 在 路 径 线段 交汇 处 的 装饰 。 


高 级 
实用 指数 : 让 全 
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图 实例 说 明 


在 增加 验证 码 辨 别 难度 时 ， 还 可 以 生成 多 条 干扰 线 组 合成 的 验 
证 码 。 运 行 本 实例 ， 将 在 页 面 中 显示 出 带 有 多 条 干扰 线 的 验证 码 ， = 
只 有 用 户 输入 正确 的 验证 码 后 才 可 完成 登录 。 如 果 随机 生成 的 验证 
码 不 容易 识别 ， 可 以 单 击 “ “ 换 一 个 ” 超 链 接生 成 新 的 验证 码 ， 运 行 2 
效果 如 图 13.41 所 示 。 加 加 


图 关键 技术 图 13.41 随机 生成 多 条 直线 的 干扰 线 


绘制 直线 , 主要 应 用 的 是 Graphics 类 的 drawLine0 方 法 , 该 方法 用 于 使 用 当前 颜色 绘制 一 条 直线 。 drawLine() 
方法 的 语法 格式 如 下 : 


public abstract void drawLine(int xl.intyl.int x2.int y2) 
参数 说 明 

@ x1: 用 于 指定 直线 起 点 的 义 轴 坐标 。 
@ yl1: 用 于 指定 直线 起 点 的 立轴 坐标 。 
目 x2: 用 于 指定 直线 起 点 的 六 轴 坐标 。 
@ y2: 用 于 指定 直线 起 点 的 立轴 坐标 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 表单 及 其 相关 元 素 ， 关 键 代码 如 下 : 
<t> 


<td align="center > 验证 码 : </td> 


ppke 


执 - 个 
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<td style="padding-top:4px "><input name="checkCode” type="text” width="33”height="116” id="checkCode” title=" 肤 证 说 太 从 大 小 每 " 
size="8"” maxlength="4 "> 
<img ste="LineCheckCode" id="createCheckCode" > 
<a href=#” onclick="myReload0:;"> 换 一 个 <Ja></td> 
</tr> 
(2) 编写 一 个 名 为 LineCheckCode 的 Servlet 类 ， 主 要 是 通过 service0 方 法 来 实现 生成 验证 码 。 在 service() 
方法 中 ， 通 过 循环 在 验证 码 图 像 上 随机 的 两 个 坐标 点 之 间 画 100 条 干扰 线 ， 关 键 代码 如 下 : 


for (inti=0; i<100: +) { 


intxl= a 

int yl1 = random.nextInt 

g.drawLine(x, y, x + x1, 0 /绘制 直线 的 方法 
} 


国 秘笈 心 法 
由 于 在 应 用 drawLine( 方 法 画 直线 时 ， 每 条 线 的 两 个 端点 的 坐标 是 随机 产生 的 ， 所 以 最 后 显示 在 验证 码 图 
片上 的 线段 也 是 随机 的 ， 这 样 就 实现 了 干扰 线 的 效果 。 如 果 和 希望 画 更 多 的 干扰 线 ， 只 要 修改 循环 次 数 即 可 。 


实例 368 
* 实用 指数 ， 朗 友 


图 实例 说 明 

关键 字 验 证 码 是 指 在 验证 码 显示 框 中 , 不 再 只 是 显示 验证 码 文字 ,而 是 由 具有 指定 意义 的 一 组 字符 串 组 成 ， 
对 于 验证 码 关 键 字 采 用 特殊 颜色 进行 标识 ， 用 户 只 要 按 顺 序 输入 指定 颜色 的 字符 ， 即 可 正确 输入 验证 码 。 这 种 
验证 码 的 安全 性 比较 高 ， 对 于 一 些 涉及 财务 的 网 站 比较 实用 ， 实 例 运行 结果 如 图 13.42 所 示 。 


验证 机: 


7 46:944148 


请 输入 上 而 李 共 太 和 [ 芭 色 ] 的 大 号 文字 ! 


看 不 村 和 一 个 


EE3 FE 


图 13.42 ”生成 关键 字 验 证 码 


图 关键 技术 

实现 本 实例 时 ， 首 先 使 用 Graphics 类 的 drawLine() 方 法 绘制 了 150 条 浅 灰色 的 随机 直线 显示 在 验证 码 中 ， 
然后 在 获取 4 个 要 突出 显示 的 验证 码 关键 字 时 , 需要 记录 关键 字 的 位 置 变量 和 获取 字符 串 的 长 度 , 并 使 用 while0 
循环 语句 来 显示 关键 字 在 验证 码 中 的 位 置 。 
< 全 注意 : 为 了 保证 生成 的 验证 码 关键 字 为 4 个 ， 此 处 不 能 使 用 for 循环 语句 ， 因 为 在 随机 获取 要 突出 显示 的 文 

字 位 置 时 ， 可 能 会 产生 相同 的 值 ， 这 样 最 后 生成 的 验证 码 关键 字 就 不 是 4 个 了 。 
图 设计 过 程 
(1) 编写 一 个 名 称 为 KeywordCheckcode 的 Servlet 类 ， 在 service0 方 法 中 设置 响应 头 信息 并 指定 响应 是 

JPG 图 片 ， 然 后 创建 用 于 生成 验证 码 的 绘图 类 对 象 ， 并 绘制 一 个 填 色 和 矩形 作为 验证 码 的 背景 ， 关 键 代码 如 下 : 


response.setHeader("Pragma", "No-cache"): 
Tesponse setHeader("Cache-Control". "No-cache"); 


Tesponse.setDateHeader("Expires", 0): 

// 指 定 生成 的 响应 是 图 片 

Tesponse.setContentType(“image/ipeg"); 

int width = 270; /设置 验证 码 的 宽度 
int height = 50: /设置 验证 码 的 高 度 
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Bufferedimage image =new Bufferedimage(width. height. BufferedImage. TYPE INT_ RGB): 


Graphics g = image.getGraphicsO: // 著 取 Graphics 类 的 对 象 
Random random = new Random(); /实例 化 一 个 Random 对 象 
gillRect(0. 0, width, heighb: /绘制 验证 码 背 景 
g.setColor(new Color(O0xCCCCCC)): /设置 颜色 

(2) 随机 绘制 150 条 浅 灰色 的 随机 直线 ， 关 键 代 码 如 下 : 
// 画 随机 的 线条 


for (inti=0;i<150;it+) { 
int x = random.nextInt(width - 1); 
int y =random.nextInt(height - 1); 
int x1 =random nextInt(3) + 1; 
int y1 = random.nextInt(6) + 1; 
g.drawLine(x, y, x + x1, y+y1); /绘制 直线 
} 


(3) 获取 生成 验证 码 的 字符 串 和 获取 4 个 要 突出 显示 的 验证 关键 字 在 验证 码 字 符 串 的 位 置 ， 组 成 由 逗号 〈， 
分 隔 的 字符 串 ， 关 键 代码 如 下 : 


String str=request.getParameter("number"); // 获 取 生 成 验证 码 的 字符 串 
String sRand =""; 

String randomPosition=","; // 记 录 关 键 字 位 置 的 变量 

int strLength=str lengthO); // 获 取 字 符 串 的 长 度 

int 1=0; 

int i=0; 

while(i<4){ /注意 此 处 不 能 使 用 for 循环 语句 


I=random.nextInt(strLength-1); 
if(randomPosition.indexOf(","+r+",")—-1){ 
TandomPosition+=String.valueOAT)+","; 
itt; 
} 
(4) 使 用 Color 类 编写 生成 随机 的 关键 字 颜色 ， 并 通过 for 循环 输出 全 部 验证 码 文字 ， 普 通 文字 为 固定 的 
深 色 ， 验 证 码 关 键 颜色 为 指定 的 随机 颜色 ， 关 键 代码 如 下 


String colorValue=""; 
Color color=Color.RED:; 
switch (random.nextInt(3)){ 
case 0: 
colorValue=" 红 色 "; 
color=Color. RED; 
break: 
case 1: 
colorValue=" 黑 色 "; 
Color=Color. BLACK;: 
break: 
Case 2: 
colorValue=" 蓝 色 "; 
color=Color. BLUE: 
break: 
} 
for (intj =0;j < strLength; j++) { 
if(randomPosition.indexOf("."+String.valueOf)+",")—-D{ 
g.setFont(new Font(" 宋 体 ", Font.BOLD, 22)); 
g.setColor(new Color(0x009900)): /设置 颜色 为 深 绿色 
Jelse{ 
gsetFont(new Font(" 宋 体 ", Font.BOLD. 24)); 
gsetColor(colon); 
sRand+—str.substring(jj+1): 
} 
g.drawString(str.substring(jj+1). width/(strLength) * j+3, 20): 


} 
(5) 输出 提示 性 文字 ， 说 明 关键 字 的 颜色 ， 关 键 代码 如 下 : 
/输出 提示 性 文字 
gsetFont(new Font(" 宋 体 ", FontPL4IN 13)): 
&.setColor(new Color(0x009900)); 


g.drawString(" 请 输入 上 面 字符 串 中 ["+colorValue+"] 的 大 号 文字 ! ". 3, 40): 


S48 
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(6) 最 后 创建 index.jsp 首页 文件 ， 并 在 合适 位 置 添加 表单 及 其 相关 表单 元 素 ， 并 在 页 面 中 添加 一 个 调用 
ImyReload(O) 函 数 的 超 链接 来 实现 重新 生成 验证 码 的 功能 ， 关 键 代 码 如 下 : 
3 <td width="1396" height="64" align="center">&nbsp:</td> 
<td width="5496" align="left"> 
<img ste="KeywordCheckCode?number=$ {number}" name="keywordCheckCode" width="270" height="50" border="] "id="keywordCheckCode"/> 
<td> 
<td width="3396" align="1eft"><a style="cursor:hand;"onClick="myReload0"> 看 不 清 ? 换 一 个 </a></td> 
<t> 


图 秘笈 心 法 
本 实例 主要 应 用 其 indexOf0 方 法 获取 字符 串 的 索引 位 置 ，indexOf0 方 法 的 语法 格式 如 下 : 
Public int indexOf(Sting str) 
其 中 ， 参 数 str 为 任意 字符 串 ， 用 于 指定 要 搜索 的 子 字符 串 。 
[加 说 明 ; indexOf0 方 法 用 于 返回 指定 子 字符 囊 在 此 字符 囊 中 第 一 次 出 现 的 索引 位 置 ， 如 果 未 发 现 该 字符 囊 ， 
则 返回 -1。 


图 实例 说 明 

相对 于 英文 、 中 文 、 数 字 混 合 的 彩色 验证 码 来 说 ， 利 用 Ajax 实现 的 验证 码 更 加 安全 。 这 种 验证 码 不 是 在 页 
面 加 载 后 生成 ， 而 是 当 用 户 单 击 验证 码 输 入 框 时 才 生成 并 显示 ， 这 样 就 能 有 效 地 防止 恶意 用 户 采 用 注册 机 类 的 
暴力 程序 对 网 站 进行 攻击 或 灌水 。 实 例 运 行 结果 如 图 13.43 所 示 ， 在 该 页 面 中 输入 留言 人 和 留言 内 容 后 ， 单 击 
“验证 码 ”文本 框 ， 将 在 其 上 方 生成 并 显示 验证 码 ， 用 户 输入 验证 码 并 将 光标 移出 文本 框 时 ， 系 统 将 自动 验证 
输入 的 验证 码 是 否 正确 ， 并 给 出 提示 信息 。 


过 于 提 示 ， 单 而 驻 证 到 答 入 框 ， 获 台 圭 证 档 ! 验证 到 区 分 大 小写 
ES 


13.43 ”Ajax 实现 无 刷新 的 验证 码 


图 关键 技术 


实现 本 实例 ， 首 先 在 Servlet 中 随机 生成 一 个 验证 码 图 片 ， 因 为 验证 码 图 片 开 始 时 未 显示 在 页 面 中 ， 它 是 由 
鼠标 的 光标 移动 到 验证 码 文本 框 内 才 会 在 上 方 显示 ， 所 以 在 页 面 中 插入 验证 码 显示 框 时 ， 需 要 添加 style 属性 的 
display 属性 并 设置 为 none， 用 于 指定 该 <div> 标 记 默 认为 不 显示 。 

关于 Ajax 技术 读者 可 以 参见 本 书 第 10 章 的 说 明 ， 在 此 不 再 详细 介绍 。 


图 设计 过 程 
(1) 编写 一 个 名 称 为 CheckCode.java 的 Servlet 类 ， 在 service0 方 法 中 实现 生成 验证 码 。 首 先 在 serviceO 


方法 中 绘制 一 条 干扰 折线 ， 颜 色 设置 为 深 灰色 且 位 置 随机 产生 ， 关 键 代 码 如 下 : 
/创建 一 个 供 画 笔 选 择 线条 粗细 的 对 象 
BasicStroke bs=new BasicStroke(2f.BasicStroke.CAP_BUTT.BasicStroke .JOIN. BEVEL): 
g2d.setStroke(bs); /改变 线条 的 粗细 
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gsetColor(Color. DARK_ GRAY): /设置 当 前 颜色 为 预定 义 颜色 中 的 深 灰 色 
int[] xPoints=new int[3]; 
int[] yPoints=new int[3]: 
forlint j=0j<3jH){ 
xPoints[j]-random.nextInt(width - 1); 
yPoints[i]-random .nextInt(height - 1); 
} 


(2) 随机 生成 4 个 英文 和 数字 混合 的 验证 码 文字 ， 并 对 文字 进行 随机 缩放 并 旋转 ， 关 键 代 码 如 下 : 
.setFont(mFont):; 
ee 
int itmp=0; 
for(int i=0;i<4;iH){ 
if(random.nextInt(2)—D){ 
itmp=random.nextInt(26)+65; // 生 成 A~Z 的 字母 
jelsef 
itmp=random.nextInt(10)+48; /生成 0 一 9 的 数字 


} 
char ctmp=(chan)itmp; 
sRand+=String.valueOf ctmp); 
Color color=new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110)); 
&.setColor(color); 
/+*#*# 随 机 缩放 文字 并 将 文字 旋转 指定 角度 **/ 
/将 文字 旋转 指定 角度 
Graphics2D g2d_word=(Graphics2D)g: 
AffineTransform trans=new AffineTransform(); 
trans.rotate(random.nextInt(45)*3.14/180,15*i+10,7); 
1/ 缩放 文字 
float scaleSize=random.nextFloat0+0.8E 
这 scaleSize>1.19 scaleSize=1f: 
trans.scale(scaleSize, scaleSize); 
g2d_word.setTransform(trans); 
g.drawString(String.valueOf ctmp).30*i+40,16); 
} 


(3) 创建 index.jsp 首页 文件 ， 在 页 面 中 插入 验证 码 显示 框 ， 在 适当 位 置 添加 一 个 <div> 标 记 ， 将 其 style 属 
性 的 子 属性 position 设置 为 absolute， 用 于 确定 要 显示 的 验证 码 的 位 置 ， 关 键 代码 如 下 : 


<div style="position:absolute”> 
<div id="showCheckCode” style="display:none; padding: 3px" align="center" > 
<img src="images/checkCodePicturejpg" id="createCheckCode”" width="200" height="60"> 
<a href="#" style="color:#EEEEEE”" onClick="getCheckCodel(showCheckCode.checkCode)"> 看 不 清 ? 换 一 个 </a> 
</div> 
<input name="checkCode" type="text” id="checkCode" size="6" value="" title=" 沉 协 冉 证 玛 盘 入 旋 ， 菊 台 唆 证 到 " 
‘onClick="getCheckCodeFun(showCheckCode.checkCode):" onBlur="checkCheckCode(this.value)"> 
<div> 


(4) 通过 Ajax 调用 生成 彩色 验证 码 的 Servlet 生成 验证 码 ， 创 建 一 个 单独 的 JavaScript 文件 ， 名 称 为 
AjaxRequestjs， 并 在 该 文件 中 编写 重 构 Ajax 所 需 的 代码 ， 关 键 代码 如 下 : 


Var net=new ObjectO; 
/编写 构造 函数 
net.AjaxRequest=function(urLonload.onerrormethod.params){ 
this.req=null; 
this.onload=onload; 
this.onerror=(onerror) ? onerror : this.defaultError: 
this.loadDate(url,method,params); 


} 
/编写 用 于 初始 化 XMLHttpRequest 对 象 并 指定 处 理 函 数 ， 最 后 发 送 HTTP 请 求 的 方法 
net.AjaxRequest.prototype.loadDate=function(url.method.params){ 
证 (imethod){ 
method="GET™"; 
if(windowXMLHttpRequest) { 
this.req=new XMLHttpRequestO: 
} else if (window.ActiveXObject){ 
this.req=new ActiveXObject("Microsoft XMLHTTP"): 
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thisreq.onreadystatechange=functionO{ 
net.AjaxRequest.onReadyState.call(loader); 
} 
this.req.open(method.url,true); 
if(method—"POST"){ 
thisreq.setRequestHeader("Content-Type"."application/x-www-form-urlencoded"); 


this.req.send(params); 
jcatch (er){ 

this.onerror.call(this); 
} 


} 
// 重 构 回 调 函 数 
net AjaxRequestonReadyState=fonctionO{ 
Var req=this.req; 
Var ready=req.readyState; 
这 (ready 一 4){ 
if (req.status—200 ){ 
this.onload.call(this); 
Jelse{ 
this.onerror.call(this); 
} 
} 
net.AjaxRequest.prototype.defaultError=functionO{ 
alert(" 错 误 数据 mn 回调 状态 :"+this.req readyState+"m 状态 : "+this.req.status); 
} 
(5) 编写 请 求 处 理 页 面 文件 getCheckCode.jsp， 在 该 文件 中 将 调用 生成 彩色 验证 码 的 Servlet 生成 验证 码 ， 
getCheckCodejsp 文件 的 关键 代码 如 下 : 
<%(@ page contentType="text/html; charset=-GBK" language="java" import="java.util.Random"%%> 
<%Random random = new Random();%> 
<img src="<% out.printin("CheckCode"):9>" id="createCheckCode" width="200" height="60"> 
<a href="#" style="color:#EEEEEE" onclick="getCheckCodel(showCheckCode.checkCode)"> 看 不 清 ? 换 一 个 </a> 
(6) 在 index:jsp 页 面 中 编写 实例 化 Ajax 对 象 的 方法 和 回调 函数 ， 关 键 代 码 如 下 : 
function getCheckCodel(showCheckCode,checkCode){ 


Var loaderl=new net.AjaxRequest("getCheckCode.jsp?nocache="+new Date().getTime(),deal_getCheckCode,onerror,"GET"); 
showCheckCode.style.display="; 
checkCode.focus(); 


} 

function deal_getCheckCodeO{ 
‘document.getElementById("showCheckCode”).innerHTML=this.req.responseText; 

} 


(7) 在 indexjsp 页 面 中 编写 自 定义 的 JavaScript 函数 ， 用 于 根据 实际 情况 生成 并 显示 验证 码 ， 关 键 代码 
如 下 : 
/生成 并 显示 验证 码 


function getCheckCodeFun(showCheckCode.checkCode){ 
showCheckCode.style.display="; 


fdocument.getElementById("resultMessage").innerHTMIL 一 " 温 声 提示 : 单 击 验证 码 输入 框 ， 获 取 验 证 码 ! 验证 码 区 分 大 小 写 "){ 
getCheckCodel(showCheckCode.checkCode): // 生 成 验证 码 
i 
} 
在 页 面 的 合适 位 置 添加 验证 码 输入 框 ， 在 该 文本 框 的 onClick 事件 中 调用 自 定义 JavaScript 函数 
getCheckCodeFun0， 关 键 代 码 如 下 : 
<input name="checkCode" type="text" id="checkCode" size="6" value="" title=" 单 击 验证 码 输 入 框 ， 获 取 验 证 码 " 
onClick="getCheckCodeFun(showCheckCode.checkCode):" > 
(8) 由 于 采用 了 Ajax 技术 ， 所 以 可 以 很 方便 地 实现 无 刷新 检测 验证 是 否 正确 ， 首 先 编写 检测 验证 码 是 否 
正确 时 ， 应 用 实例 化 Ajax 对 象 的 方法 和 回调 函数 ， 关 键 代码 如 下 : 
function deal_checkCheckCodeO{ 
var h=this req.responseText; 
h=h.replace(N\s/g.""): // 去 除 字符 串 中 的 Unicode 空白 符 
这 h 一 1){ 
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document.getElementById("resultMessage") removeChild(document.getElementById("resultMessage").childNodes[O]): 
document.getElementById("resultMessage").appendChild(document.createTextNode(" ")): 
document.getElementById("messageImg").src="images/dui2.gif"; 
document.getElementById("resultMessage") removeChild(document.getElementById("resultMessage").childNodes[0]); 
document.getElementById("resultMessage").appendChild(document.createTextNode(" 巷 喜 您 ， 验 证 码 正确 ! ")); 
document.getElementById("btn_Submit").disabled=false; 

jelsef 
document.getElementById("messageImg").src="images/cuo?2.gif"; 
document.getElementById("resultMessage").removeChild(document.getElementById("resultMessage").childNodes[O]); 
document.getElementById("resultMessage").appendChild(document.createTextNode(" 您 输入 的 验证 码 不 正确 ! ")); 

} 

} 

</script> 

(9) 创建 checkCheckCode.jsp 页 ,验证 输入 的 验证 码 是 否 正确 , 在 该 文件 中 将 用 户 输入 的 验证 码 与 Session 


中 的 验证 码 进 行 比较 ， 如 果 相 等 则 输出 1， 表 示 验 证 码 正确 ， 否 则 输出 0， 表 示 验 证 码 不 正确 ， 关 键 代码 如 下 : 
<“%@ page contentType="text/html; charset=GBK" language="java" %> 
Re inCheckCode=request.getParameter("inCheckCode"); 
if(session.getAttribute("randCheckCode").equals(inCheckCode)){ 
‘out.println("1"); 


图 秘笈 心 法 

本 实例 应 用 Ajax 实现 无 刷新 的 彩色 验证 码 后 ,在 正 浏 览 器 中 测试 ,运行 一 切 正常 ,但 是 把 该 实例 放 在 Firefox 
浏览 器 中 ， 单 击 “看 不 清 ? 换 一 个 ” 超 链接 后 ， 出 现 了 验证 码 不 改变 的 情况 。 这 是 因为 在 Firefox 浏览 器 中 缓存 
了 验证 码 图 片 ， 这 时 可 以 在 请 求 处 理 页 面 getCheckCodejsp 中 , 将 图 片 的 sre 属性 通过 JSP 代码 动态 传递 一 个 参 
数 ， 参 数值 为 随机 数 即 可 。 


修改 后 的 getCheckCode.jsp 文件 的 代码 如 下 : 

<%(@ page contentType="text/html; a language="java” import="java.utiL. Random"%%> 

<%Random random =new 

<img src="<% out.printin(™" ‘+random.nextInt(10000)):%>" id="createCheckCode" width="200" height="60"> 
<a href="#" style="color:#EEEEEE" onclick="getCheckCodel(showCheckCode,checkCode)"> 看 不 清 ? 换 一 个 </a> 


高 级 
实用 指数 : 银 良 


实例 370 


图 实例 说 明 

为 了 提高 网 站 的 安全 性 ， 生 成 带 有 背景 和 雪花 的 验证 码 可 以 大 大 提高 验证 码 的 识别 难度 ， 从 而 有 效 阻止 不 
法 分 子 通 过 注册 机 类 的 程序 对 网 站 进行 攻击 。 本 实例 将 介绍 如 何 实现 生成 带 有 雪花 的 验证 码 。 运 行 本 实例 ， 在 
页 面 中 将 显示 雪花 的 验证 码 ， 用 户 只 有 输入 正确 的 验证 码 后 ， 才 可 完成 注册 ， 运 行 结果 如 图 13.44 所 示 。 


验证 码 : C 0 地 看 不 青 痪 一 人 


注册 用 户 
13.44 ” 带 雪花 的 验证 码 


图 关键 技术 
现 本 实例 ， 首 先 在 Servlet 中 定义 一 个 用 于 存储 雪花 数量 的 变量 snowNumber， 然 后 编写 一 个 随机 变换 颜 
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色 的 方法 ， 用 来 重新 设置 雪花 的 颜色 ， 使 用 for0 语 句 来 循环 snowNumber 变量 ， 然 后 创建 Graphics2D 类 的 对 象 
和 AffineTransform 类 的 对 象 ， 用 于 对 生成 的 雪花 进行 旋转 ， 代 码 如 下 : 


trans rotate(random.nextInt(45) + 3.14 / 180, random.nextInt(width / 2). 7) 


另外 ， 使 用 “*” 号 来 代 蔡 雪 花 图 案 ， 只 要 随机 设置 “*” 号 的 宽度 和 高 度 即 可 。 
图 设计 过 程 

(1) 编写 一 个 名 称 为 SnowCheckCode 的 Servlet 类 ， 在 service0 方 法 中 生成 验证 码 。 在 SnowCheckCode 类 
中 定义 一 个 全 局 变量 ， 用 于 指定 默认 的 雪花 个 数 ， 关 键 代码 如 下 : 

Pprotected int snowNumber=20; /指定 雪花 个 数 

(2) 创建 用 于 生成 验证 码 的 绘图 类 对 象 和 指定 个 数 的 雪花 ， 颜色 为 白色 ,位 置 随机 产生 ， 并 且 对 雪花 进行 
随机 缩放 和 旋转 ， 关 键 代码 如 下 : 


int width = 166: /验证 码 图 片 的 宽度 

int height = 45; /验证 码 图 片 的 高 度 
BufferedImage image = new BufferedImage(width, height,BufferedImage.TYPE INT RGB): 
Graphics g = image.getGraphics(); /获取 Graphics 类 的 对 象 
PA 

Random random = new Random(); // 实 例 化 一 个 Random 对 象 


g.setColor(getRandColor(200, 250)): 
gfillRect(0, 0, width, height): 


g.setFont(new Font(" 宋 体 ", Font.PLAIN. 16)); /设置 字体 
g.setColor(new Color(255, 255, 255)); // 设 置 雪花 的 颜色 
/ 画 随 机 的 雪花 


for (inti= 0; i< snowNumber; it+) { 
/++* ** 随 机 缩放 雪花 并 将 其 旋转 指定 角度 + */ 
// 将 雪花 旋转 指定 角度 
Graphics2D g2d = (Graphics2D) g; // 通 过 Graphics 类 的 对 象 创建 一 个 Graphics2D 类 的 对 象 
AffineTransform trans = new AffineTransform0; /创建 AffineTransform 类 的 对 象 
trans.rotate(random.nextInt(45) * 3.14 / 180, random nextInt(width / 2), 7);// 进 行 旋转 
float scaleSize = random.nextFloatO| + 0.5f: 
trans.scale(scaleSize, scaleSize); /进行 缩放 
g2d.setTransform(trans); 
/中 审理 中 / 
g.drawString("*", random.nextInt(width), random.nextInt(height / 2)); 


生成 4 个 英文 和 数字 混合 的 验证 码 文字 ， 并 对 文字 进行 随机 缩放 和 旋转 ， 关 键 代码 如 下 : 


Font mFont =new w Font(" 宋 体 "， Font.ITALIC. 26): /1/ 通 过 Font 构造 字体 


g.setFont(mFont); /设置 字体 
g.setColor(new Color(0. 0. 0)): /设置 颜色 为 黑色 
/输出 随机 的 验证 码 文字 

int itmp = 0; 


for (inti=0;i<4;iH) { 
if (random.nextInt(2) — 1) { 
itmp = random.nextInt(26) + 65; // 生 成 A~Z 的 字母 
}else{ 
itmp =random.nextInt(10) + 48; /生成 0~9 的 数字 
} 
char ctmp = (char) itmp: 
sRand += String.valueOftctmp) 
en 了 机 纺 训 这 字 产 竺 这 学峰 转 指定 角度 +/ 
// 将 文字 旋转 指定 角度 
Graphics2D g2d_word = (Graphics2D) g: 
AffineTransform trans = new AffineTransform(); 
/| 缩放 文字 
float scaleSize = random.nextFloatO| + 0.5£: 
if (scaleSize < 0.8 || scaleSize > 1.1f) { 
scaleSize = 1f: 
} 
trans.scale(scaleSize. scaleSize): 
g2d_word.setTransform(trans): 
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和 
gdrawString(String valueOf ctmp). width / 6* i+ 23. random.nextInt(height / 2) + 20); 
} 


图 秘笈 心 法 
对 雪花 的 width 和 height 随机 变换 大 小 用 到 了 drawString0 方 法 ， 其 语法 格式 如 下 : 
public abstact void drawSting(String strint xint y) 
参数 说 明 
@ str: 是 需要 绘制 的 String 字符 串 。 
@ x: x 坐标 。 
目 y: y 坐标 。 


图 实例 说 明 

为 了 加 强 验 证 码 的 识别 难度 ， 还 可 以 生成 带 有 背景 的 验证 码 。 本 实例 将 介绍 如 何 生 成 带 有 背景 图 片 的 验证 
和 码 。 运 行 本 实例 ， 当 页 面 被 加 载 后 ， 在 验证 码 处 可 以 看 到 有 指定 图 片 作为 验证 码 的 背景 ， 只 有 用 户 输入 正确 的 
验证 码 后 ， 才 可 完成 注册 ， 运 行 结果 如 图 13.45 所 示 。 


高 级 
实用 指数 : 食 食 


汪汪 汪汪 


图 13.45 背景 图 片 的 验证 码 


图 关键 技术 


在 获取 验证 码 背 景 时 ， 首 先 需要 创建 作为 背景 图 片 的 文件 对 象 这 可 以 通过 javaio 包 中 的 File 类 的 构造 方 
法 实现 ) ， 然 后 再 构造 一 个 Image 对 象 ， 最 后 通过 Graphics 类 的 drawImage0 方 法 输出 背景 图 片 。 
(1) 构造 Image 对 象 
Image 对 象 可 以 通过 ImageIO 类 中 的 read() 方 法 获取 。ImageIO 类 是 Java 管理 图 像 输 入 /输出 的 类 ， 它 位 于 
javax.imageio.ImageIO 包 中 , 本 实例 涉及 了 该 类 的 read0 方 法 , 使 用 它 读 取 指 定 的 图 像 文件 , 该 方法 是 静态 方法 ， 
所 以 不 用 创建 ImageIO 类 的 实例 对 象 ， 直 接 就 可 以 调用 ， 语 法 格式 如 下 : 
Tead(File imgFile) 
参数 说 明 
imgFile: 一 个 文件 对 象 ， 该 文件 对 象 指向 一 个 图 像 文件 。 
例如 ， 本 实例 中 获取 验证 码 背 景 图 片 所 对 应 的 Image 对 象 的 代码 如 下 : 
Image src = ImageIO.read(bgImgFile); /构造 Image 对 象 
(2) 通过 Graphics 类 的 drawImage0 方 法 绘制 背景 图 片 
使 用 Java 的 绘图 类 Graphics, 不 仅 可 以 绘制 图 形 和 文本 , 还 可 以 使 用 其 drawImage0 方 法 将 图 片 资源 显示 到 
绘图 上 下 文中 ， 而 且 可 以 实现 各 种 特效 处 理 。Graphics 类 的 drawImage0 方 法 的 语法 格式 如 下 : 
ee 
参数 说 明 
@ img: 要 显示 的 图 片 对 象 。 
@ x: 水 平 位 置 。 
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目 y: 垂直 位 置 。 
@ observer: 要 通知 的 图 像 观察 者 。 
例如 ， 本 实例 中 通过 Graphics 类 的 drawImage0 方 法 绘制 背景 图 片 的 代码 如 下 : 
g.drawImage(src, 0, 0, width, height, null); /| 绘制 背景 图 片 
图 设计 过 程 
(1) 编写 一 个 名 称 为 SnowCheckCode 的 Servlet 类 ， 主 要 通过 service0 方 法 生成 验证 码 。 首 先 设置 响应 头 


信息 并 指定 生成 的 响应 是 JPG 图 片 和 获取 验证 码 的 背景 图 片 ， 并 绘制 图 片 作 为 验证 码 的 背景 ， 关 键 代码 如 下 : 
Tesponse.setHeader("Pragma", "No-cache"); 
Tesponse setHeader("Cache-Control", "No-cache"): 
response.setDateHeader("Expires", 0); 


/指定 生成 的 响应 是 图 片 
Tesponse.setContentType("image/jpeg"); 
int width = 166; /验证 码 图 片 的 宽度 
int height = 45; /验证 码 图 片 的 高 度 
BufferedImage image = new BufferedImage(width, height.BufferedImage.TYPE_INT_RGB): 
Graphics g = image.getGraphicsO: /获取 Graphics 类 的 对 象 
/获取 背景 图 片 
File bgImgFile = new File(request.getRealPath("images/checkCode bg.jpe”")); 
Image src = ImagelO.read(bgImgFile); /构造 Image 对 象 
g.drawImage(sre, 0, 0, width, height, null); /绘制 背景 图 片 
(2) 随机 生成 4 个 英文 和 数字 混合 的 验证 码 文字 ， 并 对 文字 进行 随机 缩放 并 旋转 ， 关 键 代 码 如 下 : 
String sRand = "™"; 
Font mFont = new Font(" 宋 体 ", FontIT4LIC. 26); /通过 Font 构造 字体 
g.setFont(mFont); // 设 置 字体 
g.setColor(new Color(0, 0, 0)); // 设 置 颜色 为 黑色 
/输出 随机 的 验证 码 文字 
intitmp = 0; 
for (inti=0;i<4;ith) { 
if (random.nextInt(2) — 1) { 
itmp = random.nextInt(26) + 65; /| 生成 A~Z 的 字母 
}else{ 
itmp = random.nextInt(10) + 48; /| 生成 0~9 的 数字 
} 
char ctmp = (char) itmp: 
sRand += String.valueOft ctmp); 
/+*## 随 机 缩放 文字 并 将 文字 旋转 指定 角度 **/ 
/将 文字 旋转 指定 角度 


Graphics2D g2d_word = (Graphics2D) g: 
AffineTransform trans = new AffineTransform(); 
/| 缩放 文字 
float scaleSize = Iandom.nextFloatO + 0.5f: 
if (scaleSize < 0.8 || scaleSize > 1.11) { 
scaleSize = 1f: 
} 
trans.scale(scaleSize, scaleSize); 
g2d_word.setTransform(trans): 
g.drawString(String.valueOf ctmp), width / 6 * i+ 23, random. nextInt(height / 2) + 20): 
} 
(3) 将 生成 的 验证 码 保存 到 Session 中 ， 并 输出 生成 后 的 验证 码 ， 关 键 代 码 如 下 : 
HttpSession session = request.getSession(true); 
session.setAttribute("randCheckCode”, sRand): 
g.disposeO; 
ImageIO.write(image, "JPEG", response.getOutputStream()): 


图 秘笈 心 法 
本 实例 应 用 了 Graphics 类 的 drawImage0 方 法 绘制 背景 图 片 , 该 方法 还 有 其 他 几 个 重 载 方 法 , 这 些 方法 的 用 
法 可 以 参考 JDK API。 
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13.8 生成 条 形 码 


实例 372 


实用 指数 : 食 食 


图 实例 说 明 

相信 大 家 都 在 超市 或 者 书店 见 过 一 种 扫描 设备 ， 它 就 是 条 形 码 ， 是 一 种 用 于 区 分 产品 的 一 组 编号 ， 以 条 形 

码 呈 现 给 用 户 ， 如 图 书 上 的 ISBN 编号 、 各 种 电子 产品 和 保修 凭证 上 的 条 形 码 等 。 本 实例 在 JSP 页 面 实现 了 条 

形 码 的 在 线 生 成 功能 ， 如 图 13.46 所 示 ， 用 户 在 页 面 中 可 以 输入 要 生成 条 形 码 的 产品 编号 ， 也 可 以 包含 英文 字 

母 ， 单 击 “ 生 成 条 形 码 ” 按 钮 ， 将 生成 各 种 编码 格式 的 条 形 码 图 片 ， 如 图 13.47 所 示 。 
本 
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Wn 0 而 而 
图 13.46 输入 要 生成 的 条 形 码 图 13.47 生成 的 条 形 码 
图 关键 技术 


本 实例 主要 使 用 了 开源 JbarcodeBean 组 件 ， 该 组 件 主要 用 于 生成 条 形 码 。 其 中 主要 应 用 该 组 件 包 中 的 
JBarcodeBean 类 中 的 相关 方法 生成 条 形 码 。JBarcodeBean 类 中 用 于 设置 条 形 码 样式 的 常用 方法 如 表 13.2 所 示 。 


表 13.2 JBarcodeBean 类 的 常用 方法 


方法 描述 

setCodeType(BarcodeStrategy codeType, 设置 生成 的 条 形 码 类 型 
setCode(String code) 设置 要 生成 的 条 形 码 
setBarcodeHeight(int height) 设置 条 形 码 的 高 度 
setFont(Font font) 设置 字体 
setForeground(Color ¢) 设置 前 景色 
setBarcodeBackground(Color ¢ 设置 条 形 码 的 背景 色 

力 设计 过 程 

(1) 编写 indexjsp 主页 面 ， 在 其 中 定义 接收 产品 编号 的 文本 框 和 执行 条 形 码 生 成 的 提交 按钮 以 及 相关 元 素 ， 
关键 代码 如 下 : 


<form method="getr action="resultjsp ”> 
<input name="code”" type="text” size="28"> 
<input type="submit" value=" 竺 成 笑 形 好"~ 
</form> 


入 
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(2) 编写 resultjsp 页 面 ， 这 个 页 面 将 接收 首页 中 用 户 输入 的 产品 编号 ， 然 后 把 产品 编号 传递 给 ServletText 
类 ， 并 指定 不 同 的 编码 格式 ， 在 页 面 中 显示 各 种 编码 的 条 形 码 ， 关 键 代 码 如 下 : 


<tr align="center" bgcolor="#84C52D"> 
<td>Code 11 编码 </td> 
<td>Code 128 编码 </td> 
<td>Code 39 3:1 编码 </td> 
<td>Code 39 2:1 编码 </td> 
</tr> 
<tr align="center"> 
<td><img src="ServietTest?code=$ {param.code } &type=<%=CodeType.Code_11%>"></td> 
<td><img src="ServietTest?code=$ {param.code } &type=<%=CodeType.Code_128%>"></td> 
<td><img sre="ServietTest?code=$ {param.code } &type=<%=CodeType.Code_ 39 3 1%>"></td> 
<td><img sre="ServietTest?code=$ {param.code } &type=<%=CodeType.Code_ 39 2 1%>"></td> 
</t> 
<tr align="center" bgcolor="#84C52D"> 
<td>Code 93 编码 </td> 
<td>Code 93 Extended 编码 </td> 
<td>Ext Code 39 3:1 编码 </td> 
<td>Ext Code 39 2:1 编码 </td> 
</t> 


(3) 编写 CodeType 接口 ， 在 该 接口 中 定义 静态 的 常量 ， 这 些 常量 分 别 代表 不 同 的 编码 格式 ， 关 键 代码 
如 下 ， 


public interface CodeType { 
public static int Code_11=0x1; 
public static int Code_128=0x2; 
public static int Code 39 3 1=0x3; 
public static int Code 39 2 1=0x4: 
public static int Ext_Code 39 3 1=0x5; 
public static int Ext Code 39 2 1=0x6; 
public static int Code_93=0x7; 
public static int Code_93_Extended=0x8; 
public static int InterLeaved_25_3_1=0x9; 
public static int InterLeaved_25 2_1=0x10; 
public static int MST_model10_check=0x11; 
public static int Codabar_3_1=0x12; 
public static int Codabar_2_1=0x13; 
Public static int EAN_13=0x14; 
public static int EAN_8=0x15; 

} 


(4) 编写 ServletText 类 ， 它 是 处 理 条 形 码 生成 请 求 的 Servlet， 在 该 类 中 创建 JBarcodeBean 类 的 全 局 成 员 
变量 barcode， 它 将 被 其 他 方法 调用 ， 关 键 代码 如 下 : 


Ppublic class ServletTest extends HttpServlet { 
JBarcodeBean barcode: 
} 


(5) 编写 Servlet 初始 化 方法 init0， 在 该 方法 中 初始 化 JbarcodeBean 类 的 对 象 ， 并 设置 该 对 象 生成 条 形 码 
时 显示 条 形 码 的 文本 信息 ， 关 键 代码 如 下 : 


Ppublic void init(ServletConfig conf) throws ServletException { 


super.init(conf); 
barcode = new JBarcodeBean0: // 初 始 化 条 形 码 工具 类 
barcode.setShow Text(true): /设置 生成 的 条 形 码 显示 文本 信息 


} 

(6) 编写 processRequest0 方 法 ， 它 通过 matchType() 方 法 确定 生成 条 形 码 的 编码 类 型 ， 然 后 设置 生成 条 形 
码 的 其 他 参数 信息 ， 如 生成 条 形 码 的 产品 编号 、 条 形 码 的 高 度 、 编 码 类 型 等 ， 最 后 将 生成 的 条 形 码 输出 到 客户 
端的 输出 流 ， 关 键 代 码 如 下 : 

protected synchronized void processRequest(HttpServletRequest request. HttpServletResponse response) 


throws ServletException, IJOException { 
response.setContentType("text/html:charset=UTF-8"): 


Tesponse.setContentType("image/gif"): /设置 响应 对 象 的 数据 类 型 为 GIF 图 片 
OutputStream out = response.getOutputStream(): /获取 响应 对 象 的 输出 流 
BarcodeStrategy codeType = null: // 创 建 条 形 码 类 型 对 象 

String typeStr = request.getParameter("type”); 

int type = 0: 
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i (typeStr — null || typeStrisEmpty0) { 


type = Code_11: 
}else{ 
type = Integer.parselnt(typeStr); 
codeType = matchType(type): // 匹 配 指 定编 码 类 型 
barcode.setCodeType(codeType); 1/ 设置 指定 编码 类 型 
barcode.setCode(request.getParameter("code")); /设置 条 形 码 数值 
barcode.setBarcodeHeight(70); /1/ 设 置 条 形 码 的 高 度 
barcode.setCheckDigit(false); 
barcode.setFont(barcode.getFont().deriveFont(14)); 1/ 设 置 文 本 字体 
barcode.gifEncode(out); /| 输出 条 形 码 图 像 数 据 

} 
(7) 编写 matchType0 方 法 ， 该 方法 用 于 生成 与 页 面 请 求 和 编码 格式 相 匹 配 的 条 形 编 码 对 象 ， 关 键 代码 


如 下 : 
Private BarcodeStrategy matchType(int type) { 
BarcodeStrategy codeType = null; 
Switch (type) { 

/设置 条 形 码 的 编码 类 型 

Case Code 128: 
codeType = new Code1280; 
break; 

case Code 39 3 1: 
codeType = new Code390; 
break; 

case Code 39 2 1: 
codeType = new Code39 2to10; 
break; 

Case Ext Code 39 3 1: 
codeType = new ExtendedCode390; 
break; 

Case Ext Code 39 2 1: 
codeType = new ExtendedCode39 2to10; 
break; 


图 秘笈 心 法 

JbarcodeBean 组 件 是 一 个 IFC Swing 兼容 的 JavaBean 组 件 ， 主 要 用 来 产生 条 形 码 ， 其 下 载 网 址 为 
http://jbarcodebean.sourceforge.net。 它 支持 当前 一 些 流行 的 条 形 码 格 式 , 如 Code 128、Code 39、Extended Code 39 
等 。 本 实例 使 用 的 JbarcodeBean 组 件 的 版 本 为 1.1.5。 
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图 片 的 大 小 

图 片 与 鼠标 相关 的 操作 
图 片 与 时 间 相 关 的 操作 
图 片 的 动画 效果 
选择 头像 图 片 

图 片 的 其 他 效果 
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14.1 图 片 的 大 小 


在 网 站 中 浏览 页 面 时 往往 会 看 到 对 图 片 放 大 或 缩小 的 操作 ， 尤 其 是 一 些 图 片 资源 的 网 站 使 用 更 是 频繁 ， 这 
些 功 能 方便 浏览 者 详细 地 看 清楚 图 片 ， 使 网 站 更 加 入 性 化 。 
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图 实例 说 明 

本 实例 通过 一 些 简单 的 页 面 设 计 ， 使 用 户 能 够 在 文本 框 中 输入 图 片 
的 宽度 和 高 度 ， 当 用 户 单 击 “ 预 览 ” 按 钮 后 ， 程 序 会 根据 用 户 所 指定 的 
图 片 路 径 以 及 图 片 的 大 小 在 页 面 中 显示 该 图 片 , 运 行 结果 如 图 14.1 所 示 。 


图 关键 技术 


本 实例 主要 在 自 定 义 的 JavaScript 函数 中 ， 应 用 document 对 象 的 
getElementById( 方 法 获取 文本 框 中 输入 的 宽度 和 高 度 ， 并 将 这 两 个 值 设 
置 为 图 片 的 高 度 和 宽度 ， 这 样 就 实现 了 自 定 义 大 小 图 片 的 功能 。 


图 设计 过 程 图 14.1 显示 自 定义 大 小 的 图 片 
(1) 在 JSP 页 面 中 设置 页 面 的 布局 ， 关 键 代码 如 下 : 


<form name="form]1" method="post" action=""> 
<p align="center”> 
<input type="/file” name="textfield’> 
<p> 
<p align="center"><span class="style3 心 图片 宽 度 : </span> 
<input name="Wwidthtext" id="widthtext" type="text" value="" size="10" width="60"><br/> 
<span class="style3 吃 图 片 高 度 : </span> 
<input name="heighttext" id="heighttext" type="text" size="10" width="60"> 
<p> 
<p align="center”> 
<input type="button”" name="Submit2" value=" 殉 典 " onClick="showpicO:"> 


> 
</form> 
<div id = div1'align="center"> 
<img alt="" src="" id="img1 > 
</div> 
<td> 
</t> 
</table></td> 


<t> 
</table> 


(2) 编写 JavaScript 代码 ， 用 于 获取 文本 框 的 高 度 和 宽度 的 值 ， 并 设置 为 图 片 的 宽度 和 高 度 ， 关 键 代码 


document getElementById("img1") height=height: 
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} 
</script> 


图 秘笈 心 法 
在 JavaScript 中 应 用 document 对 象 的 getElementById(0 方 法 获取 HTML 页 面 元 素 的 值 或 属性 。 


14.2 ”图片 与 筷 标 相关 的 操作 


国 实例 说 明 
在 一 些 网 站 中 ， 为 了 使 页 面 更 加 美观 ， 将 网 站 工具 栏 中 的 按钮 设置 为 模糊 显示 状态 ， 当 鼠标 经 过 图 片 时 ， 


y i 
实例 374 


原本 不 清晰 的 图 片 变 为 清晰 ; da 图 片 又 回 到 不 清晰 的 状态 , 运行 结果 如 图 14.2 和 图 14.3 所 示 。 


B Sa le | 
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文件 四 桨 避 EE) 豆 看 WW) 收 斋 闪避。 工具 C” 
次 必 天 | 同 当 页 过 图 片 时 号 示 图 乒 


图 Internet | 保护 相 芒 重 。 式 100% ~ 


图 14.2 鼠标 未 经 过 时 的 效果 图 14.3 鼠标 经 过 时 的 效果 


图 关键 技术 


在 实现 图 片 变化 时 , 主要 应 用 onMouseover 和 onMouseout 鼠标 事件 , 当 鼠 标 经 过 图 片 时 ,会 触发 onMouseover 
事件 ， 然 后 调用 JavaScript 函数 改变 图 片 alpha 滤 镜 的 透明 度 opacity 属性 ， 将 opacity 值 设 为 100 则 表示 完全 不 
透明 。 当 鼠标 移出 图 片 时 , 会 触发 onMouseout 事件 , 再 调用 JavaScript 函数 改变 图 片 alpha 滤 镜 的 透明 度 opacity 


属性 值 为 30。 
图 设计 过 程 


创建 index.jsp 页 面 ， 在 JavaScript 脚本 中 实现 用 于 改变 图 片 清晰 的 效果 ， 关 键 代码 如 下 : 
<title> 当 鼠标 经 过 图 片 时 显示 图 片 </title> 


<SCRIPT lanl 
function 人 .which) 


if (which=—0) 
cur.filters.alpha.opacity=100 
else 
cur.filters.alpha.opacity=30 
} 
<SCRIPT™> 
<body> 
<div align="center ”> 
<img src—"magnifierjpg” style="filter:alpha(opacity=20)" onMouseOver—"makevisible(this.0)" 
‘onMouseOut="makevisible(this.1)" width="114" height="87"> 
<div> 
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国 秘笈 心 法 
在 正中 需要 通过 filter 来 定义 透明 度 opacity， 而 在 Mozilla 中 可 以 直接 解析 opacity， 所 以 如 果 要 使 这 个 效 
果 在 两 种 浏览 器 中 都 得 到 支持 ， 需 要 编写 兼容 两 个 浏览 器 的 代码 。 


实用 指数 : 庚 朗 雄 ， 
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国 实例 说 明 
本 实例 实现 的 是 当 鼠 标 经 过 图 像 时 ， 会 给 出 一 段 预 设 的 文字 提示 ， 而 当 鼠 标 离开 时 便 没有 文字 提示 。 在 浏 
览 器 不 支持 或 禁止 图 像 功能 时 就 会 直接 给 出 预 设 的 提示 文字 ， 运 行 效果 如 图 14.4 和 图 14.5 所 示 。 


-六 和 片 -| 加 | rx. ul]| 
加 wapyiecahostao 7 [+ |X 


[ES 


国 pecalhosta0 - [1 [x 


图 14.4 鼠标 经 过 图 像 时 图 14.5 浏览 器 禁止 或 不 支持 时 


图 关键 技术 

<img> 标 签 的 Alt 属性 用 于 当 鼠 标 经 过 图 片 时 显示 的 文字 ， 这 个 属性 值 可 以 有 也 可 以 没有 。Alt 属性 还 有 一 
个 用 法 ， 就 是 在 不 能 显示 图 像 的 情况 下 ， 指 定 蔡 代 图 像 所 使 用 的 文字 。 
图 设计 过 程 

创建 index.jsp 页 面 文件 ， 主 要 代码 如 下 : 

<div align="center"><img src="smilejpg” alt=" 访 笑 盛 单亲 " width="114" height="87"></div> 
图 秘笈 心 法 

有 时 在 打开 浏览 器 时 ， 会 看 不 明白 所 显示 的 内 容 。 这 种 现象 是 因为 没有 图 像 的 替代 文字 ， 这 时 给 图 像 加 上 
说 明文 字 就 显得 很 有 必要 了 。 


实用 指数 : 食 广 但 


力 实例 说 明 
本 实例 使 用 图 像 预 装载 原理 ， 将 图 像 在 页 面 中 以 幻灯 片 的 形式 显示 ， 实 例 运行 结果 如 图 14.6 所 示 。 


图 关键 技术 
实现 本 实例 ,主要 是 在 页 面 的 <div> 标 签 中 使 用 了 setInterval0 函 数 , 此 函数 用 于 在 一 定时 间 间 隔 内 一 直 执行 
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同一 段 代码 。 应 用 该 函数 时 ， 无 须 在 自 定义 的 JavaScript 方法 中 调用 ， 因 为 它 是 自动 执行 的 ， 并 且 会 一 直 执行 
下 去 。 


一 | 
ET 


器 | 
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(b) (©) 
图 14.6 幻灯 片 形式 显示 图 像 


图 设计 过 程 
创建 ndex:jsp 页 面 ， 然 后 创建 一 个 photod 数组 用 于 存放 图 像 的 名 称 ， 再 创建 一 个 用 于 存放 图 像 对 象 的 数组 


photod2， 在 循环 中 使 用 new ImageO 语 句 创建 图 像 对 象 赋 给 photod2 数组 ， 把 图 像 名 称 赋 给 每 个 图 像 对 象 的 src 


属性 ， 这 样 就 将 多 个 图 像 预 装载 到 cache 缓存 中 ， 关 键 代码 如 下 : 
<title> 预 装载 图 像 制作 幻灯 片 <ltitle> 


var photod=new Array(8); 
for(var i=0;i<=8:iHH){ 
Photod[ij=i; 
var photod2=[]; 
for(var i=0;i<photod.length:i++){ 
photod2[ij=new ImageO: 
; Photod2[i].sre=photod[i]+".gif; 
function showpicO{ 
else; 


Var Ei STC.: 2 


<body onLoad="var begin=setInterval('showpic()'.1000);"> 
<div id="div1' align="center"></div> 


国 秘笈 心 法 


setInterval() 方 法 与 setTimeout0 方 法 不 同 ， 它 会 在 指定 的 时 间 间 隔 内 反复 执行 某 个 JavaScript 方法 或 某 一 段 
JavaScript 脚本 。 与 setTimeout0 方 法 类 似 的 是 ， 如 果 要 终止 执行 ， 需 要 调用 clearInterval0 方 法 。 


初级 
实用 指数 : 但 食 食 
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图 实例 说 明 
本 实例 主要 实现 网 页 背景 随机 变化 的 功能 。 当 打开 该 网 页 时 ， 会 每 隔 5 秒 显示 不 同 的 页 面 背景 ， 运 行 结果 
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如 图 14.7 所 示 。 


2 -Windows Intem.. :ols 加 se _ Wndowsintam ll 

GO e/aonn -olx]P en GO ee |x NP or 
文 作 (。 护 纪 和 查看 VI 收 吉 (A) 工具 [各 (HH) Er 
宽 收 划 夫 。 国 近 条 IE 多 网 只 县 


后 面 管理 员 登 录 
[到 


局 码 : 


图 Internet | 唱 j 异 所 用 醒 ” 坑 100% ， 图 Intemct| RPR 启用 


14.7 每 隔 5 秒 换 一 次 背景 


图 关键 技术 


实现 随机 变化 ， 主 要 应 用 JavaScript 中 用 于 产生 随机 数 的 Math 类 的 random0 方 法 ， 该 方法 返回 带 正 号 的 
double 类 型 的 值 ， 该 值 大 于 等 于 0.0 且 小 于 1.0。 返 回 值 是 一 个 伪 随 机 选择 的 数 ， 在 该 范围 内 (近似 ) 均匀 分 布 。 

在 JavaScript 中 ， 应 用 document.body.background 来 获取 页 面 的 背景 属性 ， 只 要 把 图 像 src 属性 值 赋值 给 背 
景 属性 即 可 。 
图 设计 过 程 

创建 ndexjsp 页 面 文件 ， 在 本 实例 中 使 用 Math 类 的 random0 函 数 ， 随 机 产生 6 个 数字 并 取 整 ， 然 后 使 用 
switch 语句 根据 当前 随机 产生 的 值 设置 背景 图 片 ， 最 后 使 用 setTimeout0 函 数 每 5 秒 调用 一 次 randompic0 方 法 ， 
主要 代码 如 下 : 

</head> 

<body onLoad="randompic(); > 

<center class="style2"> 后 面 管理 员 登 录 </center> 

<table width="265" height="110" border="1" align="center” bordercolor="#6495ed"> 

| </span></td> 


<td width="169"><input name="textfield" type="text"></td> 
<t> 


<tr> 
<td><span class="style5 > 密 &nbsp;&nbsp; 码 : </span></td> 
<td><input name="textfield2" type="text"></td> 
</tr> 
<t> 
<td colspan="2"><div align="center”> 
<input name="Submit2" type="button" value=" 矿 管 "> 


vari= Math.floor(Math.random()*6);// 取 整 并 除 6 
Var sre =""; 
switch(?) { 
case0: 
sre = "Jellyfish.jpe": 
break: 
case 1: 
src = "Koala.jpe": 
break: 


Case 2: 


第 14 章 图 像 操 作 


src= "Lighthouse jpg": 
break: 
Case 3: 
src 一 "Penguinsjpg 
break:; 
Case 4: 
src = "Tulipsjpg 
Case 5: 
src 一 Desetjpg 
break: 


} 

document bodybackground=src: 
setTimeout("randompicO",5000); 
} 

/script> 


图 秘笈 心 法 
在 JavaScript 中 , 由 于 调用 Math 类 的 random0 函 数 生成 的 随机 数 范围 在 0.0 一 1.0 之 间 , 都 是 小 于 1 的 小 数 ， 


根据 实际 情况 ， 如 果 想 生成 一 些 随机 整数 ， 可 以 将 该 函数 的 返回 值 乘 以 相应 的 整数 值 ， 然 后 再 应 用 Math 类 的 地 
板 函 数 floor0 取 整 即 可 实现 。 


初级 
实用 指数 : 但 食 食 
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图 实例 说 明 
在 设计 网 站 时 ， 为 了 美化 页 面 效果 ， 可 以 对 图 片 进 行 无 间断 的 循环 滚动 显示 。 当 浏览 者 将 鼠标 经 过 滚动 图 
片 时 ， 图 片 停止 滨 动 ， 当 浏览 者 将 鼠标 从 图 片上 移 开 时 ， 图 片 又 继续 活动 ， 运 行 结果 如 图 14.8 所 示 。 


EN RR Wrdoms intenet Erer li 


@ Mere | Fp EN 


图 14.8 无 间断 的 图 片 循环 滚动 效果 


图 关键 技术 
本 实例 主要 使 用 setTimeout0 方 法 实现 图 片 循 环 滚动 效果 ， 其 语法 格式 如 下 : 
setTimeout(function.milliseconds,[arguments]) 
参数 说 明 
@ function: 要 调用 的 JavaScript 自 定义 的 函数 名 或 者 JavaScript 代码 。 
@ milliseconds: 设置 超时 时 间 ， 单 位 为 毫秒 。 
图 设计 过 程 
(1) 编写 JavaScript 自 定义 函数 ， 用 于 实现 无 间断 的 图 片 循环 滚动 效果 ， 关 键 代 码 如 下 : 
<SCRIPT language—"avascript> 


var n=4 

/W/ 此 变量 控制 图 片 移动 的 速度 ， 图 片 越 大 滚动 越 快 
td2.innerHTML=tdl.innerHTML 

var Mycheck: 

function moveO{ 
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if(td2.offsetWidth-div1.scrollL.eft<=0) 
divl.scrollLefi-=td1.offsetWidth 
else{ 
divl.scrollLeftt+ 
} 
Mycheck=setTimeout(move,n) 
} 
divl.onmouseover-function0 {clearTimeout(Mycheck)} 
divl.onmouseout-function0 {Mycheck=setTimeout(move.n)} 
moveO: 
</SCRIPT> 


(2) 在 页 面 的 div 层 中 实现 图 片 的 显示 与 隐藏 ， 关 键 代 码 如 下 : 
<DIV id=divl style="OVERFLOW: hidden; WIDTH: 100%:; COLOR: fffffffp'> 
<TABLE cellSpacing=0 cellPadding=0 align=left border=0 cellspace="0"> 
<TR> 
<TD id=td] vAli! 
<table width="876" height="73” border="0" cellpadding="0" cellspacing="0"> 
<t> 


<td width="73" background="].jpg ”></td> 
<td width="73" background="2,jpg ”></td> 
<td width="73" background="3.jpg "></td> 
<td width="73" background="4.jpg "></td> 
<td width="73" background="5.jpe ”></td> 


<td width="73" background="8,jpg "></td> 

<td width="73" background="9,jpg "></td> 

<td width="73" background="10jpg "></td> 

<td width="73" background="]1,jpg"></td> 
<td width="73" background="12,jpg"></td> 
<t> 
</table> 
<TD> 

<TD id=td2 vAlign=top>&nbsp;</TD></TR></TABLE> 
</DIV> 


图 秘笈 心 法 
实现 本 实例 很 简单 ， 主 要 就 是 控制 鼠标 的 onMouseover 和 onMouseout 事件 。 页 面 在 加 载 后 ， 会 利用 


setTimeoutO 函 数 使 图 片 循环 滚动 ， 当 鼠标 移 到 图 片上 时 ， 会 触发 onMouseover 事件 调用 clearTimeout0 函 数 终 止 
图 片 滚动 。 


实例 379 


图 实例 说 明 

在 一 些 门户 网 站 中 , 总 会 发 现 网 页 中 的 两 侧 有 浮动 的 广告 图 片 , 无 论 怎 么 上 [Br sa we 
下 滨 动 页 面 图 片 都 是 保持 在 页 面 的 最 两 侧 。 本 实例 用 于 实现 在 页 面 中 放置 浮动 广 | 全 全 see 
告 的 功能 ， 运 行 结 果 如 图 14.9 所 示 。 六 类 二 同和 六 E 国 上 


图 关键 技术 


本 实例 主要 应 用 了 body 标记 中 的 scrollLeft 属性 、scrollTop 属性 、offsetleft 
属性 和 offsetTop 属性 来 控制 鼠标 的 跟随 效果 。 下 面 对 这 几 个 属性 进行 说 明 。 
口 scrollLeft: 设置 或 者 获取 对 象 左边 界 和 窗口 中 目前 可 见 内 容 的 最 左 端 之 
间 的 距离 。 
口 scrollTop: 设置 或 者 获取 对 象 最 顶端 和 窗口 中 目前 可 见 内 容 的 最 顶端 之 149 浮动 广告 图 片 


国 Imemetl 而 ” 所 100% ~ 
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间 的 距离 。 
口 “offsetLeft: 获取 对 象 相对 于 版 面 或 由 offsetLeft 属性 指定 的 父 坐标 的 计算 左 侧 位 置 。 
口 offsetTop: 获取 对 象 相对 于 版 面 或 由 offsetTop 属性 指定 的 父 坐标 的 计算 最 顶端 位 置 。 


图 设计 过 程 


(1) 创建 index.jsp 页 面 ， 编 写 JavaScript 脚本 用 于 实现 浮动 图 片 的 效果 ， 关 键 代码 如 下 : 
<script language="JavaScript"> 
Var delta=0.15 
Var layers; 
function fioatersO { 
this.items= []; 
this.addItem= function(id,x,y,content){ 
document write(<div id=+id+ style="z-index: 10; position: absolute; width:80px: height:60px:left:+(typeof(x)—'string'?eval(x):x)+":top:+ 
(typeof(y) —'string'?eval(y):y)+">"+contentt'</div>); 
var newltem= {}; 
newltem.object= document.getElementById(id); 
if(y>10) {y=0} 


newltem.x= x; 
newltem.y=y; 
this.items[this.items.length]= newItem; 


} 
this.play= functionO{ 
layers= this.items 
setInterval('playO',10); 
} 
} 
(2) 编写 自 定义 div 标签 以 及 函数 位 置 ， 关 键 代码 如 下 : 
function playO{ 
for(var i=0;i<layers.length:i++){ 
var obj= layers[i].object; 
var obj_ x= (typeof(layers[i].x)=—='string'?eval(layers[i].x):layers[i].x): 
var obj_y= (typeof(layers[i].y)=—='string'?eval(layers[i].y):layers[i].y); 
if(obj.offsetLeft!=(document.body.scrollLeft+obj x)) { 
var dx=(document.body.scrollLeft+obj_x-obj.offsetLeft)*delta; 
dx=(dx>071:-1)*Math.ceil(Math.abs(dx)): 
obj.style.left=obj.offsetLefttdx; 


} 

if(obj.offsetTop!=(document.body.scrollToptobj _y)) { 
var dy=(document.body.scrollTop+obj_y-obj.offsetTop)*delta: 
dy=(dy>0?1:-1)*Math.ceil(Math.abs(dy)): 
obj.style.top=obj.offsetTop+dy: 


obj.style.display= ": 
} 
} 
Var strfloat = new floaters(); 
strfloat.addItem("followDiv".6.80,"<img src=hourjpg' border="0>"); 
strfloat.playO; 
</script> 


国 秘笈 心 法 


十 


在 一 些 网 站 中 ， 经 常会 加 入 一 些 浮 动 图 片 形 式 的 广告 ， 因 此 ， 对 于 本 实例 的 实现 也 是 很 必要 的 。 
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图 实例 说 明 
在 浏览 网 页 时 ， 经 常会 在 载 入 图 片 时 使 用 进度 条 ， 应 用 进度 条 可 以 使 浏览 者 更 清晰 地 了 解 网 页 内 容 的 加 载 


S67 


Java Web 开发 实例 大 全 (基础 卷 ) 


进度 ， 运 行 效果 如 图 14.10 所 示 。 
着 进度 条 的 呈 示 - Windo. 
GO r/o -Ts 


文件 昌 ”第 馈 昌 查 看 V) 收藏 关 和 ) ”| 
富 收 天 国运 度 各 的 时 示 | 


图 14.10 40% 的 进度 条 


图 关键 技术 


本 实例 主要 通过 document 对 象 的 getElementById0 方 法 获取 <span> 标 签 对 象 ， 然 后 通过 prog.firstChild. 
nodeValue 语句 指定 <span> 标 签 内 部 的 值 , prog.style.width 语句 设置 进度 条 的 宽度 , 这 个 宽度 是 由 变量 n 控制 的 ， 
参数 每 次 增长 10， 直 到 100 为 止 。 实 现 进 度 条 具有 自动 增长 功能 ， 可 以 应 用 setTimeout0 函 数 。 


图 设计 过 程 
(1) 在 网 页 中 显示 进度 条 的 颜色 效果 ， 创 建 一 个 CSS 文件 设置 进度 条 的 样式 ， 代 码 如 下 : 


(2) 在 index.jsp 页 面 中 加 载 上 述 的 CSS 样式 ， 并 在 <p> 标 签 和 <span> 标 签 中 使 用 ， 主 要 代码 如 下 : 
<div> 开 始 上 传 进度 为 : </div> 
<p id="test"><span id="progress">10%</span></p> 
<script language="javascript"> 
ProgressTest(10): 
</script> 
(3) 利用 JavaScript 脚本 显示 进度 条 上 的 百分比 文本 及 进度 条 的 进度 ， 关 键 代码 如 下 : 
<script language="javascript”> 
function progressTest(n){ 
Var prog=document.getElementById('progress"):; 
Prog.firstChild.nodeValue=n+"%"; 
Prog.style.width=(n*2)+"px"; 
n+=10; 
if(n>100){ 
T=100; 


} 
2 
‘</script> 


秘笈 心 法 


在 JavaScript 中 ， 应 用 document 对 象 的 getElementById(0 方 法 ， 根 据 HTML 的 元 素 指定 的 id 值 来 获取 某 个 
元 素 对 象 。 
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实例 381 初级 
实用 指数 : 食 食 食 : 


力 实例 说 明 
在 页 面 中 浏览 图 片 时 ， 有 的 图 片 是 固定 大 小 的 ， 而 且 有 的 图 片 也 不 是 很 清晰 ， 为 了 方便 浏览 图 片 ， 应 该 能 

够 使 图 片 具有 放大 缩小 的 功能 。 运 行 本 实例 ， 单 击 “ 放 大 ”按钮 时 ， 图 片 会 按照 指定 的 大 小 不 断 增 大 ， 单 击 “ 缩 

小 ”按钮 时 ， 图 片 会 按照 指定 的 大 小 不 断 缩小 ， 运 行 结果 如 图 14.11 所 示 。 

乱 区 大雪 小 - Windows Intemmet Explorer Ex | 


GO /one -|*[xllpee 27| 
文件 上 。 汤 涡 E) 让 看 0V] 妆 苯 夫 (A) 工具。 大 二 
| 生效 | 国 本 本 和 小 


[ 鲜 Imemetl RE 局 用 而 、 成 100W 


图 14.11 缩放 图 片 


图 关键 技术 
实现 本 实例 很 简单 ， 主 要 应 用 了 一 些 简 单 的 条 件 判断 语句 ， 然 后 根据 当前 图 片 的 大 小 来 放大 或 缩小 图 片 的 
高 度 和 宽度 。 
图 设计 过 程 
(1) 编写 实现 放大 功能 的 JavaScript 脚本 代码 。 
function photoupO 
| var height = imagesl height; 
var width = images1.width: 
if ((height <= height * 2)||(width <= width * 2)) 
: imagesl height — imagesl .height + 40; 
imagesl.width ~ images1.width + 40; 
3 
} 
(2) 编写 实现 缩小 功能 的 JavaScript 脚本 代码 。 
function photoreduce0 


{ 
if ((images1.width > 100)(imagesl height > 100)) 
{ 


images] .height = imagesl.height - 40: 
imagesl.width = imagesl.width - 40: 
} 


Java Web 开发 实例 大 全 (基础 卷 ) 
<input type="button” value=-" 适 小 "onclick=- "photoreduce0"> 
<p> 
图 秘笈 心 法 
在 本 实例 自 定 义 的 JavaScript 方法 photoreduce0 中 ，images.height 和 images.width 用 于 获取 图 像 的 高 度 和 宽 
度 ， 其 中 40 为 增长 数 ， 单 位 为 像素 。 


国 实例 说 明 

本 实例 对 实例 381 进行 了 优化 ， 实 现 了 使 用 鼠标 滚轮 放大 与 缩小 图 片 。 当 鼠标 移动 到 图 片上 时 ， 图 片 将 获 
取 焦点 ， 然 后 可 以 使 用 鼠标 滚轮 来 改变 图 片 的 大 小 ， 如 图 14.12 所 示 。 
入 使 用 息 标 末 放 大 者 小 图片 - Windows Internet Explorer el 
OOJE e/a om "olx)P or FP-| 


文件 大 妨 雪 下) 二 吾 0 点 害 二 攻击 
襄 和 R 。 因 使 了 BR 改 大 堆 直 国 片 


请 使 用 鼠标 在 图 片 范 周 内 涪 动 


靖 小 图 片 初级 | 


实用 指数 ， 庚 雪 去 


14.12 鼠标 滚轮 改变 图 片 大 小 


图 关键 技术 


本 实例 主要 是 通过 event 对 象 的 wheelDelta 属性 来 获取 鼠标 的 滚轮 键 的 值 ， 从 而 控制 图 片 放 大 或 缩小 的 倍 
再 根据 获取 的 值 改变 图 片 的 style 属性 的 zoom 属性 来 实现 。 下 面 介 绍 zoom 属性 。 
Zoom:normal | number 
参数 说 明 
@ zoom: 设置 获取 对 象 的 放大 比例 。 
@ normal: 是 使 用 对 象 的 实际 尺寸 。 
目 number: 百分数 | 无 符号 浮 点 实数 ， 浮 点 实数 值 为 1.0 或 百分数 为 100% 时 相当 于 此 属性 的 normal 值 。 
图 设计 过 程 
(1) 编写 JavaScript 脚本 ， 用 于 实现 鼠标 滚轮 改变 图 片 大 小 的 方法 ， 代 码 如 下 : 


<script language="javascript”> 
function bigimg(i) 


{ 
Var zoom = parseInt(i.style.zoom.10)||100: 
zoom += event.wheelDelta / 12: 
if(zo0om >0) 
Listyle.z00m=Zo0m+"9%6'; 
Tetum false: 


数 


醒 


区 
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} 
‘</script> 

(2) 在 页 面 中 添加 OnMouseWheel 事件 并 调用 bigimg(this) 方 法 ， 主 要 代码 如 下 : 
<table width="10096"> 

<tr align="center”> 

<td><span class="style7 > 请 使 用 鼠标 在 图 片 范 围 内 滚动 </span></td> 

</tr> 
</table> 
<center> 
<a href="http://www.mingrisoft.com"> 
<img src="bgjpg" width="461" height="277" border="]" onmousewheel="retum bigimg(ihis)"> 
</a> 


Acenter> 
图 秘笈 心 法 

wheelDelta 是 设置 或 获取 滚轮 滚动 距离 和 方向 的 ， 而 OnMouseWheel 事件 是 当 鼠 标 滚轮 滚动 时 执行 脚本 
(GE)， 如 果 是 Firefox 浏览 器 ， 则 需要 用 DommouseScroll 绑 定 滚轮 事件 。 


六 和 i 
实例 383 Ee 
实例 83 实用 指数 ， 廊 廊 评 


图 实例 说 明 


在 浏览 一 些 网 站 时 ， 经 常会 看 到 图 标 跟随 鼠标 的 移动 而 移动 ， 其 中 有 些 图 标 是 cur 鼠标 文件 ， 而 有 些 却 是 
图 片 。 本 实例 将 使 用 一 个 GIF 格式 的 图 片 作为 鼠标 光标 ， 然 后 通过 JavaScript 实现 图 片 跟随 鼠标 移动 。 


图 关键 技术 


本 实例 将 图 片 放 在 了 一 个 层 中 ， 使 层 的 位 置 与 鼠标 的 位 置 相等 ， 当 层 位 置 发 生 改 变 时 ， 图 片 也 会 随 之 改变 
位 置 。 
图 设计 过 程 

(1) 编写 实现 跟随 鼠标 移动 图 片 的 JavaScript 脚本 ， 代 码 如 下 : 

<script language="javascript"> 

让 


x= windoweventx+ document.body.clientLeft 
y= window.eventy + document.body.clientTop: 


} 
function makesO { 


if(document.all) { 
var ob = document.all("tdiv") 
ob.style.posLeft=x 
ob.style.posTop=y 
} 
var timer=setTimeout("makesO",10) 
} 
document.onmousemove = handlerM:; 
</script> 


(2) 在 页 面 中 设置 ， 初 次 加 载 时 调用 makes0 方 法 ， 代 码 如 下 : 
<body onload="makes()” bgcolor="lightblue"> 
<div id="tdiv" style=- position:absolute> 
<img src= sjpg' width="32" height="32' class="spanstyle"> 
<div> 


图 秘笈 心 法 
本 实例 在 <div> 层 中 应 用 style 样式 的 position:absolute 属性 ， 是 用 来 固定 <div> 标 签 的 ， 是 相对 位 置 ， 它 是 相 
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对 于 body 位 置 而 变化 的 。 


图 实例 说 明 


本 实例 将 使 用 JavaScript 编写 一 个 可 以 左右 拖 动 的 图 片 , 当 用 户 在 图 片 
上 按 住 鼠 标 左 键 不 放 时 ， 就 可 以 左右 拖 动 图 片 ， 当 释放 鼠标 左 键 时 ， 即 将 
图 片 放置 在 释放 鼠标 左 键 时 的 位 置 上 ， 如 图 14.13 所 示 。 


图 关键 技术 

实现 本 实例 ， 首 先 编写 用 于 实现 左右 拖 动 图 片 的 功能 函数 ， 再 通过 
window 对 象 的 setInterval(0 方 法 每 隔 lms 执行 一 次 实现 左右 拖 动 图 片 的 函 
数 ， 最 终 可 以 实现 左右 拖 动 图 片 的 效果 。 
图 设计 过 程 

(1) 编写 实现 可 以 左右 拖 动 图 片 效 果 的 JavaScript 脚本 ， 代 码 如 下 : 

A 

currentX = currentY = 0; 

whichIt = null; 

lastScrollX = 0; lastScrollY = 0; 

NS = (document.layers) ? 1 : 0; 

IE=(document.all) ? 1: 0; 

function heartBeat() { 


if(IE) { 
diffY = document.body.scrollTop; diffX = document.body.scrollLeft; 


} 
if(NS) { 
diffY = self.pageYOffset; diffX = self.pageXOffset: 


! 
if(diffY != lastScrollY) { 
percent = .1 * (diffY - lastScrollY); 


if(IE) document.all.floater. style i 4+= percent; 
if(NS) document.floater.top += percent: 
lastScrolly = lastScrollY + percent: 


. 
if(diffX != lastScrollx) { 
percent = .1 * (diffX - lastScrollX):; 
if(percent > 0) 
percent = Math.ceil(percent); 
else 
percent = Math.floor(percent): 


document.all.floater.style.pixelLeft += percent: 
if(NS) 
document floaterleft += percent: 
lastScrollX = lastScrollX + percent: 
} 


} 
function checkFocus(x.y) { 
stalkerx = document floater pageX: 
stalkery = document.floater. pageY; 
stalkerwidth = document.floater.clip.width; 
stalkerheight = document floater.clip.height: 


初级 | 
实用 指数 : 信 亦 女 ， 


二 Wndow ne 加 


Sex De 本 


和 0% ~ 


14.13 ”左右 拖 动 图 片 的 效果 


if( (x > stalkerx && x < (stalkerx+stalkerwidth)) &é: (y > stalkery &&y< (stalkery+stalkerheight))) 
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Tetum true; 
else 
Tetum false; 
} 
function grabIt(e){ 
faE) { 


whichIt = event.srcElement: 
while (whichIt.id.indexOf("floater") — -1) { 
whichIt = whichIt parentElement: 
if (whichIt — nulD){ return true: } 
3. 
whichIt.style.pixelLeft = whichIt.offsetLeft: 
whichit.style.pixelTop = whichIt.offsetTop; 
currentX = (event.clientX + document.body.scrollLeft): 
currentY = (event.clientY + document.body.scrollTop); } 
else { 
window.captureEvents(EventMOUSEMOVE): 
if(checkFocus (epageX.epageY)) { 
whichIt = document.floater: 
StalkerTouchedX = e.pageX-document.floater.pageX:; 
StalkerTouchedY = e.pageY-document.floater pageY: 
和 
Tetum true; } 
function movelt(e) { 
if (whichIt — null) { return false; } 
if(E) { 
newX = (event.clientX + document.body.scrollLeft); 
newY = (event.clientY + document.body.scrollTop); 
distanceX = (newX - currentX); distanceY = (newY - currentY); 
CurrentX = newX; currentY = newY; 
whichiIt.style.pixelLeft += distanceX; 
whichIt.style.pixelTop += distanceY; 
if(whichiIt.style.pixelTop < document.body.scrollTop) whichit.style.pixelTop = document.body.scrollTop; 
if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; 
if(whichIt.style.pixelLeft > document body offsetWidth - document.body.scrollLeft - whichIt style.pixelWidth - 20) whichIt.style.pixelLe 人 t 
= document bodyoffsetWidth - whichIt.style.pixelWidth - 20; 
if(whichiIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichit.style.pixelHeight - $) whichit.style.pixelTop 
= document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5; 
event.returnValue = false;} 
else { 
‘whichIt.moveTo(e.pageX-StalkerTouchedX.e.pageY-StalkerTouchedY); 
if(whichIt.left < 0+self.pageXOffset) whichItleft = 0+self .pageXOffset: 
if(whichIttop < 0+selfpageYOffset) whichIttop = 0+self.pageY Offset: 
if( (whichIt.left + whichIt.clip.width) >= (window:innerWidth+selfpageXOffset-17)) whichItleft = ((window.innerWidthtself.pageXOffset) 
-whichIt.clip.width)-17; 
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset) 
-whichit.clip.height)-17:; 


return false:} 
Tetum false; } 
function dropItO = { 
whichIt = null; 
if(NS) window.releaseEvents (Event.MOUSEMOVE): 
Tetumn true; 
if(NS) { 
window.captureEvents(Event.MOUSEUP|Event. MOUSEDOWN): 
window.onmousedown = grabIt: 
window.onmousemove = movelt; 
window.onmouseup = dropIt; 
} 
IE) { 
document.onmousedown = grabIt 
document.onmousemove = movelt; 
document.onmouseup = dropIt: 
if(NS || EE) 
action = window.setInterval("heartBeatO".1): 
</Script> 


(2) 在 <body> 标 签 中 添加 一 段 CSS 样式 ， 主 要 代码 如 下 : 
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<STYLE type=text/css>#floater { 
LEFT: 445px; POSITION: absolute: TOP: -3px; VISIBILITY: visible;: WIDTH: 125px: Z-INDEX: 10} 
</STYLE> 


(3) 页 面 调用 代码 如 下 : 
<DIV align=center id-floater> 
<TABLE height=10 width=24> 
<TBODY> 
<TR> 
<TD align=middle height=6 vAlign=center width=76> 
<img src="mrjpg” width="170" height="113” border=0 style="cursor:pointer ”> 
</TD> 
<ITR> 
</TBODY> 


<DIV> 
图 秘笈 心 法 


本 实例 自 定 义 了 一 个 CSS 样式 floater， 并 在 JavaScript 中 多 次 调用 此 方法 ， 如 在 checkFocus(x) 获 取 焦 点 时 
使 用 了 document 对 象 获取 floater.pageX 的 值 。 


实例 385 ea 


实用 指数 : 但 食 食 


图 实例 说 明 
本 实例 主要 使 用 <div> 层 来 实现 随意 拖 动 的 图 片 。 用 户 只 需 在 页 面 中 单 击 图 片 ， 然 后 移动 鼠标 ， 便 可 将 图 片 

从 当前 位 置 移动 到 另 一 个 位 置 上 ， 如 图 14.14 所 示 。 
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图 14.14 ”随意 拖 动 的 图 片 


图 关键 技术 


本 实例 通过 自 定义 一 个 JavaScript 函数 ， 模 拟 鼠 标的 相关 操作 ， 然 后 将 对 应 的 函数 值 赋值 给 页 面 ， 使 用 页 面 
中 的 鼠标 事件 调用 自 定义 的 函数 ， 使 用 event 对 象 的 x 和 y 属性 获取 当前 鼠标 的 位 置 。 


图 设计 过 程 
(1) 声明 一 个 自 定义 函数 mousedownO， 使 用 变量 x1 和 yl 获取 鼠标 在 层 左 上 角 的 距离 ， 代 码 如 下 : 
UD ET 
X1 = window.event.x - parseInt(dragimages.style left); 


Y1 =window.event.y - parseInt(dragimages.style.top): 
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dragimages.style Index +— 1; 
move=1: 

入 

function mouseStopO{ 

‘window.event.retumValue = false; 

} 

function mousemoveO{ 

if(move) { 
dragimages.style left = windoweventx - XI1; 
dragimages.style.top = window.eventy - Y1; 

入 

function mouseupO{ 

move=0; 

} 

(2) 在 id 为 divl 层 的 OnMouseMove 事件 中 调用 mousemove0 方 法 ， 在 OnMouseDown 事件 中 调用 


mousedown() 方 法 ,在 OnMouseUp 事件 中 调用 mouseup( 方 法 ,在 OnDragStart 事件 中 调用 mouseStop0 方 法 , 代 
码 如 下 : 


function removeO{ 
document.all.div1. 'e= mousemove; 
document.all.div1.onmousedown = mousedown; 
document.all.div1.onmouseup = mouseup; 
document.all.divl.ondragstart = mouseStop; 
} 
‘</script> 
(3) 在 页 面 中 加 载 调用 remove0 方 法 ， 代 码 如 下 : 
<body onLoad="remove() ”> 
<div id="divl"” onMouseOver="dragimages=div1;drag=1:;"style="height:77px:left:10px:position:absolute;top: 10px:width:90px"><img name="img1" 
alt="" border="2" src="mrjpg" style="cursor:pointer "> 
</div> 


图 秘笈 心 法 

本 实例 主要 自 定 义 4 个 鼠标 动作 函数 mousemove0、mousedown0、mouseup0 和 mouseStop0， 分 别 实现 鼠 
标 移动 时 、 单 击 时 、 松 开 时 和 无 动作 时 的 应 用 ,并 用 event 对 象 获取 鼠标 的 位 置 与 图 片 层 中 当前 对 象 的 定位 实现 
图 片 移动 的 功能 。 


实例 386 


国 实例 说 明 
在 开发 网 站 时 ， 为 了 突出 某 个 图 片 或 者 链接 的 焦点 ， 需 要 设置 其 获取 焦点 时 的 显示 状态 。 在 本 实例 中 ， 当 
浏览 者 的 鼠标 移动 到 图 片上 时 ， 图 片 会 以 灰 度 状态 显示 ， 如 图 14.15 和 图 14.16 所 示 。 
息 gs 可 HEFs1 的 从 坟 -Windo- [| GE = 
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图 14.15 图 片 获 取 焦 点 时 状态 1 图 14.16 图 片 获取 焦点 时 状态 2 
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图 关键 技术 


实现 本 实例 ， 主 要 使 用 了 CSS 样式 中 的 opacity 滤 镜 ， 通 过 设置 滤 镜 中 的 透明 度 来 改变 图 片 获取 焦点 时 的 
显示 状态 。 


图 设计 过 程 
(1) 实现 改变 图 片 获取 焦点 时 显示 状态 的 JavaScript 脚本 ， 代 码 如 下 : 
<script "Javascript”> 
function visible(cursorD){ 
(i==0) 
cursor.filters.alpha.opacity=100; 
else 
cursor.filters.alpha.opacity=30; 
} 
‘</script> 
(2) 在 <body> 中 的 页 面 代 码 使 用 了 onMouseOver 事件 和 onMouseOut 事件 调用 visible0 方 法 ， 主 要 代码 
如 下 : 
‘<table border="0" cellpadding="0" cellspacing="0"> 
<t> 
<td align="center" bgcolor="#CCCCCC> 
<a class="link_image" href="http://www.mingrisoft.com"> 
<img sre="keyjpg” border="0” style="filter:alpha(opacity=100)"” onMouseOver="visible(this,1)” © onMouseOut="visible(this,0)"” width="148" 
height="127 心 


图 秘笈 心 法 
alpha 滤 镜 效果 还 有 如 下 属性 : finishOpacity 用 于 设置 渐变 透明 度 ; style 用 于 设置 透明 区 域 的 形状 ，0 表示 
统一 形式 ，1 表示 线形 ，2 表示 放射 状 ，3 表示 长 方形 。startX 和 startY 用 于 设置 透明 度 的 开始 的 横 、 纵 坐标 。 
finishX 和 finishY 用 于 设置 透明 度 的 结束 横 、 纵 坐标 。 
初级 
实用 指数 : 食 食 食 


图 实例 说 明 


在 浏览 一 些 网 站 时 ， 经 常会 看 到 带 有 抖动 效果 的 图 片 ， 将 鼠标 移动 到 图 片上 时 ， 此 图 片 就 开始 抖动 ; 当 鼠 
标 离 开 图 片 时 ， 图 片 又 恢复 到 原来 的 静止 状态 ， 实 例 运行 效果 如 图 14.17 所 示 。 
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图 14.17 ”抖动 效果 的 图 片 
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图 关键 技术 


本 实例 主要 利用 下 …else 语句 判断 当前 的 变量 a 的 值 , 如 果 a 的 值 符合 某 一 条 件 ,， 则 执行 图 片 向 某 一 方向 的 
抖动 方法 如 下 。 

使 图 片 向 上 抖动 : 

shake .style top = parseInt(shake .style top)+dithering: 

使 图 片 向 左 抖动 : 

shake style .left = parseInt(shake style left)+dithering: 
图 设计 过 程 

(1) JavaScript 脚本 的 shake.style.top、shake.style.left 分 别 使 图 片 向 上 、 向 左 拌 动 ， 定 义 了 一 个 抖动 频率 的 

变量 dithering， 此 值 越 大 抖动 的 频率 就 越 快 ， 主 要 代码 如 下 : 

“<script language="javascript”> 

var dithering = 10;// 拌 动 频率 

Var stopit = 0; 

i 

stopit = 0; 

shake = which; 

shake.style.left = 0; 

shake.style.top = 0; 


} 
function ditheringimageO{ 
if ((!document.all &&: !document.getElementByld)llstopit 一 1) 
Tetum 
这 (a 一 D) { 

shake.style.top = parseInt(shake.style.top)+dithering: 
jelse 这 (a 一 2) 


shake.style.left = parseInt(shake.style.left)+dithering: 
} 
else if (a—3){ 

shake.style.top = parseInt(shake.style.top)-dithering; 


else{ 
shake.style.left = parseInt(shake.style.left)-dithering; 
} 


f(a<4) 

十; 

else 

1; 
setTimeout("ditheringimage()",50); 


} 
function stoprattle(which){ 
stopit = 1; 
which.style.left = 0: 
which.style.top = 0; 
} 
</script> 
(2) 添加 CSS 样式 ， 代 码 如 下 : 
<style> 
.ditheringimg 
{ 
position : relative 
} 
</style> 
(3) 在 页 面 中 添加 图 片 ,并 通过 onMouseOver 事件 和 onMouseOut 事件 调用 JavaScript 定 义 的 ditheringimage0 


和 stoprattle0 方 法 ， 代 码 如 下 : 
<div align—"center > 
<img sre="affaidjpg” border—"0" class—"ditheringimg” onMouseOver—"init(this):ditheringimageO" onMouseOut="stoprattle(this)"> 
<div> 
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图 秘笈 心 法 
CSS 样式 中 的 position:relative 属性 表示 相对 定位 , 是 相对 于 容器 定位 , 对 象 不 可 重 靶 , 但 将 依据 left、 right、 
top、button 等 属性 在 文档 中 偏 移 位 置 。 


实例 388 
实例 实用 指数 ， 良 良友 


图 实例 说 明 
在 动态 网 站 中 ， 经 常会 用 到 图 片 。 如 果 要 以 图 片 的 实际 尺寸 进行 显示 ， 将 会 给 整个 网 站 带 来 不 便 ， 而 且 图 

片 大 小 不 好 控制 ， 使 网 站 页 面 布局 混乱 。 要 解决 此 问题 ， 可 以 在 页 面 中 加 入 相关 鼠标 事件 。 运 行 本 实例 ， 网 页 

中 的 图 片 以 缩 略 图 的 形式 显示 ， 当 鼠标 移动 到 指定 图 片 时 ， 该 图 片 将 以 实际 尺寸 进行 显示 ; 当 鼠 标 离 开 图 片 时 ， 

该 图 片 又 将 以 缩 略 图 的 形式 显示 ， 实 例 运行 结果 如 图 14.18 和 图 14.19 所 示 。 
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14.18 图片 放大 前 图 14.19 图 片 放大 后 


图 关键 技术 


本 实例 主要 应 用 JavaScript 中 的 Math 对 象 实现 鼠标 移动 放大 ， 此 对 象 是 一 个 静态 对 象 ， 不 能 使 用 new 关键 
字 创建 对 象 实例 ， 应 该 直接 使 用 “对 象 名 .成 员 ” 的 形式 来 访问 其 属性 或 方法 。 

Math 的 语法 格式 如 下 : 

Math mdethod(value[ value]) 

Math 对 象 的 相关 属性 及 说 明 如 表 14.1 所 示 。 


表 14.1 Math 对 象 的 相关 属性 及 说 明 


属 性 说 明 
E 欧 拉 常量 
LN2 2 的 自然 对 数 
LN10 10 的 自然 对 数 
LOG2E 以 2 为 底数 的 e 的 对 数 
LOGI10E 以 10 为 底数 的 e 的 对 数 
PI 圆周 率 常数 
SQRT1/2 0.5 的 平方 根 
SQRT2 2 的 平方 根 
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Math 对 象 的 相关 方法 及 说 明 如 表 14.2 所 示 。 
表 14.2 Math 对 象 的 相关 方法 及 说 明 


方 ” 法 说 明 
Abx(x 返回 x 的 绝对 值 
Acos(x) 返回 x 弧度 的 反 余弦 
Asin(x) 返回 x 弧度 的 反正 弦 
Atan(x) 返回 x 弧度 的 反正 切 
Atan2(x.7) 返回 坐标 (x.y) 对 应 的 极 坐标 角度 
Ceil(x) 返回 大 于 或 等 于 x 的 最 小 整数 
Cos(x) 返回 x 的 余弦 
Exp(x, 返回 e 的 x 乘 方 
Floor(x, 返回 小 于 或 等 于 x 的 最 大 整数 
Log(x) 返回 x 的 自然 对 数 
Max(x.y) 返回 x 和 y 中 的 最 大 数 
Min(x.y) 返回 x 和 y 中 的 最 小 数 
Pow(x; 返回 x 对 y 的 次 方 
Randomt 返回 0 和 1 之 间 的 随机 数 
Round(x, 返回 最 接近 x 的 整数 
Sin(x) 返回 x 的 正弦 值 
Sqrt(x, 返回 x 的 平方 根 
Tan(x, 返回 x 的 正切 值 


图 设计 过 程 
(1) 利用 JavaScript 脚本 创建 mousemove0 和 mouseout0 函 数 ，mousemove0 主 要 显示 图 片 的 实际 大 小 ， 
mouseout0 主 要 用 于 当 和 鼠标 离开 图 片 时 ， 图 片 将 以 原始 大 小 形式 显示 ， 代 码 如 下 : 
<script language="javascript”> 
Var w=images1.width; 
var h=imagesl.height; 
imagesl.height = Math.floor(h*0.5): 
imagesl.width = Math.floor(w*0.5); 
function mousemove0 
{ 
imagesl .height =h: 
imagesl1.width = Ww; 


function mouseoutO 
imagesl.height = Math.floor(h*0.5); 
imagesl.width = Math.floor(w*0.5): 
} 
</script> 
(2) 将 插入 图 片 的 border 属性 设置 为 0， 同时 当 鼠 标 在 图 片上 经 过 时 ， 图 片 的 onMouseMove 事件 调用 自 
定义 函数 mousemoveO 〇 ， 而 当 鼠 标 移出 图 片 时 ， 应 用 图 片 的 onMouseOut 事件 就 会 调用 mouseout0 函 数 ， 关 键 代 
码 如 下 : 


<input NAME="images1" TYPE="image" ID="images1" SRC="managerjpg" 
ALIGN="MIDDLE" BORDER="0" 
onMouseMove=mousemove(); onMouseOut—mouseout(:> 


图 秘笈 心 法 
本 实例 应 用 了 JavaScript 中 Math 类 的 HoorO 函 数 ， 该 函数 用 于 返回 小 于 或 等 于 某 个 数 的 最 大 整数 ， 被 称 为 
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“地 板 函 数 ”。 例 如 ， 数 字 1.5 在 应 用 floor0 函 数 之 后 ， 返 回 值 是 1， 而 -1.5 返回 值 则 为 -2。 


14.3 ”图 片 与 时 间 相关 的 操作 


gy 一 | 
实例 389 


力 实例 说 明 


本 实例 实现 了 定时 隐藏 图 片 的 功能 ， 类 似 于 倒计时 功能 ， 当 页 面 被 加 载 时 程序 会 自动 倒数 10 秒 开始 计 时 ， 
当 倒 计时 为 0 时， 则 设置 层 中 的 visibility 属性 为 隐藏 状态 。 由 于 图 片 在 层 中 ， 所 以 图 片 同时 也 被 隐藏 ， 运 行 结 
果 如 图 14.20 所 示 。 


大 Window Intormat Explorer esl=>™) 


GOu|[E /ochortsomns "1 [x)P en px| 
ET 
六 和 rm 。 因 定 入 总 权 片 


图 片 全 在 5 秒 后 隐藏 


二 1 


@ iromet| FP 本 zt 后 用 给- 抽 100% 一 


图 14.20 ”定时 隐藏 图 片 


图 关键 技术 


本 实例 首先 将 图 片 放 置 在 层 中 ， 然 后 将 层 的 visibility 属性 设置 为 hidden， 使 层 被 隐藏 ， 由 于 图 片 放 置 在 层 
中 ， 所 以 图 片 同时 也 被 隐藏 。 


图 设计 过 程 
(1) 实现 预 设 时 间 隐 藏 图 片 的 JavaScript 脚本 代码 如 下 : 


<SCRIPT LANGUAGE="JavaScript”> 
Var sec=10; 
Var timer: 
function hidepicO 
Sec--: 
证 (sec 一 0){ 
textfield.value = "图 片 已 隐藏 ” 
soccerstyle visibility =(soccerstyle visibility 一 "hidden") ? "visible" : "hidden": 
} 
else{ 
textfield.value = "图 片 会 在 "tsec+” 秒 后 隐藏 ": 
setTimeout("hidepicO",1000): 
} 
} 
</SCRIPT> 
(2) 当 页 面 被 加 载 时 调用 hidepicO 函 数 ， 关 键 代码 如 下 : 
<center> 
<input name="textfield”" type="text” size="20"> <br> 
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<DIV ID="soccer” align="center”> 
<img border="0" sre="viewjpg” > 
<DIV> 

‘</center> 


国 秘笈 心 法 

对 于 本 实例 定时 隐藏 图 片 的 效果 ， 在 网 站 中 的 应 用 十 分 广泛 ， 通 过 visibiliy 属性 可 以 实现 图 片 的 隐藏 与 显 
示 ， 由 此 也 可 通过 获取 系统 时 间 来 设置 图 片 在 指定 时 间 内 隐藏 ， 然 后 在 指定 的 时 间 内 再 次 显示 ， 用 法 十 分 灵活 ， 
原理 都 是 一 样 的 。 


实例 390 | 
实用 指数 : 食 食 食 


图 实例 说 明 
有 时 为 了 丰富 页 面 的 显示 效果 ， 将 页 面 制作 成 根据 时 间 变换 页 面 背景 的 样式 ， 这 样 浏览 者 对 此 网 站 不 会 感 
觉 厌 倦 ， 同 时 也 会 觉得 网 站 制作 得 非常 新 颖 。 本 实例 通过 Date 对 象 的 getHours0 方 法 获得 当前 系统 时 间 的 小 时 ， 
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图 14.21 上 午时 间 变换 的 背景 


图 关键 技术 

本 实例 主要 使 用 JavaScript 中 Date 对 象 的 getHours0 方 法 得 到 当前 系统 时 间 的 小 时 , 然后 在 一 定 的 时 间 段 内 
判断 当前 小 时 是 否 符合 指定 的 时 间 段 , 如 果 符 合 则 使 用 document 对 象 的 write0 方 法 在 页 面 中 显示 一 幅 图 片 并 在 
图 片 下 方 输出 指定 的 提示 信息 。 


图 设计 过 程 
(1) 使 用 now.getHours0 函 数 获取 当前 系统 时 间 的 小 时 ,根据 此 时 间 变 换 不 同 的 背景 ， 主 要 JavaScript 脚本 


代码 如 下 : 
‘<script language="javascript"> 
var now = new DateO: 
var hour = now.getHours(): 
if (hour >= 0 && hour <5){ 
document write("<center><img sre="1.jpg’ width-'600' height="399'><center>"); 
document.write("<p>"); 
document.write("<font size = 6 face = 黑体 color =#ff9900 > 现在 是 凌晨 时 间 "+hourt" 点 ， 祝 您 好 梦 </font>"): 
} 
证 (hour>=- 5 && hour <8){ 
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document write("<center><img src- 2.jpg width="600' height=399'><center>"): 
document.write("<p>"); 
document.write("<font size = 6 face= 黑体 color =#ff9900 > 现在 是 早上 时 间 "+hour+" 点 ， 视 您 一 天 心情 愉快 </font>"): 
} 
if (hour >= 8 && hour <11){ 
document.write("<center><img src=3.jpg’ width 一 600 height="399'><center>"); 
ocument. write("<p>"); 
document.write("<font size = 6 face = 黑体 color =#ff9900 > 现在 是 上 午时 间 "+hour+" 点 ， 您 别 忘 了 小 牧 一 会 喝 口 水 </font>"); 


} 
(hour >= 11 Sl 


document.write(" er 6face= 黑体 color =#ffpp900 > 现在 是 中 午时 间 "+hourt" 点 .记得 要 多 吃饭 </font>"); 


} 
if (hour >= 13 &&hour<17)f 
document.write("<center><img src='5jpg width="600' height="399'><center>"); 
document.write("<p>"); 
document.write("<font size = 6 face = 黑体 color =#ff9900 > 现在 是 下 午时 间 "+hourt" 点 ， 久 坐 办 公 室 要 适当 起 身 运动 一 下 </font>"); 
} 
if (hour >= 17 &é& hour < 24){ 
document.write("<center><img src='6jpg' width="600' height="399'><center>"); 
document.write("<p>"); 
document.write("<font size = 6 face = 黑体 color =#ff9900> 现 在 是 晚上 时 间 "thour+" 点 ， 要 注意 早点 入 睡 </font>"); 
} 
</script> 
(2) 添加 一 段 CSS 样式 ， 代 码 如 下 : 
<style type="text/css "> 
body { 
background-color: #FFFFFF:; 


2 
图 秘笈 心 法 

JavaScript 中 的 Date 对 象 的 getHours0 方 法 返回 的 是 小 时 ， 返 回 值 是 一 个 数字 ， 在 0 一 23 之 间 ， 表 示 包 含 或 
开始 于 此 Date 对 象 表示 的 瞬间 的 一 天 中 的 小 时 (用 本 地 时 区 进行 解释 )。 
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图 实例 说 明 

在 一 些 招商 的 网 站 中 ， 页 面 中 包含 着 大 量 的 广告 信息 ， 有 时 会 使 用 一 
些 网 页 特效 来 吸引 浏览 者 。 本 实例 为 了 使 图 片 链接 更 具有 吸引 力 ， 在 图 片 eet ~ IA’ | 
中 增加 了 不 停 闪烁 的 效果 ， 运 行 结果 如 图 14.22 所 示 。 Eee EE 证 | 
图 关键 技术 

本 实例 主要 是 对 层 进行 操作 ， 利 用 glint0 函 数 对 三 目 运 算 符 设置 图 片 4 
的 隐藏 与 显示 状态 ,并 添加 setTimeout0 在 预 设 时 间 内 重复 执行 此 操作 ， 从 
而 实现 图 片 闪烁 的 效果 。 | 
图 设计 过 程 


图 Imemet | SP 弹 式 襄 用 到 > 下 100%， ~ 


14.22 不 停 闪 烁 的 图 片 


(1) 编写 JavaScript 脚本 代码 ， 使 用 setTimeoutO 调 用 glint0 方 法 ， 设 
置 图 片 的 显示 与 隐藏 状态 ， 代 码 如 下 : 


<SCRIPT LANGUAGE="JavaScript> 
var counter = 0; 
function soccerOnloadO 
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} 


function glintO 
{ 


setTimeout("glintO", 200): 
divl.style visibility = (divl.style visibility 一 "hidden ?visible : "hidden 


sare 
(2) 在 index.jsp 页 面 中 把 图 片 加 入 层 中 用 于 设置 显示 和 隐藏 ， 代 码 如 下 : 
<body onload=" 

<div ID="div1" SIEE position: absolute; left 150; top: 0"> 


a 最 新 上 市 图 片 </font> </a> 
<ldiv> 
</body> 


用 秘笈 心 法 

三 目 运 算 符 的 语法 格式 如 下 : 

< 表达 式 1>?< 表 达 式 2>:< 表 达 式 3>; 

其 中 ,“?” 运 算 符 的 含义 是 : 如 果 表 达 式 1 的 值 为 真 ， 则 求 表达 式 2 的 值 并 把 它 作为 整个 表达 式 1 的 值 ; 
如 果 表 达 式 1 的 值 为 假 ， 则 求 表 达 式 3 的 值 并 把 它 作为 整个 表达 式 1 的 值 。 


| > a 
图 实例 说 明 


在 浏览 网 站 的 过 程 中 , 经 常会 看 到 页 面 中 漂浮 的 或 者 上 下 跳动 的 图 片 链接 。 本 实例 将 使 用 JavaScript 实现 一 
个 上 下 跳动 的 图 片 。 在 页 面 加 载 后 ， 图 片 将 会 从 左 向 右上 下 跳动 ， 当 图 片 移动 到 页 面 的 左 侧 时 ， 图 片 又 会 从 左 
侧 向 右 移动 ， 如 图 14.23 所 示 。 


局 miemetlSFEES 局 且 可- 125w -省 


14.23 上 下 跳动 的 图 片 


图 关键 技术 


本 实例 中 的 技术 要 点 是 实现 图 片上 下 跳动 ， 上 下 跳动 的 图 片 在 屏幕 中 有 一 定 的 限制 ， 当 图 片 向 下 移 到 指定 
位 置 时 ， 图 片 将 会 迅速 反弹 ， 然 后 继续 跳动 。 
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(1) 实现 图 片上 下 跳动 的 JavaScript 代码 如 下 : 
<script language="JavaScript> 
varballWidth = 40: 
var ballHeight = 40; 
BallSpeed = 10; 
var maxBallSpeed = 50; 
Var XMax; 


var yDir 
var superballRunning = true; 
var tempBallSpeed; 
Var currentBallSre; 
var newXDir; 
Var newYDir: 
function initializeBallO { 
xMax = document.body.clientWidth 
yMax = document.body.clientHeight 
document.all("superball").style.visibility = "visible"; 
setTimeout(moveBall0'.1000); 
} 
function moveBallO { 
if (superballRunning — true) { 
calculatePosition(); 
document.all("superball").style.left = xPos + document.body.scrollLeft; 
document.all("superball").style.top = yPos + document.body.scrollTop; 
setTimeout(moveBallO',50); 
} 


} 
function calculatePosition() { 
if (xDir — "right") { 
if (xPos > (xMax - ballWidth - BallSpeed)) { 
xDir= "left"; 
} 


人 
else if (xDir — "left") { 
if (xPos < (0 + BallSpeed)) { 
xDir = "right"; 
} 
| 


if (yDir =— "down") { 
if (yPos > (yMax - ballHeight - BallSpeed)) { 
yDir = "up"; 
} 
} 


elseif (yDir — "up") { 
if (yPos < (0 + BallSpeed)) { 
yDir ="down"; 
} 
} 
if (xDir — "right") { 
xPos =xPos + BallSpeed: 


} 
else if (xDir — "left") { 
xPos =xPos - BallSpeed: 
3 
else { 
XPos = xPos; 


1 
if (yDir — "down") { 
yPos =yPos + BallSpeed; 
} 
elseif (yDir — "up") { 
yPos =yPos - BallSpeed: 
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} 
</style> 
(3) 在 页 面 中 编写 一 个 <span> 标 记 ， 用 此 来 引用 插入 CSS 样式 ， 并 把 图 片 放 在 层 中 ， 代 码 如 下 : 
<p><a href="http://www.mingrisoft.com" style="cursor:pointer "> 
</a></p> 
<a href="http://www.mingribook.com" style="cursor:pointer "> 
<span id="superball"> 
<img name="superballlmage”" src="jb.jpe" height="150" width="150" border="0"> 


图 秘笈 心 法 


本 实例 主要 是 在 JavaScript 中 ， 应 用 scrollLeft 和 scrollTop 属性 动态 修改 图 片 相对 页 面 的 位 置 来 实现 的 。 


实例 393 
实用 指数 : 食 食 食 


图 实例 说 明 


本 实例 使 用 JavaScript 实现 了 一 个 能 够 左右 晃动 的 图 片 ， 当 页 面 被 加 载 后 ， 图 片 就 会 从 左 向 右 移动 ， 在 移动 
到 一 定 范围 内 后 又 开始 向 左 移动 ， 如 此 反复 执行 ， 实 例 运 行 结果 如 图 14.24 所 示 。 
息 无 标量 文 档 - Windows Internet Explorer [ee x™™) 
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次 收 夫 ”| 曲 " 因 评 动 广告 图 片 _ 固 天 三 文档 x 到 
国 Intemet | 保护 楼 式 : 启 有 给- 有 100% ~ 


14.24 左右 晃动 的 图 片 


图 关键 技术 

本 实例 主要 通过 JavaScript 自 定义 的 两 个 函数 对 图 片 的 位 置 进行 移动 , rect0 函 数 用 于 指定 图 片 位 置 , moveO 
函数 用 于 设置 图 片 移动 的 范围 。 然 后 应 用 setTimeout0 方 法 ， 每 隔 10 毫秒 调用 一 次 move0 函 数 ， 从 而 实现 左右 
无 间断 晃动 的 效果 。 
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图 设计 过 程 
(1) 使 用 JavaScript 脚本 实现 左右 晃动 效果 的 图 片 ， 关 键 代码 如 下 : 
function move(picobj.picmovewidth.c) 
{ 
window_width = document.body.offsetWidth; 
imgobj = document.images[picobj]; 
image_ width = imgobj.width; 
Xx1 = imgobij.style.left: 
X= Number(x1.substring(0.x1.length-2)); 
if(c—0){ 
if (picmovewidth — 0) { 
right_margin = window_width - image_width; 
Tect(x,right_margin, 1); 
} 
else { 
right_margin =x + picmovewidth - image_width: 
if (picmovewidth <x + image_width) 
window.alert("No space for moving!"); 
else 
Tect(x,right_margin,1); 
} 
} 
else { 
if (picmovewidth =— 0) 
right_margin = window_width - image_width; 
else { 
X= Math.round((window_width-picmovewidth)/2); 
Tight_margin = Math.round((window_width+picmovewidth)/2)-image_width; 
} 
Tect(x.right_margin,1); 
l 
} 
</script> 
(2) 在 页 面 中 添加 要 左右 晃动 的 图 片 ， 然 后 再 利用 setTimeout0 方 法 每 隔 10 毫秒 调用 一 次 moveO 函 数 ， 代 


码 如 下 : 
<a href="http://www.mingrisoft.com"> 
So src="mrbook.jpg" width=170 height=113 name="picture" style='position: absolute: top: 10px: left: 30px:' border=0> 
a language="JavaScript"> 
setTimeout("move(picture.600.1)".10); 
</script> 


图 秘笈 心 法 

本 实例 用 到 了 JavaScript 中 String 类 的 subString(startIndex.endIndex) 函 数 ， 应 用 它 可 以 截取 某 个 字符 串 的 子 
串 ， 截取 时 是 从 startIndex 位 置 开始 截取 到 endIndex 位 置 ( 不 包括 endIndex 位 置 的 字符 )， 如 果 不 指定 endIndex 
参数 ， 则 会 一 直 截 取 到 此 字符 串 的 末尾 。 
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图 实例 说 明 

本 实例 实现 了 在 页 面 中 际 动 的 图 片 及 变形 效果 ， 在 页 面 被 加 载 时， 图 片 会 随意 球 动 ， 并 且 在 际 动 的 过 程 中 
改变 图 片 本 身 的 形状 ， 当 飘动 的 图 片 移动 到 页 面 的 边缘 时 ， 图片 会 马上 反弹 到 页 面 中 继续 移动 ， 效 果 如 图 14.25 
和 图 14.26 所 示 。 
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个 和 和 的 请 图 片 - Windows ntemet Eplorer 请 E 登 秆 动 的 训 形 图片- Windows Internet Explorer [ET 一 > 一 | 
人 Ca http://192.16... a| IXNPang Pp 芝 口 - 因 np1119216.. wt s+ [XD sing Pp 
9 宽 收 B 天 | 遍 缕 守 网站 > 捷 | 网 页 快讯 库 ~ 
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图 全 Internet | 保护 迟 式 :启用 名 或 125% 号 全 Internet | 保护 么 式 : 启用 《人 | 有 五 125% ~ 
图 14.25 ”页面 刚 被 载 入 时 14.26 载 入 一 定时 间 时 


图 关键 技术 


本 实例 主要 应 用 了 div 层 和 Math 对 象 的 random0 方 法 。 而 实现 图 片 在 移动 标 动 过 程 中 变幻 形状 ,主要 是 通 
过 简单 的 判断 使 图 片 在 指定 范围 变 大 或 缩小 。 

本 实例 中 ， 在 页 面 被 加 载 时 ， 首 先 层 会 向 右 下 角 位 置 开 始 移动 并 且 改 变 图 片 形 状 ， 当 层 的 位 置 等 于 页 面 的 
边界 时 ， 根 据 randomO 函 数 随机 获取 反弹 后 的 方向 ， 使 层 的 x 与 y 坐标 加 上 指定 的 值 或 减少 指定 的 值 ， 然 后 继 
图 设计 过 程 

(1) 利用 JavaScript 脚本 实现 移动 的 变幻 形状 效果 的 图 片 ， 代 码 如 下 : 

<SCRIPT LANGUAGE="JavaScript”> 

/使 图 片 开始 随意 移动 

Var isNS = ((navigator.appName 一 "Netscape") && (parseInt(navigator.appVersion) >= 4)); 


ml 
Var _style ="; 


Var wwidth, wheight; 
Var ydir = 十 + 


Varx=1; 
vary=1; 
var xl,yl; 


iisNS) { 


clearTimeout(id3); 
wwidth = documentbody.clientWidth - 55; 
wheight = document body .clientHeight - 50; 


id3 = setTimeout(randomdir0'. 20000): 
animate(); 
function 


} 

else { 

; (Math floor(Math randomO*2)) ? ydir=--": ydir="++: 
id2 = setTimeout(randomdirO', 20000): 

} 
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function animateO { 
eval(x'+xdir); 
eval(y'+ydin); 
f(sNS) { 
Picture_div. moveTo((x+pageXOffse).(y+pageYOffset)) 
} 
else { 
Picture_divpixelLeft = x+document.body.scrollLeft: 
Picture_div.pixelTop = ytdocument bodyscrollTop: 
} 


if(isNS) 和 
if (picture_div.top <= 5+pageYOffset) ydir = :+H: 
if (picture_div.top >= wheight+pageYOffset) ydir 
if (picture_div.left >= wwidth+pageXOffset) x 
if (picture_div.left <= 5+pageXOffset) xdir= + 


else { 
if (picture_div.pixelTop <= 5+document.body.scrollTop) ydir = + 
if (picture_div.pixelTop >= wheight+document.body.scroll Top) ydir 
if (picture_div.pixelLeft >= wwidth+document.body.scrollLeft) xdir 
if (picture_div.pixelLeft <= 5+document.body.scrollLeft) xdir = 二; 


} 
idl = setTimeout(animate0' 30); 
} 

(2) 图 片 反 复 地 变幻 形状 由 大 变 小 ， 再 由 小 变 大 ， 代 码 如 下 
Var size = 1; 
Var bool = true; 
function distortionO{ 
if (document.all) 
这 (bool 一 true){ 

Sizett; 


u 

if(size—100) { 
Size-; 
bool=false; 

} 

if(size—10){ 
Sizett; 
bool=true: 


} 
if(bool=—false){ 


Size-; 


} 
imagel.width = 130+size; 
imagel .height = 120-size; 
setTimeout("distortion()",40); 
} 
</script> 
(3) 在 页 面 被 加 载 时 调用 windowsize0 方 法 和 distortion() 方 法 ， 当 页 面 改变 大 小 时 调用 windowsize() 方 法 ， 
代码 如 下 : 
<div id="picture_div" style="position:absolute: visibility:visible; left:Opx: top:0px: z-index:-1"> 
<a href = "http://www.mingrisoft.com"> 
<img name="imagel”" src="mrfish.jpg” border="0"> 
<a> 
</div> 
<script language="javascript”> 
Var picture_div=eval('document.’+ allt’picture_div'+ style): 
‘</script> 


图 秘笈 心 法 

在 JavaScript 中 ，navigator 表示 浏览 器 对 象 ， 然 后 调用 其 name 属性 返回 浏览 器 的 名 称 。 在 基于 Netscape 的 
浏览 器 中 ， 这 个 属性 的 值 是 Netscape。 在 正中 , 这 个 属性 的 值 是 Microsoft Internet Explorer。 其 他 浏览 器 可 以 正 
确 地 表示 自己 或 者 伪装 成 其 他 的 浏览 器 以 达到 兼容 性 。 
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14.4 图片 的 动画 效果 


图 实例 说 明 

本 实例 主要 使 用 了 CSS 样式 中 滤 镜 的 位 ph 和 人 lipv 样式 来 实现 图 片 的 水 平 翻 转 和 垂直 翻转 效果 。 当 用 户 单 
击 “ 水 平 翻转 ”按钮 时 ， 图 片 会 进行 水 平 翻 转 ， 当 单 击 “ 垂 直 翻 转 ” 按 钮 时 ， 图 片 会 进行 垂直 翻转 ， 运 行 效果 
如 图 14.27 和 图 14.28 所 示 。 


TI 寺 林 征明 目 科 # 


WE EE 


14.28 ”垂直 翻转 效果 的 图 片 


图 关键 技术 


Flip 是 CSS 滤 镜 的 翻转 属性 ，FlipH 代表 水 平方 向 翻转 ，FlipV 代表 垂直 方向 翻转 ， 它 们 的 原理 都 是 制作 一 
个 镜像 ， 然 后 让 指定 元 素 在 水 平 或 垂直 方向 实现 翻转 。 


图 设计 过 程 
(1) 利用 JavaScript 的 image 对 象 实现 图 片 的 fiphtum0 水 平 翻转 函数 和 flipvturm0 垂 直 翻 转 函 数 ， 代 码 如 下 : 


<script language="javascript”> 
function fliphturn0{// 水 平 翻转 

imagell.style.filter = imagell.style.filter —"fliph"?"":"fliph"; 
} 


function flipvturmnO{/ 垂 直 翻 转 
image22.style.filter = image22.style.filter —"flipV"?2"":"flipV"; 
} 


</script> 
(2) 在 网 页 中 添加 表单 及 相关 表单 元 素 ， 并 使 用 “水 平 翻转 ”按钮 调用 fliphturm0 函 数 ， 使 用 “垂直 翻转 ” 
按钮 调用 fipvturn0 函 数 ， 代 码 如 下 : 


<table width="433" border="2" align="center" cellpadding="3" cellspacing="4" bordercolor="#cOcOcO" bgcolor="#FFFFFF"> 
<tr> 
<td colspan="2"><div align="center"><font color="#6954ed" size="6"> 水 平 翻转 </font></div></td> 

</tr> 

<tb> 
<td width="165"><font color="1ightblue”" face=" 短 从 "size="4> 原 图 : </font></td> 
<td width="252"”><font color="lightblue” face=" 短 厅 " size="4"~ 水 平 翻转 执 行 结果 : </font></td> 

<t> 

<t> 
<td><img sre="festjpg” border="0"id="image1"></td> 
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<td><img src="fest.jpg” border="0"id="image11"></td> 
<tr> 
<tr> 

<td colspan="2"><div align="center "><font color="#6954ed” size="6 必 垂直 翻转 </font></div><htd> 
<a> 
<tr> 

<td><font color="lightblue”" face=" 短 体 " size="4> 原 图 : </font></td> 

<td><font color="ightblue" face=" 作 供 " size="4" > 垂直 翻转 执行 结果 : </font></td> 
< 
<tr> 

<td><img sre="testjpg” border="0" id="image2"></td> 

<td><img sre="testjpg” border="0" id="image22"></td> 


<input type="button”" name="button1” value=" 欢 买 筋 状 " onClick="fliphturn0 〇 "> 

&nbsp:&nbsp; &nbsp;é&nbsp;&nbsp; 

<input type="bution” name="button2" value=" 秋 瑞 翻 状 " onClick="flipvtun()"> 

</center> 
图 秘笈 心 法 

FlipH 是 一 个 水 平 翻转 对 象 的 滤 镜 ， 当 把 FlipH 加 载 到 一 个 对 象 上 时 ， 该 对 象 将 产生 一 个 水 平 镜 像 ， 以 此 来 
实现 水 平 翻转 的 效果 ; FlipV 是 一 个 垂直 翻转 对 象 的 滤 镜 ， 当 把 FlipH 加 载 到 一 个 对 象 上 时 ， 该 对 象 将 产生 一 个 
垂直 镜像 ， 以 此 来 实现 垂直 翻转 的 效果 。 这 两 个 滤 镜 都 没有 参数 ， 可 直接 使 用 。 
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实用 指数 : 但 食 食 


力 实例 说 明 


图 片 的 水 波 倒 影 的 显示 效果 会 让 人 感到 很 新 颖 ， 如 有 些 博客 网 站 中 有 人 
将 自己 的 照片 设置 为 水 波 倒影 效果 。 运 行 本 实例 ， 在 成 功 加 载 页 面 后 ， 页 面 
会 显示 出 水 波 倒影 效果 的 图 片 ， 如 图 14.29 所 示 。 


图 关键 技术 


本 实例 主要 应 用 CSS 样式 中 的 wave 滤 镜 来 实现 ， 语 法 格式 如 下 : 

Filter:wave(Add=true(false)，Frep= 频 率 ，LightStrength= 增 强 光 效 ，phase= 偏 移 量 ，Strength= 强 度 ) 

参数 说 明 

@ Add: 表示 对 象 是 否 按照 波纹 样式 打 乱 ， 取 值 为 true 或 false。 

@ Freq: 表示 生成 波纹 的 频率 ， 也 就 是 指定 在 对 象 上 共 需 要 多 少 个 波纹 。 

目 LightStrength: 表示 生成 波纹 增强 光 效 ， 取 值 范围 在 0 一 100 之 间 。 

@ phase: 用 于 设置 正弦 波 开始 的 偏 移 量 ， 这 个 值 的 通用 值 为 0， 取 值 范围 在 0 一 100 之 间 。 这 个 值 代表 开始 
时 偏 移 量 占 波长 的 百分比 ， 如 值 为 25 时 代表 正弦 波 从 90 度 〈360*25%) 的 方向 开始 。 


图 14.29 水 波 倒影 效果 


图 设计 过 程 
利用 JavaScript 实现 水 波 倒影 效果 ， 关 键 代 码 如 下 : 
<script language="JavaScript"> 


fanctionmapO = { 
setInterval("img1 .filters .wave phase+ 一 10".100): 


} 
if(document.all) { 

document write(<Center><img id-imgl sre="+document.all mappedimg srct” style="filter:-wave(strength=3,freq=3.phase=0.lightstrength=30) 
blur0 flipvO"></Center>"): 
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window.onload = map: 
} 
/script> 


图 秘笈 心 法 


本 实例 首先 是 在 页 面 中 添加 了 一 幅 图 片 ， 然 后 通过 自 定义 JavaScript 函数 map0 动 态 创建 一 幅 图 片 ， 最 后 在 
自 定义 函数 中 将 动态 创建 的 图 片 的 滤 镜 设置 为 水 波 倒 影 (wave) 特效 。 


图 实例 说 明 

在 美化 页 面 时 ， 有 一 种 渐 隐 渐 现 的 图 片 效 果 会 给 人 一 种 好 奇 心理 。 本 实例 是 把 图 片 从 模糊 渐渐 变换 成 清晰 
状态 ， 再 由 清晰 渐渐 变 为 模糊 状态 ， 反 复 执 行 此 操作 ， 最 后 实现 图 片 渐 隐 渐 现 的 效果 ， 运 行 结果 如 图 14.30 和 
图 14.31 所 示 。 


MING RI KE JI 
用 思想 创造 未 来 
E 


图 14.30 渐变 为 清晰 状态 的 图 片 14.31 渐变 为 模糊 状态 的 图 片 
图 关键 技术 
本 实例 主要 应 用 了 CSS 样式 中 的 滤 镜 alpha 的 opacity 属性 来 改变 图 片 的 透明 度 , 并且 通 过 一 些 简单 的 条 件 
判断 ， 使 图 片 能 够 在 指定 的 时 间 内 循环 渐 隐 渐 现 。 
图 设计 过 程 
(1) 利用 JavaScript 实现 渐 隐 渐 现 的 效果 ， 代 码 如 下 : 
<script language="JavaScript’> 
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(2) 在 页 面 中 添加 一 个 图 片 使 用 滤 镜 效果 ， 代 码 如 下 : 
<img ste—"dhijpg" name—"mylmage" border—"1" style—"filter-alpha(opacity—0)"> 
图 秘笈 心 法 
在 JavaScript 中 ，document 对 象 的 all 属性 是 正 4.0 及 以 上 版 本 的 专 有 属性 ， 是 一 个 表示 当前 文档 的 所 有 对 
象 的 数组 , 它 不 仅 包括 页 面 上 可 见 的 实体 对 象 , 还 包括 一 些 不 可 见 的 对 象 , 如 注释 。 在 all 数组 中 元 素 不 分 层次 ， 
它 是 按照 在 文档 中 出 现 的 先后 顺序 平行 地 罗列 。 
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图 实例 说 明 
本 实例 将 使 用 i -个 图 片 探照灯 的 特效 ， 当 页 面 被 加 载 时 ， 这 个 探照灯 的 效果 会 在 图 上 重复 左 
右 扫 描 ， 将 其 中 一 部 分 显示 为 光亮 状态 而 其 他 部 分 显示 为 灰暗 状态 ， 实 例 运行 结果 如 图 14.32 和 图 14.33 所 示 。 


图 14.32 ”探照灯 效果 1 14.33 ”探照灯 效果 2 


图 关键 技术 


本 实例 使 用 了 CSS 滤 镜 技术 中 的 light 属性 , 通过 该 属性 调用 addPoint0 和 MoveLight0 方 法 来 设置 图 片上 光 
源 的 大 小 ， 并 移动 光源 。 
图 设计 过 程 
(1) 使 用 JavaScript 实现 探照灯 效果 ， 代 码 如 下 : 


<script language="javascript”> 
if (document.all SS 和 imagelight){ 


Var y=new Array(); 
if (imagelight.length—nulD){ 
imagelight[0]=document.all.imagelight: 
x[0]=0; 
heading[0]="right"; 
[Oo]=imagelight[0].height 
imagelight[0].filters.light.addPoint(100,50,100,255,255,255.90); 


for (i=0;i<imagelight.length:i++){ 
x[i=0; 


heading[ij="right"; 
ylij-imagelight[i] .height: 
imagelight[i] filters.light.addPoint(100,50.100,255,255.255.90); 
} 
} 
function light(cur){ 
imagelight[cur] .filters.light.MoveLight(0.x[cur].y{cur].200.-1): 
if (x[cur]<imagelight[cur].width+200&&-heading[cur]—"right") 
x[cur}t=10; 
else if (x[cur]>imagelight[cur].width+200){ 
heading[cur]="left": 
x[cur]-=10; 


} 
else if (x[cur]>-200&&x[cur]<-185){ 


592 


第 14 章 图 像 操 作 


heading[cur]="right"; 
x[cur}t=10; 

} 

elsef 
x[cur]-=10; 
heading[cur]="left"; 

》 


} 

if (document.all&-&:window.imagelight) { 

if (imagelight.length—nul) 
setInterval("light(0)",imagelight[0].speed); 

else 
for (t=0;t<imagelight.length:t++){ 
var temp='setInterval("light(+t+")",'+imagelight[t].speed+")'; 
2 

} 

</SCRIPT> 


(2) 在 页 面 中 编写 CSS 样式 ， 并 标记 一 幅 图 片 ， 代 码 如 下 : 


<center> 
<IMG id="imagelight" src="testjpg" speed="20"> 
/center> 


图 秘笈 心 法 

本 实例 使 用 了 CSS 样式 中 的 addPoint0 方 法 ， 
用 于 移动 锥 形 光 的 焦点 ， 也 就 是 图 片上 光源 的 焦点 
向 左 或 向 右 移动 的 效果 。 


它 是 为 图 片上 的 光源 滤 镜 增加 点 光 的 ， 而 movelight0 方 法 是 
或 光源 的 原点 ， 通 过 这 两 个 方法 的 x、y 属性 来 达到 控制 光源 
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图 实例 说 明 

在 高 科技 设备 领域 里 都 有 雷达 扫描 装置 ， 当 雷达 运作 时 ， 就 会 
有 一 个 45% 的 图 片 在 雷达 中 旋转 。 本 实例 将 使 用 JavaScript 实现 类 
似 雷 达 扫 描 的 图 片 效 果 ， 运 行 结果 如 图 14.34 所 示 。 
图 关键 技术 

本 实例 主要 使 用 Math 对象 的 cos0 和 sin0 方 法 来 获取 某 一 个 角 
度 , 然后 使 图 片 根据 此 角度 进行 旋转 。 本 实例 通过 CSS 样式 的 图 片 图 14.34 雷达 扫描 效果 的 图 片 
滤 镜 的 3 个 方法 ， 来 实现 雷达 扫描 特效 的 方式 。 

口 moveLight: 移动 图 片 的 照明 位 置 。 

口 light.addCone: 设置 图 片 的 照明 中 心 点 及 照明 度 的 大 小 。 

口 light.addAmbient: 设置 图 片 的 阴影 效果 。 
图 设计 过 程 

(1) 利用 JavaScript 编写 雷达 扫描 图 片 的 效果 ， 代 码 如 下 : 


‘<script language="Javascript”> 
var X=20// 角 度 
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var Y=20// 角 度 
var Z=40// 角 度 


var change = (2 * Math.PI)/360 


Y=r+r+Math.sin(X1*change); 
X1 += 10; 
if(X1 一 360) X1=0; 
img1 filters[0] .moveLight(0.X,Y.2,1): 
. mytimeout=setTimeout('movearea()',80); 
function beginscan0{ 
img]l filters.light.addCone(192,110,0,X,Y,0,255.,0,150,20); 
img]1 .filters.light.addAmbient(0,255,0,50) 
Var x=0; 
movearea(); 
} 
</script> 
(2) 在 页 面 中 添加 一 幅 图 片 ， 并 在 页 面 被 加 载 时 调用 beginscan0 函 数 ， 代 码 如 下 : 
<title> 雷 达 式 扫描 图 片 特效 </title> 
</head> 
<body onLoad="beginscan();"> 
<center> 
<IMG SRC="testjpg" ID="img1" STYLE="filterlight0"> 
/center> 


图 秘笈 心 法 
本 实例 在 设置 雷达 扫描 效果 的 光源 时 ， 用 到 了 CSS 样式 中 的 addAmbient0 方 法 ， 用 于 设置 包围 的 光源 ， 语 


法 格式 如 下 : 
addAmbient (iRed.iBlue,iStrength) 
参数 说 明 


@ iRed: 必 选 参数 ， 整 数值 ， 指 定 红 色 值 ， 取 值 范围 在 0 一 255 之 间 。 

@ iBlue: 必 选 参数 ， 整 数值 ， 指 定 蓝 色 值 ， 取 值 范围 在 0 一 255 之 间 。 

@ iStrength: 必 选 参数 ， 整 数值 ， 指 定 光 源 强 度 ， 取 值 范围 在 0 一 100 之 间 。 

其 实 本 例 的 效果 就 是 滤 镜 添加 环境 光 ， 环 境 光 是 无 方向 的 ， 并 且 均 匀 地 酒 在 页 面 的 表面 ， 环 境 光 有 颜色 和 
强度 值 ， 可 以 为 对 象 添 加 更 多 的 颜色 ， 它 通常 和 光源 一 起 使 用 ， 无 返回 值 。 


实例 400 


实用 指数 : 真 广 食 


图 实例 说 明 

在 一 些 交易 平台 网 站 ， 如 淘宝 网 、 拍 拍 网 等 ， 经 常会 发 现 一 些 图 片 以 圈 的 形状 旋转 的 效果 ， 如 此 反复 地 执 
行 。 本 实例 将 实现 图 片 的 旋转 效果 ， 运 行 结果 如 图 14.35 所 示 。 
图 关键 技术 

本 实例 主要 应 用 了 Math 对 象 的 sin0 和 cos0 方 法 ， 通 过 取得 正弦 值 和 余弦 值 ， 然 后 加 一 些 算法 来 改变 当前 
层 的 位 置 ， 使 图 片 在 页 面 中 旋转 。 
图 设计 过 程 

(1) 利用 JavaScript 的 Math 对 象 的 正弦 和 余弦 值 来 改变 当前 层 的 位 置 ， 代 码 如 下 : 
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<script language="Javascript”> 
var x1=200; 
Var x2=200; 
var timer: 
var r=60; 
vari=0; 
function eddyphoto(i) { 
Var ob=document.all("divround"); 
‘ob.style.posTop =r*Math.sin((i*+Math.PI)/180)+x1: 
‘ob.style.posLeft = r*Math.cos(G*Math PD/180)+x2; 
itl; 
证 (>100){ 
window.clearTimeout(timer); 
} 


else{ 
if (i>360){ 
i=0x=r+1; 
} 


timer=set Timeout("eddyphoto("+Hi+")",10); 


} 
eddyphoto(0); 
</script> 


图 14.35 页 面 旋转 的 图 片 
(2) 在 页 面 中 添加 一 个 层 ， 并 在 层 中 添加 要 旋转 效果 的 图 片 ， 代 码 如 下 : 


<div id="divround" style="width:50pt; top:198.75pt: left:256.5pt position:absolute: z-index:0"> 
起 src="temp.jpg"> 


图 秘笈 心 法 


本 实例 在 获取 <div> 层 的 顶端 和 左边 时 ， 用 到 了 posTop 和 posLeft 属性 ， 其 中 posTop、posLeft 和 Top、Left 
- 样 ， 但 区 别 在 于 ，Top 和 Left 固定 了 元 素 单位 为 px， 而 PosTop、PosLeft 只 是 一 个 数值 。 


初级 | 
实用 指数 : 但 食 人 , 


图 实例 说 明 


本 实例 将 实现 一 个 改变 形状 的 图 片 。 运 行 本 实例 ， 在 页 面 中 的 居中 位 置 将 显示 一 张 图 片 ， 之 后 图 片 会 开始 
改变 形状 ， 先 由 大 变 小 ， 当 图 片 达到 指定 的 大 小 时 ， 图 片 又 会 由 小 变 大 ， 运 行 结果 如 图 14.36 所 示 。 
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图 14.36 改变 形状 的 图 片 
图 关键 技术 


本 实例 的 实现 很 简单 ， 主 要 通过 一 些 简单 的 站 条 件 语句 的 判断 ， 动 态 修改 图 片 的 宽度 和 高 度 ， 使 图 片 能 够 
在 指定 的 范围 内 变 大 变 小 。 


图 设计 过 程 


(1) 创建 用 于 实现 改变 图 片 形状 大 小 的 JavaScript 函数 ， 关 键 代码 如 下 : 
<script language="javascript"> 
/改变 图 片 形状 
Var size = 1; 
Var bool = true; 
function imgsizeO{ 
if (document.all) 


} 
if(bool=—false){ 
Size—; 


} 
imagel.width = 130 + size: 
imagel .height = 120 - size: 
SetTimeout("imgsizeO".30): 
} 
</script> 
(2) 在 页 面 中 添加 图 片 ， 并 在 页 面 加 载 时 调用 imgsize0 函 数 ， 代 码 如 下 : 
<body onLoad="imgsize() > 
<center> 
<img name="imagel ”" src="mr.jpg” border="0"> 
</center> 


国 秘笈 心 法 
本 实例 主要 是 在 自 定义 的 JavaScript 函 数 中 , 首先 获取 图 片 对 象 , 然后 再 设 定 判断 范围 ,最 后 通过 setTimeoutO 
函数 循环 执行 这 个 自 定义 的 JavaScript 函数 ， 在 函数 中 动态 修改 图 片 的 宽度 和 高 度 ， 从 而 实现 预期 效果 。 


14.5 选择 头像 图 片 


头像 选择 在 网 络 程序 中 的 应 用 十 分 频繁 ， 它 不 仅 使 用 很 方便 ， 而 且 可 以 使 整个 网 页 看 起 来 更 有 活力 。 例 如 ， 
在 论坛 中 需要 选择 自己 喜欢 的 头像 来 模拟 个 人 的 肖像 ， 这 种 接近 现实 生活 的 模拟 既 形象 又 生动 ， 使 网 页 增色 
不 少 。 
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实例 402 
实例 实用 指数 : 但 伍 食 ; 
力 实例 说 明 

在 论坛 或 留言 德 的 用 户 注册 页 面 中 ， 加 入 头像 的 选择 功能 ， 可 以 使 网 站 增色 不 少 。 运 行 本 实例 ， 在 “头像 
选择 ”下 拉 列 表 框 中 选择 某 个 数字 时 ， 将 在 下 面 的 列表 框 中 显示 该 数字 所 代表 的 头像 ， 如 图 14.37 所 示 。 
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图 14.37 选择 头像 图 片 
图 关键 技术 
本 实例 主要 通过 下 拉 列 表 框 的 onChange 事件 调用 JavaScript 自 定义 函数 实现 ， 在 该 自 定义 函数 中 ， 关 键 是 


应 用 下 拉 列 表 框 的 selectedIndex 属性 和 option[n].value 属性 ， 以 此 来 获取 选择 头像 所 对 应 的 文件 名 ， 并 赋值 给 
Image 对 象 的 src 属性 ， 用 于 在 页 面 中 实时 显示 头像 信息 。 


图 设计 过 程 
(1) 创建 index.jsp 页 面 , 并 在 该 页 面 中 添加 下 拉 列 表 , 选项 的 值 为 图 片 文件 的 名 称 ,下 拉 列 表 框 的 onChange 
事件 执行 的 操作 是 调用 showimg0 函 数 ， 代 码 如 下 : 
<t> 
<td> 头 像 选 择 ，</td> 
<td> 


‘<select name="selectimage" size="1" id="selectimage" onChange="showimg();"> 
‘<option selected>1</option> 


<t> 
<tr 


<td>&nbsp:</td> 
<td ><img sre="Images/1.jpe” name="img" width="60" height="60" border="] ></td> 
< 
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(2) 自 定义 JavaScript 函数 showimg0， 用 于 实现 用 户 改变 下 拉 列 表 的 值 时 显示 相应 的 图 片 信息 ， 代 码 
如 下 : 
<script language="javascript"> 
function showimg() 
ee = "Images/"+document forml.selectimage selectedIndex+"jpg": 
二 


图 秘笈 心 法 


通过 本 实例 ， 读 者 可 以 实现 在 QQ 聊天 室 中 通过 下 拉 列 表 选 择 头像 的 功能 ， 还 可 以 实现 在 人 事 档 案 管 理 系 
统 中 通过 下 拉 列 表 选 择 头像 来 选择 员工 的 个 人 肖像 。 


实例 403 


图 实例 说 明 

在 用 户 注册 的 网 页 中 加 入 头像 选择 功能 可 以 使 网 站 更 具有 吸引 力 ， 而 在 选择 头像 时 通过 弹出 的 网 页 对 话 杠 
选择 ， 则 更 直观 、 方 便 。 运 行 本 实例 ， 单 击 图 14.38 中 的 “更 改 头 像 ” 超 链接 ， 将 弹出 如 图 14.39 所 示 的 网 页 对 
话 框 ， 在 用 户 选择 某 个 头像 后 ， 当 前 窗口 将 自动 关闭 ， 并 且 超 链接 上 将 会 显示 刚刚 选择 的 头像 ， 如 果 在 头像 选 
择 页 面 没有 任何 选择 动作 ， 则 将 显示 默认 的 头像 。 


0 coher el | 
全 本 网 wo -I 好 |X | 1 | 了 
畜生 赤 | 雇 全 ] 训 网 站 仿 | 所 孢 至 从 
| 买 硬 1 | 买 像 2 | 买 像 9 天 伪 1 头像 5 
下 Me TiR | 如 ch 
| 合 ra | 
| 严 信 5 | 闷 售 7 | 详 价 5 ”头像 9” 便 10 
仿 | 本 
十 起 | 
二 [ES ES EE 
| 
= Ee] 
全 mremer | 保护 模式 : 启 人 125% = 和 = 
图 14.38 ”更改 头像 图 14.39 在 页 面 中 选择 头像 


图 关键 技术 


本 实例 主要 是 通过 window 对 象 的 showModalDiaglog0 方 法 实现 的 , 但 需要 注意 的 是 , 如 果 用 户 在 此 页 面 中 
没有 找到 想 要 的 头像 ， 且 直接 关闭 了 对 话 框 ， 若 此 处 不 做 处 理 ， 则 页 面 中 显示 图 片 的 位 置 将 会 显示 一 个 无 图 片 


的 框 。 为 了 解决 这 个 问题 ， 需 要 使 用 JavaScript 的 Global 对 象 的 undefined 属性 ， 语 法 格式 如 下 : 
undefined 


功能 : 返回 undefined 的 一 个 初始 值 。 


[加 说 明 : undefined 属性 是 Global 对 象 的 一 个 成 员 ， 此 属性 在 脚本 引擎 初始 化 后 可 用 ， 如 果 已 声明 了 一 个 变量 
但 还 没有 初始 化 , 那么 该 变量 的 值 就 是 undefined; 如 果 还 没有 声明 变量 , 那么 就 不 能 将 其 与 undefined 
进行 比较 ， 但 是 可 以 将 该 变量 的 类 型 与 字符 串 undefined 进行 比较 。 

国 设计 过 程 

(1) 在 页 面 中 添加 默认 头像 和 “更 改 头 像 ” 超 链 接 ， 此 链接 触发 的 是 执行 JavaScript 自 定 义 函数 deal0， 


第 14 章 图 像 操 作 
关键 代码 如 下 : 


<table width="1896" height="125” border="]" align="center” cellpadding="3" cellspacing="2" bordercolor="#0066FF" bgcolor="#99ccf"> 
<t> 


<td height="89"><div align="center"><img src="Images/1 .jpg” name="img" width="60" height="60"></div></td> 
<t> 
<t> 
<td height="30"><div align="center”><a href=#" onClick="deal0:">[ 更 改 头 像 ]</a></div></td> 
< 
able 
(2) JavaScript 自 定义 deal0 函 数 ， 是 在 打开 网 页 对 话 框 时 ， 首 先 会 自己 选择 头像 ， 如 果 选 中 并 单 击 头 像 就 
把 值 赋 给 “更 改 头 像 ”图 片 的 src 属性 ， 代 码 如 下 : 
<script language="javascript"> 
function dealO{ 
Var someValue; 
someValue=window showModalDialog(ImageListjsp'"vdialogWidth=520px:\ 
dialogHeight=400px:status=-no:help=no:scrollbars-no:resizable=yes); 
if (someValue 一 Undefined){ 
someValue="0"; 


} 
document,img.src= "TImages/"+someValue+"jpg": 
} 
/script> 
(3) 创建 ImageListjsp 页 面 用 于 存放 头像 列表 ， 此 页 显示 全 部 的 头像 信息 ， 并 提供 返回 更 改 头 像 页 面 的 超 
链接 ， 主 要 代码 如 下 : 
<tr align="center”> 
<td valign="tfop "><a href=#" onClick="selectImage('1)"> 
<img src="Images/1Jpg" width="60" height="60" border="0"></a></td> 
<td valign="top "><a href="#" onClick="selectImage(2")"> 
<img src="Images/2.jpg" width="60" height="60" border="0"></a></td> 
<td valign="top"><a href="#" onClick="selectImage('3)"> 
<img src="Images/3Jpg”" width="60" height="60" border="0"></a></td> 
<td valign="top "><a href="#" onClick="selectImage(4)"> 
<img src="Images/4.jpg" width="60" height="60" border="0"></a></td> 
<td valign="tfop"><a href="#" onClick="selectImage('5)"> 
<img src="Images/5Jpg”" width="60" height="60" border="0"></a></td> 
</tr><tr align="center "> 
<td valign="top"><div align="center" class="style1 > 头像 1</div></td> 
<td valign="fop ”><div align="center” class="style1 > 头像 2</div></td> 
<td valign="top"><div align="center" class="style1 > 头像 3</div></td> 
<td valign="top"><div align="center" class="style1 "> 头像 4</div></td> 
<td valign="top"><div align="center" class="style1 ”> 头像 5</div></td> 
<tr> 


国 秘笈 心 法 


应 用 Global 对 象 的 undefined 属性 , 当 显 式 地 测试 变量 或 将 变量 设置 为 undefined 时 , undefined 是 很 有 用 的 。 


14.6 图 片 的 其 他 效果 


实例 404 


实用 指 就: 页 女 女 


图 实例 说 明 


本 实例 将 实现 一 个 类 似 幻 灯 片 播放 图 片 的 效果 。 运 行 本 实例 ， 单 击 “ 下 一 张 ”按钮 ， 会 显示 下 一 张 图 片 ， 
单 击 “ 上 一 张 ”按钮 ， 则 会 显示 上 一 张 图 片 。 如 果 用 户 3 秒 内 没有 任何 操作 ， 图 片 会 自动 播放 至 下 一 张 ， 运 行 
结果 如 图 14.40 所 示 。 
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|@ memet | 人 FP 本 区 局 二 125% ~ 


图 14.40 幻灯 片 播放 图 片 


图 关键 技术 


本 实例 主要 应 用 了 CSS 样式 的 filter 滤 镜 的 revealTrans 属性 ， 该 属性 提供 了 更 加 多 变 的 转换 效果 。 下 面 对 
revealTrans 属性 进行 详细 说 明 。 
revealTrans 属性 的 语法 格式 如 下 : 


TevealTrans(Transition, Duration) 

参数 说 明 

@ Transition: 表示 切换 方式 ， 它 有 24 种 方式 。 

@ Duration: 表示 切换 时 间 ， 以 秒 为 单位 。 

revealTrans 属性 的 Transition 参数 取 值 如 表 14.3 所 示 。 


表 14.3 revealTrans 属性 的 Transition 参数 取 值 


Transition 参数 值 切换 效果 Transition 参数 值 切换 效果 
0 矩形 从 大 至 小 12 随机 溶解 
1 矩形 从 小 至 大 13 从 上 下 向 中 间 展 开 
迷 圆 形 从 大 至 小 14 从 中 间 向 上 下 展开 
3 圆 形 从 小 至 大 15 从 两 边 向 中 间 展 开 
4 向 上 推 开 16 从 中 间 向 两 边 展开 
5 向 下 推 开 17 从 右上 向 左下 展开 
6 向 右 推 开 18 从 右 下 向 左上 展开 
z 向 左 推 开 19 从 左上 向 右 下 展开 
8 垂直 形 百 叶 窗 20 从 左下 向 右上 展开 
9 水 平 形 百叶 窗 21 随机 水 平 细 纹 
10 水 平 棋盘 22 随机 垂直 细 纹 
11 垂直 棋盘 23 随机 选取 一 种 特效 

图 设计 过 程 


(1) 首先 自 定义 翻动 图 片 ， 代 码 如 下 : 

<!-- 定 义 翻 动 图 片 的 自 定义 函数 -> 

‘<script language="javascript"> 

var plPic = new ImageO: 

var gIndex =0; 

function SlideImg(index){ 
gIndex = index; 
if (Microsoft Intemet Explorer 一 navigator.appName){ 

document.images["SlideImg"] filters.item(0).ApplyO: 

. 


document images["SlideImg"].sre = sPicAm[index][O]: 
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if (Microsoft Intemet Explorer 一 navigatorappName){ 
document images["SlideImg"] filters.item(0).playO: 


(2) 利用 JavaScript 自 定义 函数 Nexttmg0 和 PrevImg0， 代 码 如 下 : 
-上 一 张 、 下 一 张 -> 
function PrevImgO{ 
Index = ((gIndex-1)<0?(sPicArr length-1):(gIndex-1)): 
SlideImg(gIndex) 


} 
function NextImgO{ 

glIndex = ((gIndex+1)>—sPicArr.length?0:(gIndex+1)): 
SlideImg(gIndex); 


(3) 编写 自动 播放 的 自 定义 函数 autoImgO， 代 码 如 下 : 
<!-- 自 动 播放 --> 
Var sid; 
function autoImgO{ 
if(sid—nulD) 
sid = setInterval(NextImg0'. 3000); 
} 


(4) 创建 图 片 集合 并 设置 其 路 径 ， 代 码 如 下 : 
<!-- 设 置 图 片 的 路 径 --> 
<script language="javascript”> 
Var SPicArT = new Array(); 
SPicArr[0] = new Array("images/1.ipg"); 
sPicArr[1] = new Array(“images/2.jpg"); 
sPicAr[2] = new Array("images/3.jpg"); 
sPicArr[3] = new Array("images/4.jpg"); 
SPicArr[4] = new Array("images/S.jpe"); 
sPicAr[5] = new Array("images/6.jpg"); 
sPicArr[6] = new Array("images/7.jpg"); 
sPicAr[7] = new Array("images/8.jpg"); 
sPicArr[8] = new Array("images/9.jpg"); 
sPicAr[9] = new Array("images/10jj jpe" 
sPicAr[11] = new Array("images/11.jpg"):; 
sPicArr[12] = new Array("images/12.jpg"); 
sPicArr[13] = new Array("images/13.ipg"); 
SPicAr[14] = new Array("images/14.jpg"); 
‘</script> 


(5) 在 页 面 中 调用 自 定义 的 函数 和 图 片 ， 代 码 如 下 : 
<body onLoad="autoImg(); "> 
<table border="] " align="center" cellpadding="3" cellspacing="2" bordercolor="lightblue”> 
<tr> 
<td align="center"><input name="/firstbutton" type="button" id="firstbutton” value=" 上 一 焉 "onClick="PrevImg0):"> 
<input name="nextbutton” type="button" id="nextbutton”" value=" FT—R" onClick="NextImgO:"></td> 
<td> 
<div align="center"><img src="images/1jpg" name="SlideImg" width="60" height="60" border="1" id="SlideImg" style="BORDER-TOP: #000 1px 
solid; FILTER: revealtrans(duration=2.0,transition=5); BORDER-BOTTOM: #000 1px solid" onMouseOut=;> 
<div></td> 
<t> 
</table> 
body> 


图 秘笈 心 法 


根据 本 实例 的 实现 ， 读 者 可 以 实现 在 网 站 中 广告 图 片 的 播放 ， 还 可 以 实现 在 网 站 中 新 网 栏目 的 新 闻 图 片 的 
播放 。 


初级 
实用 指数 : 依依 请 


图 实例 说 明 
在 开发 网 络 程序 时 ， 通 常 需要 对 网 站 的 功能 流程 进行 详细 说 明 。 程 序 的 开发 者 很 重视 如 何 将 某 个 网 站 的 功 
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能 清晰 地 描述 出 来 。 解 决 这 一 问题 的 最 好 办 法 就 是 制作 导航 地 图 ， 该 地 图 不 仅 可 以 美化 网 站 ， 同 时 也 可 以 更 加 
详细 地 说 明 该 网 站 的 具体 功能 及 操作 流程 ， 实 例 运 行 结果 如 图 14.41 所 示 。 


走 遇 鞋 明 区 


14.41 “导航 地 图 


图 关键 技术 

本 实例 主要 通过 建立 图 像 地 图 实现 导航 地 图 。 图 像 地 图 通常 被 用 在 设置 图 像 链接 或 图 像 导 航 方面 。 可 以 通 
过 设置 图 像 地 图 热 区 的 链接 ， 完 成 商场 内 各 个 商品 专区 的 链接 。 设 置 图 像 地 图 的 “替代 ”文本 可 以 在 图 像 中 起 
到 对 商品 专区 导航 的 作用 。 建 立 图 像 热 区 也 就 是 建立 图 像 地 图 。 图 像 地 图 “属性 ”面板 如 图 14.42 所 示 。 
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图 14.42 图 像 地 图 “属性 ”面板 


图 像 “ 属 性 ”面板 中 的 图 像 地 图 工具 共 分 为 3 种 ， 分 别 是 矩形 、 圆 形 和 多 边 形 。 建 立 图 像 地 图 非常 简单 ， 
只 要 选择 任意 一 种 图 形 后 ， 在 适当 位 置 按 住 左 键 拖 动 鼠标 即 可 建立 相应 热 区 。 

通过 单 击 图 像 热 区 “属性 ”面板 中 “链接 ” 域 后 的 浏览 图 像 文 件 夹 图 标 添 加 相应 图 标 ， 在 弹出 的 “选择 文 
件 ” 对 话 框 中 选择 所 要 链接 的 文件 ， 或 者 直接 输入 超 链接 的 路 径 及 文件 名 。 


图 设计 过 程 
(1) 首先 在 Photoshop 中 制作 需要 建立 图 片 热 区 的 图 片 。 
(2) 在 Dreamweaver 中 选择 “插入 ”一 “图 像 ”命令 ， 插 入 一 张 图 片 ， 使 用 鼠标 左 键 单 击 选中 此 图 片 ， 此 
时 在 “属性 ”控制 面板 中 可 以 看 到 此 图 片 的 相关 属性 。 
(3) 初次 使 用 “属性 ”控制 面板 时 ， 其 默认 为 “简化 ”形式 ， 单 击 右 下 方 的 向 下 箭头 可 打开 其 扩展 属性 模式 。 
(4) 此 时 可 以 通过 “属性 ”控制 面板 设置 图 像 热 区 。 


图 秘笈 心 法 

根据 本 实例 , 读者 可 以 在 开发 宠物 网 站 程序 时 ,对 宠物 进行 购买 时 使 用 导航 地 图 ， 在 开发 医药 管理 系统 时 ， 
对 药品 进行 出 库 /入 库 管 理 时 使 用 导航 地 图 ; 在 开发 电子 商城 网 站 时 ， 对 成 功 进入 商城 后 进行 商品 选 购 时 使 用 导 
航 地 图 。 
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MW 播放 音乐 
MH ”插入 Flash 动画 
MW 播放 视频 
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15.1 播放 音乐 


高 级 


实体 
实例 406 实用 指数 : 信人 广 福全 


图 实例 说 明 


程序 员 在 进行 网 络 程序 开发 时 ， 经 常 喜欢 在 网 页 中 添加 一 些 特殊 的 效果 。 例 如 ， 为 网 页 设置 背景 音乐 ， 当 
浏览 者 登录 网 站 时 ， 设 置 的 背景 音乐 将 会 播放 。 本 实例 便 实 现 了 这 一 功能 ， 运 行 结果 如 图 15.1 所 示 。 


注意 事项 :出险 版 画 时 该 白面 下 的 所 有 帖子 帮 档 贡院 , 请 慎重 ! 可 以 考虑 开关 或 者 关闭 版 画 1 
[版 面 管理 ] [添加 版 画 ] [修改 排 床 ] [编辑 此 论坛 】 [六 院 此 论坛 ] 


1 .版 面 名 称 : 网 站 建设 | 版 主 名 称 :pyj 

版 而 说 明 : 网站 建 识 包 基 借用 SP，J5F、ASF 了 ET 等 语言 
[版 而 管理 ] [ 掺 加 版 画 ] [修改 排斥 ] [编辑 此 论坛 】 [对 除 此 沦 坛 ] 
了 版 面 各 称 : 网 站 建设 | 版 主 帮 称 .31 


图 1 为 网 页 设置 背景 音乐 


图 关键 技术 


本 实例 主要 应 用 <bgsound> 标 记 实 现 为 网 页 设置 背景 音乐 的 效果 ， 通 过 该 标记 可 以 嵌入 多 种 格式 的 音乐 文 
件 。<bgsound> 标 记 的 语法 格式 如 下 : 

<bgsound src="file_ name" loop="loop name" > 

参数 说 明 

@ stc: 背景 音乐 的 路 径 。 

@ loop: 播放 的 循环 次 数 ， 取 值 为 -1 或 者 Infinite 时 表示 无 限 次 循环 。 
4 注意 : 使 用 标记 <bgsound> 谈 入 背景 音乐 的 网 页 ， 在 网 页 最 小 化 时 ， 音 乐 停止 。 
图 设计 过 程 

(1) 创建 index.jsp 页 面 ， 在 该 页 面 中 添加 指定 表格 和 表单 元 素 ， 关 键 代码 如 下 : 

<table width="775" height="741" border="0" align="center” cellpadding="0" cellspacing="0”> 

六 ‘width="775" height="433" background="ht 2,jpg">éenbsp:</td> 


</tr> 
</table> 


(2) 应 用 <bgsound> 标 记 向 指定 的 网 页 中 添加 背景 音乐 ， 代 码 如 下 : 
<bgsound sre="pyMP3" loop="-1"> 


国 秘笈 心 法 


bgsound 支持 的 音乐 格式 有 wav、mid、mp3 等 。 在 此 标签 中 还 有 以 下 两 个 参数 比较 常用 。 

口 “volume: 用 于 控制 音量 大 小 ， 取 值 范围 在 -1000 一 0 之 间 。 0 为 最 大 音量 

口 ”balance: 表示 左右 声 道 ， 取 值 范围 在 -1000~1000 之 间 。 负 值 为 将 声音 发 送 给 左 声 道 ， 正 值 为 将 声音 
发 送 给 右 声 道 ，0 则 为 立体 声 。 

bgsound 并 不 是 标准 的 标签 , 所 以 对 浏览 器 的 支持 并 不 好 , 它 只 限于 正 , 而 在 Netscape 和 Firefox 中 并 不 适用 。 


第 15 章 多 媒体 应 用 


实用 指数 : 去 让 雯 


图 实例 说 明 
在 编写 网 络 程序 时 ， 可 以 为 指定 的 网 页 添加 背景 音乐 ， 设 置 的 背景 音乐 也 可 以 是 随机 的 ， 当 浏览 者 浏览 

页 时 每 次 播放 的 背景 音乐 都 是 不 一 样 的 ， 这 样 可 以 使 浏览 者 有 一 种 新 鲜 感 而 不 会 因为 循环 地 听 着 同一 首 音 乐 而 

感到 厌倦 ， 实 例 运行 结果 如 图 15.2 所 示 。 


网 站 建设 本 版 版 主 ，snl 


网 站 建设 包括 使 用 ASP JSP ASP._ NET 语言 * 创 陵 时 间 :2007-4-22 17:08: 41 
* 主题 /帖子 :6/7 
* 今 日 主题 数 :0 


图 15.2 随机 播放 背景 音乐 


图 关键 技术 

实现 本 实例 时 ， 首 先 需要 应 用 Array 对 象 将 背景 音乐 的 文件 名 保存 到 数组 中 ， 然 后 随机 选择 要 播放 的 文件 
名 ， 并 通过 <bgsound> 标 记 播放 背景 音乐 。 下 面 对 Array 对 象 进行 详细 介绍 。 

Array 对 象 用 于 创建 数组 ， 数 组 是 有 序数 据 的 集合 。 每 一 个 数组 中 的 每 个 元 素 都 是 一 个 独立 的 值 ， 并 且 使 用 
new 关键 字 来 定义 数组 ， 数 组 的 索引 值 从 0 开始 。Array 对 象 的 常用 属性 如 表 15.1 所 示 。 


表 15.1 Array 对 象 的 常用 属性 


对 于 一 个 由 规则 表达 式 匹 配 生成 的 数组 ， 这 个 属性 返回 此 匹配 的 索引 位 置 
对 于 一 个 由 规则 表达 式 匹 配 生成 的 数组 ， 这 个 属性 返回 原始 字符 串 
返回 数组 中 的 元 素 个 数 
用 于 在 定义 数组 时 添加 新 的 属性 和 方法 ，prototype 是 数组 对 象 的 静态 属性 
Array 对 象 常用 的 方法 如 表 15.2 所 示 。 
表 15.2 Array 对 象 常用 的 方法 


方 ” 法 描述 
concat 返回 一 个 新 数组 ， 这 个 新 数组 是 由 两 个 或 更 多 个 数组 组 合 而 成 的 
join 返回 字符 串 值 ， 其 中 包含 了 连接 到 一 起 的 数组 的 所 有 元 素 ， 元 素 由 指定 的 分 隔 符 分 隔 开 来 
toLocaleString 返回 一 个 日 期 ， 该 日 期 使 用 当前 区 域 设置 并 已 被 转换 为 字符 串 
toStrin 返回 对 象 的 字符 串 表 示 
ubounds 返回 在 VBArray 的 指定 维 中 所 使 用 的 最 大 索引 值 
图 设计 过 程 


(1) 创建 index.jsp 页 面 ， 根 据 需 要 在 指定 的 页 面 中 添加 表格 或 表单 元 素 ， 关 键 代 码 如 下 : 
<table width="785" height="668" border="0" align="center” cellpadding="0" cellspacing="0"> 
<tr> 


605 


Java Web 开发 实例 大 全 (基础 卷 ) 


<td width="784" height="668" background="0.gif">&nbsp;</td> 

</tr> 
</table> 

(2) 应 用 Array 对 象 实 现 随 机 背景 音乐 的 播放 ， 关 键 代码 如 下 : 
<script language="javascript ”> 
Var arrayname=new Array(); 
for (var i=0;i<5:it+) 
{ 

arrayname[i]="music"+(i+1)+".mp3"; 


} 

Var x=(Math floor(Math randomO+4)+1): 

document write(<bgsound src=+"+arrayname[x]}+"™"+ loop="infinite">"); 
</script> 


图 秘笈 心 法 
本 实例 主要 应 用 JavaSeript 脚本 ， 把 背景 音乐 文件 保存 到 Array0 数 组 中 ， 然 后 使 用 for 语句 循环 这 个 Amray 


数组 下 的 每 一 个 元 素 ， 再 应 用 Math 对 象 的 floor0 和 random() 方 法 随机 返回 这 个 数组 的 一 个 元 素 ， 最 后 使 
document 对 象 的 write0 方 法 输出 一 段 <bgsound> 标 签 的 背景 音乐 。 


高 级 | 
实用 指数 : 人 丰 让 太 : 
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图 实例 说 明 


在 进行 网 络 程序 开发 时 ， 有 时 需要 为 网 站 添加 一 些 背景 音乐 或 
MIDI 音乐 等 。 同 时 也 可 以 向 网 页 中 添加 多 个 音乐 ， 如 何在 网 页 中 对 
添加 的 多 个 音乐 进行 选择 性 播放 ? 如 本 实例 主要 对 网 页 中 的 MIDI 音 (etre 
乐 进行 选择 播放 。 运 行 本 实例 ,通过 下 拉 列 表 框 选择 所 要 播放 的 MIDI 再 开 9 时 个。 但 是 ， 联 明 的 ， 你 省 诉 我 ， 我 们 的 日 子 
音乐 ， 单 击 “ 播 放 MIDI 音乐 ”按钮 进行 音乐 的 播放 ， 程 序 运行 结果 | 
如 图 15.3 所 示 。 
图 关键 技术 EE 

本 实例 主要 应 用 Options 数组 实现 MIDI 音乐 选择 ， 下 面 将 对 该 区 | 
数组 进行 详细 介绍 。 

Options 数组 是 Select 对 象 的 一 个 属性 ， 即 选择 框 中 的 所 有 选项 
(<OPTION>) 的 一 个 列表 。Options 数组 的 相关 属性 如 表 15.3 所 示 。 


表 15.3 ”Options 数组 的 相关 属性 


全 留言 时 间 ; 2007-01-16 13:05:00 。 回复 | 贡 除 


图 15.3 MIDI 音乐 选择 


属 性 描述 
defaultSelected 选项 列表 中 的 默认 选项 
index 选项 列表 中 某 选项 的 索引 位 置 
length 选项 列表 中 的 选项 数 〈<OPTIONS>) 
name 选项 列表 的 名 字 (NAME 特性 ) 
selected 表示 选项 列表 中 某 选 项 <OPTION> 是 否 被 选中 的 一 个 布尔 类 型 值 
selectedIndex 选项 列表 中 已 选中 的 <OPTION> 的 索引 〔 位 置 ) 
text 选项 列表 中 <OPTION> 标 记 后 的 文本 
value 选项 列表 中 的 VALUE 特性 
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图 设计 过 程 


(1) 创建 index.jsp 页 面 ， 在 该 页 面 中 添加 所 需要 的 表单 及 相关 元 素 ， 关 键 代 码 如 下 : 
<FORM NAME="form1"> 
<SELECT NAME="list”> 
‘<option value="].mid">1.mid</option> 
‘<option value="2.mid">2.mid</option> 
<option value="3.mid">3.mid</option> 
<SELECT> 
<Palign="lef"><INPUTTYPE=-BUITONVALUE=" 帮 就 MIDT 章 秀 "onClick="Mycheck(forml .list.options[form1 .list.selectedIndex].value)"> 
FORM> 
(2) 通过 自 定义 JavaScript 脚本 定义 Mycheck0 函 数 ， 用 于 实现 打开 一 个 窗口 ， 代 码 如 下 : 
<SCRIPT LANGUAGE="JavaScript”> 
function Mycheck(smD){ 
ggg=window.open(sml."ming","toolbar=no.location=no,directories=no,status=no,scrollbars=no.,resizeable=no, 
copyhistory=no,width=200,height=30") 
} 


</SCRIPT> 


图 秘笈 心 法 


Java 在 多 媒体 处 理 方面 的 确 优势 不 大 , 但 是 在 程序 中 有 时 又 需要 一 些 音乐 作为 点 级 , 如 果 要 播放 音乐 为 wav 


等 波形 音频 文件 ， 此 时 最 好 的 格式 就 是 MIDI 文件 。 
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图 实例 说 明 


边 了 


现在 很 多 网 站 都 提供 在 线 音乐 欣赏 功能 ， 其 中 颇 受 用 户 欢迎 的 就 是 在 线 连续 播放 音乐 ， 这 样 用 户 就 可 以 一 


[ 作 一 边 欣赏 自己 喜欢 的 音乐 了 ， 既 不 耽误 工作 ， 又 放松 了 心情 。 本 实例 将 介绍 如 何 实现 在 线 连 续 播放 音乐 ， 


运行 本 实例 ， 在 页 面 中 将 显示 网 站 提供 的 歌曲 列表 ， 用 户 可 以 在 自己 喜欢 的 歌曲 前 面 选中 复 选 框 ， 选 择 要 播放 
的 歌曲 ， 也 可 以 单 击 “ 全 选 ” 超 链接 或 “反选 ” 超 链接 ， 进 行 全 选 或 反选 ， 然 后 单 击 “ 连 续 播放 ”按钮 ， 将 打 
开 歌 曲 连播 页 面 ， 播 放 所 选 歌曲 ， 如 图 15.4 所 示 ， 还 可 以 选择 顺序 播放 或 随机 播放 ， 默 认 情 况 下 采用 的 是 顺序 
播放 。 


训 AN5 的 请 温 


15.4 ”顺序 播放 歌曲 


图 关键 技术 


器 ， 


本 实例 中 使 用 的 技术 要 点 大 部 分 与 媒体 播放 器 有 关 , 主要 应 用 <objec 人 标记 调用 Windows Media Player 播放 
并 通过 JavaScript 对 播放 器 进行 动态 控制 。 通 过 HIML 提供 的 <object> 标 记 可 以 调用 指定 媒体 播放 器 控件 来 
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播放 多 媒体 文件 ，<object> 的 语法 格式 如 下 : 
<object classid="clsid" id="id” width="width” height="height"></object> 


参数 说 明 


classid: 用 于 指定 使 用 的 浏览 器 插件 ， 如 调用 Windows Media Play 播放 器 ， 可 以 将 classid 属性 的 值 设置 


为 clsid:22D6F312-BOF6-11D0-94AB-0080C74C7E95。 


id: 用 于 指定 该 对 象 的 id 值 。 
width: 用 于 指定 媒体 播放 器 的 宽度 。 
height: 用 于 指定 媒体 播放 器 的 高 度 。 


在 <object> 标 记 中 ， 还 可 以 包括 <param> 子 标记 ， 该 标记 用 于 设置 <object> 标 记 所 调用 的 媒体 播放 器 的 相关 


属性 ， 
口 
口 
口 
口 
口 


比较 常用 的 属性 介绍 如 下 。 
url: 用 于 指定 要 播放 文件 的 路 径 ， 可 以 是 绝对 路 径 也 可 以 是 相对 路 径 。 
volume: 用 于 控制 音量 ， 值 为 0 一 100 之 间 的 整数 ， 表 示 0% 一 100%。 
playcount: 用 于 指定 播放 次 数 。 
enableerrordialogs: 用 于 指定 是 否 启用 错误 提示 报告 。 
autostart: 用 于 指定 是 否 自动 播放 ，1 表示 自动 播放 ，0 表示 不 自动 播放 。 


本 实例 通过 调用 Windows Meida Player 播放 器 的 具体 代码 如 下 : 
<object classid='clsid:22D6F312-BOF6-11D0-94AB-0080C74C7E95'id-wghMediaplayer name=wghMediaplayer width=360' height 64> 
<param name='playcount value=100'><param name='enablecontextmenu value= 0> 


<param name='enableerrordialogs' value='0> 
<param name='ShowStatusBar value="-1> 
</object> 


在 JavaScript 中 ， 可 以 通过 以 下 属性 和 方法 对 播放 器 进行 动态 控制 ， 分 别 介绍 如 下 。 


口 


OOOOOO 


autoRewind 属性 : 用 于 设置 当 停止 播放 时 是 否 返 回 到 电影 剪辑 的 开始 部 分 ， 值 为 tue 时 ， 表 示 返 回 到 
电影 剪辑 的 开始 部 分 ， 值 为 false 时 ， 表 示 不 返回 到 电影 剪辑 的 开始 部 分 。 

sendPlayStateChangeEvents 属性 : 用 于 指定 是 否 支持 播放 状态 改变 事件 ， 值 为 true 或 false。 

fileName 属性 : 用 于 指定 要 播放 的 文件 。 

attachEvent0 方 法 : 用 于 为 某 一 事件 附加 其 他 的 处 理事 件 。 

detachEvent() 方 法 : 用 于 拆 分 某 一 事件 绑 定 的 处 理事 件 。 

play() 方 法 : 用 于 开始 播放 。 

stop0 方 法 : 用 于 停止 播放 。 


图 设计 过 程 


1) 创建 ndex:jsp 页 面 ， 通 过 JSTL 标签 将 页 面 重 定向 到 歌曲 列表 页 面 ， 关 键 代码 如 下 : 


<c:redirect url="/SongInfo’> 


<c:param name="action" value="query"/> 


</c:redirect> 
(2) 创建 songListjsp 页 面 ， 在 该 页 面 中 首先 应 用 JSTL 的 <c:forEach> 标 签 循 环 显示 歌曲 列表 ， 然 后 在 每 首 
歌曲 前 面 添 加 一 个 标记 是 否 选中 的 复 选 框 ， 关 键 代码 如 下 : 
<%@taglib prefix="c" uri="http://java.sun.conmyisp/jstl/core"%> 
<c:forEach var="songForm" items="$ {list}"> 


<tr> 
<td height="30” align="center” bgcolor="#FFFFFF"><input type="checkbox” class="noborder” id="playld” name="playld” value=" 


S${songForm.id} ></td> 


<td bgcolor="#FFFFFF">&nbsp:${songForm songName} </td> 

<td bgcolor="#FFFFFF">&enbsp:${songForm.singer}</td> 

<td bgcolor="#FFFFFF ">&enbsp:${songForm specialName}</td> 

<td bgcolor="#FFFFFF">8&enbsp:${songForm.songType} </td> 
< 


</c:forEach> 
(3) 在 songListjsp 页 面 的 合适 位 置 添加 用 于 控制 复 选 框 全 选 或 反选 的 复 选 框 和 “连续 播放 ” 超 链 接 ， 关 
键 代码 如 下 : 
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<tr> 
<td width="8896" height="40" align="right" style="padding-right:10: color:#78A700"> 
[<a style="cursor:hand;" onClick="CheckAll(form1 .play1d)"> 全 选 </a>/<a style="Cursor:hand;” onClick="contraCheck(forml.play1d)"> 反 选 ] 
<div id="ch" style="display:none’> 
<input name="playld” type="checkbox” class="noborder” value="0"> 
<Jdiv></td> 
<td width="1296" align="right” style="padding -right: 10px"><a style="cursor:hand: ” onClick="continuePlay(forml play1d form1)"><img ste="images/ 
button_c.gif” width="60" height="17" border="0"></a></td> 
<!-- 层 用 于 放置 隐藏 的 checkbox 控件 ， 因 为 当 表单 中 只 有 一 个 checkbox 控件 时 ， 应 用 JavaScript 获得 其 length 属性 值 为 undefine--> 
< 
(4) 在 songListjsp 页 面 的 <head> 标 记 中 ， 编 写 自 定义 的 JavaScript 函数 CheckAll0， 用 于 控制 复 选 框 的 全 
选 ， 具 体 代码 如 下 : 
1/ 控制 复 选 框 的 全 选 操作 
function CheckAll(elementsA){ 
for(i=0:i<elementsA length:it+){ 
elementsA[i].checked = true; // 设 置 复 选 框 为 选中 状态 
} 
(5) 在 songListjgp 页 面 的 <head> 标 记 中 , 编写 自 定义 的 JavaScript 函数 contraCheck0， 用 于 控制 复 选 框 的 


反选 ， 具 体 代 码 如 下 : 


function contraCheck(elementsA){ // 控 制 复 选 框 的 反选 操作 
for(i=0;i<elementsA. length:it+){ 
if(elementsA[i].checked){ 
elementsA[i].checked = false; // 设 置 复 选 框 为 非 选中 状态 
Jelse{ 
elementsA[i].checked = true; /设置 复 选 框 为 选中 状态 
} 


} 
(6) 在 songListjsp 页 面 的 <head> 标 记 中 ， 编 写 自 定义 的 JavaScript 函数 continuePlay0， 用 于 判断 用 户 是 
否 选 择 了 要 播放 的 歌曲 , 如 果 没 有 选择 , 则 提示 “请 选择 要 播放 的 歌曲 !”; 否则 提交 表单 进行 播放 。 continuePlayO 
函数 的 具体 代码 如 下 : 
function continuePlay(playId,formname){ 
Var flag = false; 
for(i=0;i<playId.length:it+){ 
if(playId[i].checked){ 
flag = true: 
break: /跳出 循环 
} 


} 
if(!flag){ 
alert(" 请 选择 要 播放 的 歌曲 ! "); 
Teturm false; 
jelsef 
formname.submit(): /提交 表单 
} 


} 
(7) 在 歌曲 信息 相关 的 Servlet 中 ， 编 写实 现 歌曲 连播 的 方法 continuePlay0。 在 该 方法 中 ， 首 先 获取 要 进 
行 连续 播放 歌曲 的 ID， 并 将 获取 的 ID 数组 连接 为 一 个 以 逗号 分 隔 的 字符 串 ， 然 后 从 数据 库 中 查询 要 播放 歌曲 
的 信息 ， 并 保存 到 HttpServletRequest 对 象 中 ， 最 后 将 页 面 重 定向 到 歌曲 连播 页 面 。continuePlay0 方 法 的 具体 代 
码 如 下 : 
public void continuePlay(HttpServletRequestrequestHttpServletResponse response) throws ServletException.IOException{ 

ConnDB conn = new ConnDBO): 

response.setContentType("text/html:charset=UTF-8"); 

String ID[]=request.getParameterValues("playId"): // 获 取 要 播放 的 歌曲 ID 

String playID = "™": 

for inti= 0:i<IDlength:itb { 
playID =playID + IDE] + "": 


} 
playID = playID.substring(0. playID.lengthO - 1): /去 除 最 后 一 个 逗号 
String sql= "SELECT* FROM tb _song WHERE id IN ("+playID+")"; 
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System.out printin("SQL: "+sql); 


ResultSet rs = conn_executeQuery(sq]): // 执 行 查询 语句 
List list = new ArrayListO; 
try{ 
/获取 歌曲 文件 的 URL 地 址 


String url = request.getRequestURL() toStringO); 
url = url.substring(0, url lastIndexOf("/") + 1) + "music/"; 


while (rs.next0) { 
SongForm f= new SongForm(); 
fsetSongeName(rs.getString("songName”)); /| 歌曲 名 
fsetFileName(urltrs.getString("fileName”")):; 1/ 歌曲 文件 的 URL 地 址 
list.add(D); 


} 
} catch (SQLException ex) { 
ex.printStack Trace|O; 


De lisb; 
request.getRequestDispatcher("continuePlayjsp") forward(request. 
Tesponse); 
(8) 编写 歌曲 连播 页 面 continueplayjsp， 实 现 按 顺序 或 随机 方式 播放 歌曲 ， 在 页 面 的 合适 位 置 添 加 一 个 表 
单 及 一 张 3 行 2 列 的 表格 ， 并 在 该 表格 的 第 一 行 的 左 侧 单元 格 中 输入 提示 性 文字 “随机 播放 ”， 在 右 侧 的 单元 格 
中 添加 一 个 名 称 为 playType 的 下 拉 列 表 框 ， 该 下 拉 列 表 框 包括 “顺序 播放 ”和 “随机 播放 ”两 个 选项 ， 将 表格 
的 第 3 行 合 并 为 一 个 单元 格 ， 并 在 该 单元 格 中 添加 一 个 用 于 显示 播放 列表 的 列表 框 ， 关 键 代码 如 下 : 


<form name="Jorm1" method="post" action=""> 
<table width="363" height="185" border="0" cellpadding="0" cellspacing="0"> 
<t> 
<td colspan="2"id="myPlayer"> 正 在 加 载 播放 器 .…...</td> 
</tr> 
<t> 
<td width="60"height="35 必 播放 列表 </td> 
<td width="303" align="7ight"> 
<select name="playType" id="playType"> 
<option value="0" selected> 顺 序 播放 </option> 


<option value="] > 随机 播放 </option> 
‘</select></td> 
</t> 
<t> 
<td colspan="2> 


<select name="playList” size="10" id="playList" ondblclick="list_dblClickO:" style=" width:360px ”> 
<c:forEach var="songForm" items="$ {list}"> 
<option value="$ {songForm.fileName} > 
S${songForm.songName} </option> 
</c:forEach> 
‘</select></td> 
<t> 
‘</table> 
</form> 


(9) 编写 自 定义 的 JavaScript 函数 init0， 用 于 在 页 面 加 载 后 调用 Media Player 播放 器 ， 按 顺序 方式 播放 歌 
曲 列表 ， 关 键 代 码 如 下 : 
function initO{ 
document.getElementById("myPlayer").innerHTMIL="<object classid='clsid:22D6F312-BOF6-11D0-94AB-0080C74C7E95' id=wghMediaPlayer name= 


‘wghMediaPlayer’ width="360' height-'64><param name='playcount’ value=100'><param name='enablecontextmenu' value='0><param name= 
‘enableerrordialogs' value='0'><param name='ShowStatusBar value="-1></object> "; 


document.getElementById("wghMediaPlayer").AutoRewind=false: /设置 当 停 止 播放 时 不 返回 到 电影 剪辑 的 开始 部 分 

document.getElementById("wghMediaPlayer").AutoStart=true; /设置 自动 播放 

document.getElementById("wghMediaPlayer").SendPlayStateChangeEVvents=true: 

/ 短 定 播放 状态 改变 事件 

document getElementById("wghMediapPlayer").attachEvent("PlayStateChange".checkPlayStatus): 

if(form1 .playList.options length>0){ 
form1 .playList.options[0].selected=true: /设置 列表 框 的 第 一 个 选项 为 选中 状态 
document.getElementById("wghMediapPlayer").fleName=forml.playListvalue: /指定 歌曲 文件 
document.getElementById("wghMediaPlayer").playO: /开始 播放 
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(10) 编写 自 定义 的 JavaScript 函数 checkPlayStatus0， 用 于 当 播 放 状态 改变 时 连续 播放 歌曲 ， 关 键 代 码 
如 下 : 


function checkPlayStatusO{ 
try{ 
if(document.getElementById("wsghMediaPlayer") PlayState 一 0){ // 当 播放 状态 为 停止 时 
document getElementById("wghMediaplayer").detachEvent("PlayStateChange"”.checkPlayStatus); 
// 拆 分 播放 状态 改变 事件 
document.getElementById("wghMediaPlayer").stopO: /停止 播放 
if(form1.playType.value—0){ // 表 示 顺 序 播放 
if(form1 .playList.options.selectedIndex<form]1 .playList.options.length-1){ 
form] .playList.options[form1 playList.options.selectedIndex+1].selected=true; 
Jelse{ 
form1 .playList.options[0].selected=true; /设置 列表 框 的 第 一 个 选项 为 选中 状态 
jelsef /随机 播放 


var randomValue=-Math round(Math random0 * (forml.playListoptionsJength - 1)) ; 。 /生成 一 个 0 至 歌曲 总 数 -1 的 随机 整数 
form1 .playList.options[randomValue] .selected=true: 
} 
‘document.getElementById("wghMediaPlayer").fileName=form] .playList.value; 
document.getElementById("wghMediaplayer").playO:; /开始 播放 
setTimeout(document.getElementById("wghMediaPlayer").play0:document.getElementById("wghMediaPlayer").attachEvent("PlayStateChange",chec 
kPlayStatus);,1000); 


jam 
alert(" 出 错 了 "); 
(11) 在 进行 歌曲 连播 时 ， 为 了 让 用 户 可 以 选择 指定 的 歌曲 开始 播放 ， 还 需要 双击 列表 框 ， 在 指定 歌曲 时 
添加 开始 播放 的 功能 ， 实 现 该 功能 时 ， 需 要 编写 一 个 自 定义 的 JavaScript 函数 ， 这 里 为 list_dblClick0， 在 该 函 
数 中 ， 也 需要 根据 选择 的 播放 器 从 指定 的 歌曲 开始 播放 。list_dblClickO 函 数 的 具体 代码 如 下 ; 


function list_dblClickO{ 


/| 拆 分 播放 状态 改变 事件 

document.getElementById("wghMediaplayer").detachEvent("PlayStateChange".checkPlayStatus); 
document.getElementById("wghMediaPlayer").fileName=form!1 .playList.value; // 将 列表 框 的 值 指定 给 Media Player 播放 器 
document.getElementById("wghMediaPlayer").playO: /开始 播放 


SetTimeout('document.getElementById("wghMediaPlayer").play0:document.getElementById("wghMediaPlayer").attachEvent("PlayStateChange",chec 
kPlayStatus):;', 1000); 
} 


list_dblClick0 函 数 编写 完成 后 ， 还 需要 在 列表 框 的 ondbclick 事件 中 调用 方法 。 
图 秘笈 心 法 


在 连续 播放 音乐 时 ， 通 过 JavaScript 脚本 实现 歌曲 连续 播放 ， 首 先 使 用 document 对 象 的 getElementByIdO 
方法 获取 播放 音乐 的 状态 ， 如 是 否 为 播放 状态 、 停 止 播放 等 。 再 在 continueplayjsp 中 设置 歌曲 播放 的 初始 化 
方法 init0 和 当 播放 状态 改变 时 执行 的 方法 checkPlayStatus0， 而 在 实现 以 上 方法 时 首先 要 使 用 innerHTML 获取 
HTML 中 的 内 容 。 


实例 410 国人 


实用 指数 广 广 让 让 


图 实例 说 明 


在 音乐 网 站 开发 过 程 中 ， 如 果 在 试听 歌曲 模块 中 加 入 同步 显示 LRC 歌词 功能 ， 能 够 为 网 站 增色 不 少 。 本 实 
例 将 介绍 同步 显示 LRC 歌词 的 方法 。 运行 本 实例 ， 在 页 面 中 将 显示 网 站 提供 的 歌曲 列表 ， 单 击 某 一 首 歌曲 后 面 
的 “播放 ” 超 链接 , 将 打开 在 线 试听 页 面 并 播放 该 歌曲 。 如 果 该 歌曲 提供 了 LRC 歌词 文件 , 还 将 同步 显示 歌词 ， 
运行 结果 如 图 15.5 所 示 。 


611 


Java Web 开发 实例 大 全 (基础 卷 ) 


偏 要 受 更 努力 爱 让 你 明白 

没有 别 条 路 能 走 你 决定 要 不 要 路 我 
讲 不 听 山 爱 看 我 感 完 爱 
等 你 的 依 粮 2 


张 其 京 


疤 也 入 
je Mf 
at Se eh Ea 
怕 兴 明和 


图 15.5 同步 显示 歌词 


图 关键 技术 


本 实例 主要 涉及 LRC 歌词 的 格式 和 读 取 LRC 歌词 的 行 数 两 个 技术 要 点 。 首 先是 LRC 歌词 的 格式 , 在 LRC 
歌词 中 ， 通 过 [MM:SS:MS] 指 定时 间 ， 通 过 [ar: 演唱 者 名 ] 指 定 演唱 者 ， 通 过 [ti: 歌曲 名 ] 指 定 歌 曲名 ， 通 过 [al: 
专辑 名 ] 指 定 专辑 名 ， 通 过 [by: 歌词 编辑 者 ] 指 定 歌词 编辑 者 ， 通 过 [OffsetMS] 调 整整 个 歌词 文件 的 时 间 标 签 值 。 

其 次 是 获取 歌词 的 行 数 ， 由 于 在 LRC 歌词 格式 中 每 一 个 中 括号 对 代表 一 行 歌词 ， 所 以 要 获取 歌词 的 行 数 ， 
就 需要 将 歌词 以 中 括号 为 分 隔 进行 分 解 。 在 Java 中 要 将 指定 的 字符 串 按 某 个 分 隔 符 进行 分 解 ， 可 以 使 用 
java.util.StringTokenizer 类 ， 该 类 用 于 分 析 字 符 串 ， 并 将 字符 串 分 解 成 可 被 独立 使 用 的 单词 ，StringTokenizer 类 
有 两 个 常用 的 构造 方法 。 

StringTokenizer(String s) 

该 构造 方法 为 字符 串 s 构造 一 个 分 析 器 ， 使 用 默认 的 分 隔 集 合 ， 即 空格 符 (若干 个 空格 被 看 作 一 个 空格 )、 
换行 符 、 回 车 符 、Tab 符 。 

StringTokenizer(String s,String delim) 

该 构造 方法 为 字符 串 s 构造 一 个 分 析 器 ， 参 数 delim 被 作为 分 隔 符 〈 此 处 支持 正则 表达 式 )。 使 用 
StringTokenizer 类 创建 一 个 字符 串 分 析 器 后 , 就 可 以 使 用 countTokens0 方 法 获取 字符 串 共 有 多 少 个 语言 符号 , 同 
时 也 可 以 使 用 nextToken() 方 法 逐个 获取 字符 串 中 的 语言 符号 〈 单 词 )， 每 当 调用 nextToken0 时 ， 都 将 在 字符 串 
中 获得 下 一 个 语言 符号 。 

图 设计 过 程 

(1) 创建 index.jsp 和 songListjsp 页 面 ， 分 别 用 于 加 载重 定向 歌曲 列表 到 指定 的 页 面 中 和 使 用 <c:forEach> 
标签 循环 显示 歌曲 列表 并 在 每 首 歌曲 的 后 面 添加 “播放 ” 超 链接 。 

(2) 在 歌曲 信息 相关 的 Servlet 中 ， 编 写实 现在 线 试听 的 方法 play0， 在 该 方法 中 首先 获取 要 播放 歌曲 的 
ID， 并 根据 ID 从 数据 库 中 获取 该 歌曲 的 信息 ， 然 后 读 取 该 歌曲 对 应 的 歌词 文件 ( 即 LRC 文件 )， 将 读 取 的 歌词 
内 容 连 接 成 一 个 字符 串 ， 并 统计 歌词 的 行 数 ， 再 将 歌词 的 行 数 、 歌 词 内 容 、 当 前 页 的 歌曲 信息 和 当前 试听 的 歌 
曲名 称 保存 到 HttpServletRequest 对 象 中 ， 最 后 将 页 面 重 定向 到 在 线 试听 页 面 。play0 方 法 的 关键 代码 如 下 : 


public void play(HttpServletRequest request HttpServletResponse response) throws 
ServletException. IOException { 


Tesponse. 

int ID = Integer.parseInt(request. getParameter("playId")): // 获 取 要 播放 的 歌曲 ID 
String sql = "SELECT * FROM tb_song WHERE id ="+ID+""; 

System.out.printin("SQL: "+sql): 

ResultSet rs = conn.executeQuery(sql): // 执 行 查询 语句 


String fileName=""; /歌曲 文件 名 

String songName="": /歌曲 名 

String url =""; /歌曲 文件 的 URL 地 址 
try{ 
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url =request.getRequestURLO toString(); 
url = urlLsubstring(0. url lastIndexOf("/") + 1) + “music/"; 
if (rs.nextO) { 
songName=rs.getString("songName”); 
fileName=rs.getString("fileName"); 
} 
} cateh (SQLException ex) { 
ex.printStack Trace(); 
/和 让 中 只 中 中 中 中 可取 可 人 语 ] 中 本 下地 让 本 本 机 本本 本 本 本 本本 本 让 本 证 
String lrcRealPath = request.getRealPath("/"); 
String mp3RealPath = url + fileName; 
JrcRealPath = lrcRealPath + "music/" + 
fileN: 


int lineNumber = 0; 

File lrcFile = new File(lrcRealPath); 

这 (lrcFile.existsO) { 
FileInputStream lrcf 


{ 
lrcf = new FileInputStream(lrcRealPath); 
int sl=0; 


计 剩余 字 节 数 
byte[] data = new byte[lrcf.availableO]: 
while ((sl = lrcfread(data)) > 0) { 
content += new String(data, 0. sD); 
} 


StringTokenizer st = new StringTokenizer(content "\[*\]"); 


lineNumber = st.countTokens(); 
} catch (Exception e) { 
e.printStackTrace(); 


} 
request.setAttribute("realPath", mp3RealPath); 
request.setAttribute("lineNumber", lineNumber); 
request.setAttribute("IreContent", content): 
Tequest.setAttribute("fileURL", fileName); 
Tequest.setAttribute("songName", songName); 
Tequest.getRequestDispatcher("play.jsp").forward(request.response); 


substring(0, fileName.lastIndexOf(".") + 1) + "lre"; 


多 媒体 应 用 


/获取 歌曲 文件 的 URL 地 址 


/歌曲 名 
/歌曲 文件 名 


Wire 文件 路 径 

/歌词 内 容 

/歌词 的 行 数 
/声明 歌词 文件 对 应 的 File 对 象 
// 济 断 歌 词 文件 是 否 存在 


JWavailable( 方 法 可 以 不 受阻 塞 地 从 此 输入 流 中 读 取 〈 或 跳 过 ) 估 


// 将 歌词 内 容 连接 为 一 个 字符 串 
// 分 析 字 符 串 中 共 包 括 多 少 个 中 括号 对 “[]” 
// 返 回 分 析 的 结果 


// 保 存 要 播放 歌曲 的 完整 路 径 
/保存 歌词 的 行 数 

/保存 歌词 的 内 容 
/保存 当前 页 的 歌曲 信息 
/保存 当前 试听 的 歌曲 名 称 


(3) 编写 在 线 试听 页 面 playjsp， 实 现 播放 歌曲 并 设置 歌词 同步 显示 。 通 过 EL 表达 式 中 的 $f{} 将 获取 的 歌 
词 内 容 输出 到 id 属性 为 fcContent 的 <span> 标 记 中 ， 并 设置 该 标签 为 不 显示 ， 关 键 代 码 如 下 : 


<span id="IrcContent" style="display:none; ">$ {lreContent}</span> 


在 页 面 的 合适 位 置 添加 一 个 用 于 显示 歌词 的 <div> 标 记 ， 并 将 该 标记 的 style 属性 的 子 属性 overflow 设置 为 


hidden， 即 超出 指定 范围 的 内 容 隐藏 ， 关 键 代 码 如 下 : 


<div id="lrcAreaDiv" style="overflow:hidden: height:260: width:480: background-color-#FFFFFF"> 


在 id 为 IcAreaDiv 的 <div> 标 记 中 , 添加 一 个 id 属性 为 rcArea 的 表格 , 并 根据 获取 的 歌词 行 数 生 成 指定 行 


的 单元 格 ， 关 键 代码 如 下 : 


<table border="0" cellspacing="0" cellpadding="0" id="IrcArea” width="100%6" style="position:relative; top:120px; "> 


<tr><td nowrap height="20" align="center ”> 
<table border="0" cellspacing="0" celipadding="0”> 


<tr><td nowrap height="20"><span id="hrcLinel”" style="height:20; color: 扼 F0000"> 正 在 加 载 歌 词 …..</span></td> 


<t> 
<tr style="position:relative; top: -20px: z-index:6:"> 


<td nowrap height="20"><div id="IrcLine_will]” class="IrcLine_will"></div></td> 


<htr> 
</table> 
<htd></tr> 

<c:forEach begin="0" end="$ {lineNumber}" step="1" var="i"> 


<tr style="position:relative; top: ${-20*i}px; "><td nowrap height="20" align="center "> 


<table border="0" cellspacing="0" celipadding="0”> 
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<tr><td nowrap height="20"><span id="hreLines {i+2} " style="height:20"></span></td></tr> 
<tr style="position:relative: top: -20px: z-index:6:;"> 
<td nowrap height="20"><div id="IrcLine_will$ {i+2}” class="IrcLine will"></div></td> 
<> 
</table> 
<td></tr> 
</c:forEach> 
</table> 
(4) 通过 JavaScript 解析 歌词 并 控制 歌词 同步 显示 ， 当 不 存在 歌词 时 显示 提示 信息 “很 抱歉 ， 该 歌曲 没有 
提供 歌词 !”， 关 键 代 码 如 下 : 
<script language="JavaScript”> 
Var getLrcContent=lrcContentinnerHTML: /获取 歌词 内 容 
if(getLreContent!=""){ 
Ircobj = new lreClass(getLreContent); // 初 始 化 IrcClass 类 的 对 象 ， 参 数 为 歌词 内 容 
Var lrc0, lrcl: 
moveflag = false; 
movable = false; 
moven = false; 
Var lrctop; 


curpot =0; 
/定义 一 个 解析 lrc 歌词 的 函数 


function lrcClass(lyric){f /参数 为 歌词 内 容 


this.fih; 
1/ 获取 歌词 中 是 否 有 时 间 补 偿 值 ， 时 间 补 偿 值 的 单位 为 毫秒 ， 正 数 表示 整体 提前 ， 负 数 表示 整 体 滞后 
if(M\[offset\:(\-7\d) Ni.test(lyric)) 
this.oTime = RegExp.$1/1000; 
lyric = lyric.replace(\[:\J[’S$\n]*(nl$)/g."$1"); 
lyric = lyric.replace(\[[\NJN]*\Yg,""); 
lyric = lyricreplace(AL[A[J]*[A[JWd]H[ATI :NDI Ye,""); 
lyric = Iyricreplace 人 [ADJ][AN] [ANNA Ag 
while(A[[NNJHN[NNII NY test(yric){ 
lyric = lyric.replace((N[[NNIHNINNID HNN a); 
Var 222t = RegExp.$1; 
MCHA]")S/.exec(zzzt); 
Var ltxt = RegExp.$2; 
var eft = RegExp.$1.slice(1,-1).split("]["); 
for(var ii=0; ii<eft.length; ){ 
Var sf = eft[ii].split(™:"); 
Var tse = parseInt(sf[0],10) * 60 + parseFloat(sf[1)): 
var sso= {t:[], w:[] , n:ltxt } 
sso.t[0] = tse-this.oTime; 
this.inr[this.inr.length] = sso: 


} 


i. 
/开始 播放 歌词 的 方法 
function wghLoad lreO{ 
lrcobj.wghLoad(mediaPlayer.controls.currentPosition): 
if(arguments.length—0){ 
lrc0 = window:setTimeout("wghLoad lrcO".10):; 
} 


// 当 页 面 印 载 时 ， 取 消 对 lrc0 的 延迟 执行 
windowonunload-functionO{ 
clearTimeout(lre0): 


} 

/设置 歌词 的 项 部 位 置 
function lIreTopPosition(nline){ 
Irctop -= 20*nline; 

IrcArea.style.top = Irctop; 
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/改变 歌词 顶部 的 位 置 ， 实 现 歌词 向 上 滚动 
function IrecChangePosition(step.dur){ 
if(moveflag) return: 


steptt; 
window.setTimeout("IrcChangePosition("+step+","+dur+"):",dur*50); 
六 
} 
/设置 当前 演唱 的 歌词 行 的 颜色 ， 即 让 当前 歌词 行 高 亮 显示 
function highlight(lid) { 
lid.style.color = "#FF0000"; /设置 将 要 演唱 的 歌词 的 颜色 
》 
/清除 当前 歌词 的 高 亮 显示 


function loseColor(lid) { 
i .clear Timeout(lre1); 


' 
/演唱 后 的 歌词 行 的 颜色 
function loseLight(lid){ 
lid.style.color = "#000000"; /设置 演唱 后 的 歌词 的 显示 颜色 
} 
wehLoad lrcO; /开始 播放 歌词 
jelsef 
document.getElementById("lrcLinel")innerHTML=" 很 抱 凌 ， 该 歌曲 没有 提供 歌词 ! "; 
} 
‘</script> 


图 秘笈 心 法 
在 playjsp 页 面 中 ， 实 现 同步 显示 LRC 歌词 时 使 用 了 JavaScript 脚本 ， 通 过 innerHTML 获取 歌词 的 内 容 ， 
并 对 其 IrcCLass 类 进行 初始 化 ， 它 的 参数 为 歌词 内 容 ， 并 利用 一 些 算法 控制 歌词 的 同步 显示 。 也 就 是 说 获取 歌 


词 中 是 否 有 时 间 补偿 值 ， 时 间 补 偿 值 的 单位 为 毫秒 ， 正 数 表示 整体 提前 ， 而 负数 表示 整体 滞后 ， 也 就 是 所 谓 歌 
词 延 迟 设置 。 


实例 411 


国 实例 说 明 


在 网 站 播放 歌词 时 ， 经 常 是 播放 到 哪 句 歌词 就 更 改 哪 句 歌词 的 颜色 ， 以 达到 提示 的 作用 。 本 实例 是 为 了 更 
加 突出 显示 同步 播放 歌词 ， 更 改 播放 后 歌词 的 颜色 ， 运 行 结果 如 图 15.6 所 示 。 


15.6 ”播放 后 的 歌词 颜色 


Java Web 开发 实例 大 全 (基础 卷 ) 


图 关键 技术 


本 实例 在 实现 播放 歌词 时 ， 应 用 了 JavaScript 脚本 自 定义 的 highLight0 和 loseLight0 函 数 ， 用 于 当前 演唱 歌 
词 行 的 颜色 ， 即 让 当前 歌词 行 高 亮 显示 和 演唱 后 的 歌词 的 显示 颜色 ， 其 中 使 用 了 style 样式 的 color 颜色 属性 ， 
设置 相应 歌词 状态 的 颜色 ， 关 键 语句 如 下 : 

lid.style.color = "lightblue"; 

图 设计 过 程 
(1) 编写 数据 库 的 类 及 歌曲 相关 信息 的 Servlet 实现 类 SynchroLRC， 这 部 分 不 是 本 实例 介绍 的 重点 ， 这 里 
不 再 介绍 ， 具 体 代 码 请 参见 光盘 。 
(2) 编写 indexjsp 页 面 ， 在 该 页 面 中 使 用 JSTL 标签 把 页 面 重 定向 到 歌曲 列表 页 面 ， 代 码 如 下 : 
<c:redirect url="/SynchroLRC"> 
<c:param name="action" value="guery"/> 
</c:redirect> 
(3) 编写 在 线 试听 playjsp 页 面 ， 通 过 JavaScript 脚本 实现 播放 歌曲 并 设置 播放 后 歌词 颜色 为 lightblue， 关 
键 代码 如 下 : 
/设置 当前 演唱 的 歌词 行 的 颜色 ， 即 让 当前 歌词 行 高 亮 显示 


function highlight(lid){ 
lid.style.color = "#FF0000"; /设置 将 要 演唱 的 歌词 的 颜色 


1 
// 清 除 当前 歌词 的 高 亮 显示 
function loseColor(lid){ 
window.clear Timeout(Ire1); 
} 
/演唱 后 的 歌词 行 的 颜色 
function loseLight(lid){ 
lid.style.color = "lightblue"; /设置 演唱 后 的 歌词 的 显示 颜色 
} 
wghLoad lrcO: /开始 播放 歌词 
jelsef 
document.getElementById("lrcLinel").innerHTML=" 很 抱 欢 ， 该 歌曲 没有 提供 歌词 ! ": 
} 
</script> 


图 秘笈 心 法 
在 线 播放 歌曲 并 同步 显示 歌词 时 ， 通 过 直接 在 页 面 中 使 用 JavaSeript 脚本 可 以 方便 快速 地 实现 ， 因 为 
JavaScript 的 灵活 性 以 及 可 扩展 性 都 很 高 。 通过 本 实例 的 实现 , 读者 可 以 尝试 实现 在 播放 每 个 字 时 改变 歌词 颜色 。 
15.2 ”插入 Flash 动画 


Flash 是 一 种 矢量 格式 的 动画 文件 ， 可 以 包含 动画 、 声 音 、 超 文本 链接 等 ， 而 且 文件 的 体积 也 很 小 ， 如 果 将 
其 嵌入 到 网 页 中 ， 那 么 整个 网 页 会 增色 不 少 。 本 节 将 通过 两 个 典型 实例 介绍 Flash 动画 在 网 页 中 的 应 用 。 


实例 412 


图 实例 说 明 
为 了 美化 网 站 ， 使 其 有 一 个 更 好 的 视觉 感受 ， 可 以 将 Flash 技术 引入 到 网 页 中 ， 使 网 页 更 具有 表现 力 。 打 开 大 
多 数 网 页 ， 都 会 不 断 弹出 各 种 各 样 用 Flash 制作 的 精美 动感 广告 和 有 趣 的 Flash 游戏 或 MTV， 增 强 了 网 页 的 宣传 
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效果 。 由 此 可 见 ，Flash 技术 在 网 页 中 起 着 举足轻重 的 作用 。 将 Flash 动画 插入 到 网 页 中 的 效果 如 图 15.7 所 示 。 


i Er i 动画 
关键 技术 


本 实例 主要 应 用 了 <object> 标 记 和 <embed> 标 记 。<objec 亿 标记 中 的 classid 是 告诉 浏览 器 插件 的 类 型 , codebas 
是 可 选 参 数 ， 安 装 Flash 插件 的 用 户 浏览 网 页 时 ， 自 动 连接 到 Shockwave 的 下 载 网 页 ， 自 动 下 载 并 安装 相关 插 
件 。<object> 和 <embed> 标 记 中 quality = high 的 记号 作用 是 使 浏览 器 以 高 质量 浏览 动画 。 


图 设计 过 程 
创建 index.jsp 页 面 ， 在 该 页 面 中 定义 <object> 标 签 和 <embed> 标 签 ， 关 键 代 码 如 下 : 


<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase= http://download.macromedia.comy/pub/shockwave/cabs/flash/swflash.cabf#version=7.0.19.0" width="830" height="471"> 
<param name= lovie" value="fash/flash.swf” /> 
<param name="guality" value="high" /> 
<param name="wmode” value="transparent" /> 


<embed src="flash.swf" width="830" height="471" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x- 
shockwave-flash" wmode="transparent"></embed> 
‘</object> 


图 秘笈 心 法 
<object> 标 签 的 classid 属性 是 指定 浏览 器 所 有 的 ActiveX 控件 ， 要 注意 的 是 仅 用 于 object 中 。 而 <embed> 是 


用 来 播放 影音 文档 的 ， 通 常 播放 Windows Media Player 格式 ， 也 可 以 播放 其 他 格式 ， 它 支持 插入 的 多 媒体 可 以 
是 MIDI、WAV、AIFF、AU、MP3、MPEG、AVI 等 。 


实例 413 


图 实例 说 明 

如 果 说 在 网 页 中 插入 Flash 是 为 了 美化 网 站 ， 使 网 页 更 具有 表现 力 ， 那 么 在 网 页 中 插入 背景 透明 的 Flash， 
则 会 使 网 站 的 整体 效果 更 加 和 谐 统一 ， 达 到 更 完美 的 效果 。 运 行 本 实例 ， 该 网 站 顶部 的 企业 文化 的 背景 动画 就 
是 插入 的 透明 背景 的 Flash， 如 图 15.8 所 示 。 


15.8 插入 背景 透明 的 Flash 动画 
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图 关键 技术 


在 网 页 中 插入 背景 透明 的 Flash 动画 ， 主 要 是 通过 设置 <object></object> 或 <embed></embed> 标 记 的 wmode 
属性 来 实现 的 。 

在 <object></object> 标 记 之 间 加 入 如 下 代码 : 

<param name="wmoder value="transparent'> 

设置 <embed></embed> 标 记 的 wmode 属性 的 代码 如 下 : 

wimode="transparent" 


图 设计 过 程 
创建 indexjsp 页 面 文件 ， 并 在 页 面 中 将 Flash 动画 文件 添加 到 页 面 中 的 代码 如 下 : 


<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0.19,0" width="551" height="143"> 

<param name="movie" value="tm.swf” /> 

<param name="guality” value="high” /> 

<param name="wmode” value="transparent”> 

‘<embed src="tm swf' quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" 
width="551" height="143" wmode="transparent"></embed> 
</object> 


图 秘笈 心 法 
在 <object> 中 使 用 了 codebase 属性 , 它 是 一 个 可 选 属性 ,用 于 提供 一 个 基本 的 URL, 该 属性 的 值 是 一 个 URL， 


指向 的 目录 包含 了 classid 属性 来 引用 对 象 ，codebase URL 会 覆盖 文档 的 基本 URL， 但 不 会 永久 替代 它 ， 如 果 不 
使 用 codebase 属性 ， 这 个 基本 的 URL 就 是 默认 的 。 


15.3 播放 视频 


实例 414 


图 实例 说 明 

在 网 站 中 添加 视频 文件 是 很 常见 的 ， 有 了 在 线 播放 视频 文件 ， 不 仅 可 增加 相关 信息 的 生动 性 ， 还 可 以 为 网 
站 增加 入 气 。 目 前 ， 有 很 多 在 线 视频 网 站 ， 比 较 典型 的 如 优酷 网 和 土豆 网 。 运 行 本 实例 ， 加 载 完 页 面 后 将 自动 
播放 视频 ， 程 序 运行 结果 如 图 15.9 所 示 。 


(> 
图 15.9 播放 AVI 文件 


图 关键 技术 
在 HIML 文件 中 可 以 直接 嵌入 多 媒体 文件 。 多 媒体 是 指 利用 计算 机 技术 ， 把 多 种 媒体 综合 在 一 起 ， 使 之 建 
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立 起 逻辑 上 的 联系 ， 并 能 对 其 进行 各 种 处 理 的 一 种 方法 。 多 媒体 主要 包括 文字 、 声 音 、 图 像 和 动画 等 各 种 形式 。 
在 HTML 文件 中 使 用 标记 <embed> 嵌 入 多 媒体 文件 ， 其 语法 格式 如 下 : 

<embed SRC="file url" WIDTH=value HEIGHT=value HIDDEN=hidden value AUTOSTART=auto_value LOOP=loop_value> 

</embed> 


标记 <embed> 的 属性 如 表 15.4 所 示 。 
表 15.4 标记 <embed> 的 属性 


属 性 描述 


SRC | 多 媒体 文件 路 径 

WIDTH | _ 播放 多 媒体 文件 区 域 的 宽度 

HEIGHT | _ 播放 多 媒体 文件 区 域 的 高 度 

HIDDEN | “控制 播放 面板 的 显示 和 隐藏 ， 取 值 为 tue 代表 隐藏 面板 ， 取 值 为 no 代表 显示 面板 
AUTOSTART “| 控制 多 媒体 内 容 是 否 自动 播放 ， 取 值 为 true 代表 自动 播放 ， 取 值 为 false 代表 不 自动 播放 


LOOP 控制 多 媒体 内 容 是 否 循环 播放 ， 取 值 为 true 代表 无 限 次 循环 播放 ， 取 值 为 no 代表 仅 播放 一 次 
图 设计 过 程 


(1) 创建 index.jsp 页 面 ， 根 据 需 要 在 指定 的 页 面 中 添加 表格 或 表单 元 素 ， 关 键 代码 如 下 : 
<table width="803" border="0" align="center" cellpadding="0" cellspacing="0"> 
<t> 
<td width="803" height="75" valign="top" background="images/top.jpg"><table width="100%6" border="0" cellspacing="0" cellpadding="0> 
<t> 


<td height="30"><table width="100%6" cellspacing="0" cellpadding="0"> 
<tr align="center" valign="bottom"> 
<td width="7896" height="29" align="right” class="style2> 设 为 首页 </td> 
<td width="996" align="right”" class="style2"><span class="style2"> | </span> 收 藏 本 站 </td> 
<td width="1796"><span class="style2”> | 联系 我 们 </span></td> 
<td width="296">&enbsp;</td> 
</tr> 
</table></td> 
</tr> 
<tr> 
<td>&nbsp;</td> 
</tr> 


</table></td> 
<tr> 
<tr> 
<td><table width="100%" border="0" cellspacing="0" cellpadding="0> 
<t> 
<td width="803" height="166" background="images/banner:jpg">&enbsp:</td> 


<tr> 
<td height="30"><table width="10096” border="0" cellspacing-"0"cellpadding="0 必 
<tr> 
<td width="803" height="38" background="images/dh.jpg"><div align="center "></div></td> 


</table> 
(2) 在 网 页 中 指定 的 位 置 处 插入 <embed> 标 记 ， 通 过 该 标记 实现 AVI 文件 的 播放 ， 将 <embed> 标 记 中 的 
Loop 参数 值 设 为 tue， 表 示 指 定 的 AVI 文件 进行 循环 播放 ， 关 键 代码 如 下 : 


<embed src="images/new.swf" width="30" height="18" align="absbottom" 
noerror="hue”" loop="frue” autostart="hue” ></embed> 


国 秘笈 心 法 


如 果 使 用 <object> 标 记 的 同时 也 使 用 <embed> 标 记 ， 则 对 每 个 属性 或 参数 都 要 使 用 相同 的 值 ， 以 确保 能 在 各 
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种 浏览 器 中 进行 一 致 的 回放 。 而 type 值 对 应 相应 的 播放 器 ，Windows Media Player 7 以 上 版 本 插件 为 application/ 
x-mplayer2, Realplayer 播放 器 及 其 浏览 插件 为 audio/x-pn-realaudio-plugin, QuickTime 播放 器 为 video/quickTime。 


We | 本 
实用 指数 : 室 食 食 


图 实例 说 明 

AVI 是 比较 常用 的 多 媒体 视频 文件 格式 ， 利 用 多 媒体 制作 软件 可 以 制作 出 许多 丰富 多 彩 的 视频 文件 ， 但 是 
制作 好 的 AVI 视频 文件 如 何在 网 络 中 播放 呢 ? 通常 有 两 种 方法 ， 一 是 应 用 超 链接 标签 来 播放 ， 应 用 该 方法 时 ， 
系统 会 利用 默认 的 播放 器 播放 该 文件 ， 另 一 种 方法 是 应 用 HTML 的 标记 符 <embed> 来 播放 。 本 实例 使 用 的 就 是 
后 一 种 方法 ， 结 合 图 层 制作 了 一 个 多 媒体 播放 器 。 运 行程 序 ， 单 击 “ 单 击 观看 多 媒体 演示 ”图 标 ， 将 打开 如 
图 15.10 所 示 的 窗口 播放 AVI 文件 。 


全 Internet | 保护 模式 : 启用 到 7 或 100%6 ~ 


15.10 ”自制 视频 播放 器 


图 关键 技术 


实现 本 实例 主要 利用 HTML 的 标记 符 <embed> 直 接 调 用 Media Player 播放 AVI 视频 文件 ， 但 是 其 界面 并 不 
是 很 美观 ， 尤 其 是 底部 的 播放 控制 区 不 可 以 隐藏 ， 这 时 可 以 通过 在 页 面 中 加 入 一 个 浮动 的 图 层 ， 并 使 用 该 图 层 
遮盖 住 系统 播放 器 的 灰色 控制 区 来 实现 隐藏 。 

在 正 浏 览 器 中 , 层 依 靠 <DIV></DIV> 和 <SPAN></SPAN> 来 实现 ,两 者 基本 相同 。 通常 <DIV> 用 于 较 大 的 层 ， 
<SPAN> 用 于 较 小 的 层 ， 并 且 <DIV> 在 实现 的 层 后 面 加 上 一 个 回 车 键 换行 ， 而 <SPAN> 不 加 。 本 实例 在 网 页 中 加 
入 浮动 的 图 层 利用 <DIV> 实 现 。 


力 设计 过 程 
(1) 在 网 页 中 适当 的 位 置 添加 “ 单 击 观看 多 媒体 演示 ”的 图 片 ， 并 为 该 图 片 添加 超 链接 ， 单 击 超 链接 所 执 


行 的 操作 时 打开 新 窗口 ， 用 于 播放 AVI 视频 文件 ， 关 键 代码 如 下 : 
<div align="center" class="style3"~ 单 击 观看 多 媒体 演示 : </div> 
<ahref=#"onClick="JavaScript:window.open(‘AVIPlay.htm'.".width=400.height=352")"><img src="image//lag.jpg” width="105" height="54" border= 
"></a> 
(2) 利用 HTML 的 标记 符 <embed></embed> 播 放 AVI 视频 文件 的 关键 代码 如 下 : 
<embed src="47Taa.avi" width="326" height="315" noerror="hue” type="video/avi”> 
(3) 为 了 隐藏 其 底部 的 播放 控制 区 可 以 应 用 图 层 ,利用 图 层 将 其 底部 的 播放 控制 区 遮盖 住 ， 以 达到 “天 衣 
无 颖 ”的 效果 ， 关 键 代 码 如 下 : . 
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<div id="Layer1" style="position:absolute: width:199px: height:60px: z-index:1: left: Opx: top: 292px:"> 
<img sre="image/play_02.gif" width="410" height="60"></div> 


图 秘笈 心 法 


DIV 的 语法 如 下 : 

<div id-layemame style="style definition"> 

layer content 

div> 

其 中 style definition 是 一 组 用 分 号 隔 开 的 样式 定义 。 常 用 的 有 以 下 几 种 。 

@ position: 其 值 可 以 是 absolute 和 relative， 所 谓 的 absolute (绝对 定位 ) 就 是 层 的 内 容 不 必 按 照 出 现 的 先 
后 次 序 在 浏览 器 上 依次 排列 , 而 是 可 以 以 像素 为 单位 定位 到 浏览 器 用 户 区 域 的 任意 位 置 ; 而 relative (相对 定位 ) 
则 是 层 按照 相 邻 的 内 容 依次 排行 。 

@ left,top,width,height: 指 层 的 左上 角 坐 标 以 及 它 的 宽度 和 高 度 。 

@ z-index: 由 于 层 可 以 被 放置 在 页 面 的 任何 位 置 ， 当 它 与 其 他 内 容重 合 时 ，z-index 值 大 的 显示 在 上 面 ， 所 
有 层 的 z-index 值 为 1。 但 是 在 NS 中 ， 所 有 的 表单 元 素 〈 如 文本 框 、 列 表 框 、 按 钮 等 )， 只 要 是 可 见 的 ， 就 无 法 
被 遮 住 ， 无 论 z-index 的 值 是 多 少 。 因 此 在 设计 页 面 时 ， 要 注意 不 要 在 动态 出 现 或 隐藏 的 元 素 〈 如 弹出 式 菜单 ) 
的 位 置 上 放置 表单 元 素 。 

@ visibility: 指明 层 是 否 可 见 ， 通 过 在 程序 中 动态 改变 这 个 值 ， 可 以 实现 层 的 出 现 和 消失 ， 如 下 拉 菜 单 就 
要 依靠 它 来 实现 。 它 的 3 个 候选 值 为 nherit， 可 见 性 与 父 元 素 的 可 见 性 相同 ，visible， 可 见 (在 NS 中 是 show); 
hidden， 不 可 见 〈 在 NS 中 是 hide)。 


国 实例 说 明 


FLV 流 媒体 格式 是 一 种 新 的 视频 格式 ， 全 称 为 Flash Video， 由 于 其 文件 体积 小 巧 、 加 载 速度 快 和 视频 质量 
好 等 特点 ， 使 其 在 网 站 上 迅速 盛行 ， 目 前 各 在 线 视频 网 站 均 采 用 此 视频 格式 ， 如 新 浪 播客 等 ，FLV 已 经 成 为 当 
前 视频 文件 的 主流 格式 。 运 行 本 实例 ， 在 页 面 中 将 显示 网 站 提供 的 视频 列表 ， 在 该 页 面 中 单 击 某 一 视频 后 面 的 
“观看 ” 超 链接 ， 将 打开 播放 FLV 视频 页 面 ， 在 该 页 面 中 将 调用 FLV 播放 器 ， 单 击 “ 单 击 开始 播放 ” 超 链 接 ， 
将 开始 播放 选择 的 视频 ， 如 图 15.11 所 示 ， 在 播放 的 过 程 中 ， 用 户 可 以 通过 “播放 ”按钮 “暂停 ”按钮 和 “ 停 
止 ”按钮 对 视频 的 播放 进行 控制 。 


图 Intemet | 保护 模式: 启用 入 - 忆 100% 一 


15.11 在 线 播放 FLV 视频 
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图 关键 技术 


本 实例 建立 了 一 个 FlvImfojava 的 Servlet， 在 其 中 实现 了 查询 FLV 视频 详细 信息 query0 方 法 和 播放 FLV 视 
频 play0 方 法 ， 再 通过 JSP 页 面 ， 调 用 Flash 中 制作 的 FLV 播放 器 实现 在 线 播 放 FLV 视频 。FLYV 播放 器 实际 上 
是 一 个 扩展 名 为 swf 的 Flash 文件 ， 在 JSP 中 ， 可 以 通过 HTML 提供 的 <object> 标 记 和 <embed> 标 记 进行 调用 ， 
通过 <objec 亿 标记 调用 Flash 播放 器 的 基本 代码 如 下 : 


<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 

codebase="http://download. macromedia.com/pub/shockwave/cabs/flash/swflash.cab#tversion=7.0,19,0"width="450" height="300"> 
<param name="movie”" value="$ {url}player.sw/?fileName=$ {url} $ {fileName} "/> 
<param name="guality” value="high”> 

<Jobject> 

参数 说 明 

@ codebase 属性 : 用 于 指定 获取 组 件 的 URL。 

@ movie 参数 : 用 于 指定 要 播放 文件 的 URL。 


@ quality 参数 : 用 于 指定 播放 资源 的 质量 。 
图 设计 过 程 
(1) 创建 ndexjsp 页 面 ， 在 该 页 面 中 通过 JSTL 标签 将 页 面 重 定向 到 视频 列表 页 面 ， 代 码 中 “/FlvInfo” 指 


定 的 是 Servlet 映射 路 径 ， 是 通过 Servlet 将 页 面 重 定向 到 视频 列表 页 面 flvListjsp， 关 键 代 码 如 下 : 
<c:redirect url="/FivInfo > 


(2) 创建 flvListjsp 页 面 ， 在 该 页 面 中 ， 首 先 应 用 JSTL 的 <c:forEach> 标 签 循环 显示 视频 列表 ， 然 后 在 每 
个 视频 后 面 添 加 “观看 ” 超 链 接 ， 关 键 代码 如 下 : 
<c:forEach var="/yForm" items="$ {list}"> 
<t> 
<td height="27" align="left" bgcolor="#FFFFFF">&nbsp:$ {flvForm .title}</td> 
<td align="lefi" bgcolor="#FFFFFF">&nbsp;$ {flvForm.introduce}</td> 
<td align="center” bgcolor="#FFFFFF"><a href="FivInfo?action=playéplayId=${flvForm.id} ”target=”blank"> 观 看 </a></td> 


<tr> 
</c:forEach> 

(3) 在 Flash 中 制作 一 简单 的 FLV 播放 器 ， 然 后 编写 FLV 播放 器 播放 指定 FLV 视频 文件 的 页 面 playjsp， 
关键 代码 如 下 : 


‘<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="450" height="300"> 
<param name="movie" value="$ {url}player.sw/?fileName=$ {url}$ {fileName} "/> 
<param name="guality" value="high"> 
<embedsrc="$ {url}player.swf?fileName=$ {url}$ {fileName}"quality="high" 
Pluginspage="http://www.macromedia.com/go/getflashplayer"type="application/x-shockwave-flash" width="450" height="300" ></embed> 
‘</object> 
(4) 在 playjsp 页 面 中 调用 FLV 播放 器 ， 具 体 代码 如 下 : 
‘<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0.19,0" width="450" height="300"> 
<param name="movie" value="$ {url}player.sw/?fileName=$ {url}$ {fileName} /> 
<param name="quality" value="high "> 
<embed sre="S$ {url}player swf?fileName=$ {url}$ {fileName}" quality="high" piuginspage="http://www.macromedia.cony go/getflashplayer"type= 
"application/x-shockwave-flash" width="450" height="300" ></embed> 
‘</object> 


图 秘笈 心 法 
本 实例 在 playjsp 页 面 中 调用 Flash 8 制作 的 FLV 播放 器 时 ， 使 用 <object> 和 <embed> 标 签 ， 其 中 <embed> 有 


-个 pluginspage 属性 ， 它 是 标识 Flash Player 插件 的 位 置 ， 在 尚未 安装 该 插件 时 用 户 可 以 下 载 到 它 ， 仅 用 于 
<embed> 标 签 中 。 
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第 16 章 窗口 的 应 用 


16.1 弹出 窗口 控制 


本 节 所 讲述 的 弹出 窗口 是 指 通 过 window.open0 方 法 打开 新 的 窗口 ， 这 种 弹出 的 窗口 在 做 网 页 时 是 经 常 被 用 
到 的 ， 如 弹出 一 些 网 页 的 公告 和 一 些 商业 广告 ， 以 及 一 些 警 告 信息 等 。 下 面 将 通过 一 些 实例 介绍 如 何 控制 弹出 
窗口 ， 使 制作 的 网 页 有 更 好 的 体验 。 
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图 实例 说 明 

告 是 网 站 最 大 的 盈利 手段 ， 任 何 网 站 都 会 推出 一 些 用 于 广告 的 版 块 。 但 有 时 过 多 地 在 网 页 中 分 割 出 广告 
版 块 ， 会 降低 用 户 对 网 站 的 使 用 率 。 那 么 该 如 何 解 决 这 个 问题 呢 ? 这 时 可 以 通过 打开 新 的 窗口 来 显示 网 站 的 广 
告 信息 。 本 实例 就 将 实现 在 用 户 打开 窗口 时 自动 地 弹出 新 窗口 ， 而 且 用 户 可 以 随时 关 掉 弹出 窗口 效果 。 实 例 运 
行 效果 如 图 16.1 所 示 。 


图 16.1 打开 网 页 显示 广告 信息 


图 关键 技术 


本 实例 主要 应 用 JavaScript 脚本 语言 中 window 对 象 的 open0 方 法 来 实现 。 在 JavaScript 语言 中 window 对 象 
代表 的 是 一 个 Web 浏览 器 窗口 或 者 是 窗口 中 的 一 个 框架 ， 可 以 使 用 window 对 象 对 Web 浏览 器 窗口 或 窗口 中 的 
框架 进行 控制 。window 对 象 的 常用 方法 如 下 。 
alert() 方 法 : 弹出 警告 对 话 框 。 
close0 方 法 : 关闭 被 引用 的 窗口 。 
confirm() 方 法 : 弹出 确认 对 话 框 。 
focus0 方 法 : 将 被 引用 的 窗口 放 在 所 有 打开 窗口 的 前 面 。 
open() 方 法 : 打开 浏览 器 窗口 并 显示 由 URL 或 名 称 引 用 的 文档 ， 再 设置 创建 窗口 的 属性 。 
prompt0 方 法 : 弹出 一 个 提示 对 话 框 。 
print0 方 法 : 打印 窗口 或 框架 中 的 内 容 。 
resizeTo(x,y) 方 法 : 将 窗口 的 大 小 设置 为 (x,y)，x、y 分 别 是 宽度 和 高 度 。 
resizeBy(offsetx,offsety) 方 法 : 按照 指定 的 位 移 量 设置 窗口 大 小 ， 当 offsetx、offsety 的 值 大 于 0 时 为 扩 
大 ， 小 于 0 时 为 缩小 。 


[| 


Java Web 开发 实例 大 全 (基础 卷 ) 


下 面 对 本 实例 中 应 用 到 的 open0 方 法 进行 详细 说 明 。 
window 对 象 的 open0 方 法 用 于 打开 浏览 器 的 窗口 。 其 使 用 语法 如 下 : 
windowVar=window.open(url.windowname[.location]): 
图 设计 过 程 
(1) 首先 创建 用 于 弹出 广告 信息 的 页 面 new.htm， 在 该 页 面 中 添加 所 要 宣传 的 广告 信息 。 
(2) 在 网 站 首页 index.htm 设置 每 次 进入 网 站 首页 时 将 弹出 广告 窗口 ， 代 码 如 下 : 
<script language="javascript"> 
window.open("new.htm","new","height=141,width=600,top=10,left=20"); /打开 新 窗口 
‘</script> 


图 秘笈 心 法 


弹出 窗口 可 以 应 用 到 很 多 性 质 的 网 站 ， 而 且 这 些 弹 出 窗口 有 着 很 大 的 宣传 性 ， 做 好 弹出 窗口 的 控制 和 设计 ， 
可 以 为 网 站 创造 巨大 的 利益 。 


力 实例 说 明 


很 多 网 站 在 浏览 者 进入 网 站 以 后 会 弹出 新 的 窗口 ， 这 些 窗口 的 内 容 一 般 是 广告 或 网 站 服务 协议 等 。 大 多 数 
情况 下 ， 这 些 新 打开 的 窗口 需要 浏览 者 自己 去 关闭 ， 这 样 就 给 浏览 者 带 来 很 大 的 不 便 ， 最 终 会 影响 到 网 站 的 访 
问 量 ， 而 本 实例 将 实现 自动 关闭 新 弹出 的 窗口 。 运 行 本 实例 一 定时 间 后 ， 新 弹出 的 窗口 就 会 自动 关闭 ， 效 果 如 
图 16.2 所 示 。 


图 16.2 ”自动 关闭 广告 窗口 


图 关键 技术 


实现 本 实例 主要 是 应 用 了 window 对 象 的 setTimeout0 方 法 和 close0 方 法 .使 用 window 对 象 中 的 setTimeoutO 
方法 主要 是 起 到 延 时 执行 某 一 操作 的 作用 ， 其 语法 格式 如 下 : 

setTimeout(expression.secdlay[,language]) 

参数 说 明 

@ expression: 是 一 个 字符 串 参 数 ， 用 来 调用 任何 函数 、 方 法 以 及 JavaScript 语句 。 

@ secdlay: 指定 运行 的 时 间 ， 以 毫秒 为 单位 。 

@ language: 指定 语句 或 参数 expression 调用 的 函数 所 使 用 的 语言 。 如 果 都 为 JavaScript 脚本 语言 ， 那 么 可 
以 不 用 设置 。 
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图 设计 过 程 
(1) 创建 网 站 首页 mdex.htm， 编 写 弹出 窗口 控制 代码 ， 关 键 代 码 如 下 : 
<scriptlanguage="javascript"> 


window.open("guanbi htm"."advertise", "width=557.height=176.top=10.1eft=20"); 


ap 
(2) 创建 弹出 窗口 guanbi.htm， 并 编写 弹出 窗口 中 的 自动 关闭 控制 代码 ， 关 键 代码 如 下 : 
<body onload="window.setTimeout('window.close()'.5000)"> 


国 秘笈 心 法 


本 实例 的 实现 内 容 可 以 应 用 到 很 多 行业 类 型 的 网 站 ， 如 教育 网 站 的 一 些 紧急 通知 、 商 业 网 站 的 广告 ， 也 可 
应 用 于 信息 网 站 的 信息 服务 协议 。 读 者 可 以 试 着 拓宽 其 使 用 范围 ， 也 可 以 试 着 编写 如 何 定时 打开 一 个 窗口 ， 方 
法 是 一 样 的 。 


国 实例 说 明 


在 使 用 JavaScript 语言 中 的 window 对 象 的 open0 方 法 打开 一 个 新 窗口 时 ， 新 窗口 默认 的 弹出 位 置 是 父 窗口 
的 左上 方 ， 如 果 弹 出 的 窗口 比较 小 就 不 会 引起 浏览 者 的 注意 ， 这 样 就 达 不 到 预期 引起 浏览 者 注意 的 效果 。 本 实 
例 将 实现 的 是 在 网 页 打开 时 弹出 的 窗口 为 居中 显示 ， 这 样 就 可 以 更 好 地 引起 浏览 者 的 注意 ， 达 到 更 好 的 说 明 宣 
传 效果 。 本 实例 运行 效果 如 图 16.3 所 示 。 


首页 新 品 上 各 ”等 价 百 品 合 员 备课 风物 于 加 二 订 单 。 销 趾 排行 
ie NevGosds Ata sole ~ Membe ort yee SelSort 


图 16.3 弹出 窗口 居中 显示 


图 关键 技术 


本 实例 的 实现 主要 是 应 用 了 JavaScript 脚本 语言 中 的 window 对 象 的 open0 方 法 和 screen 对 象 ， 先 通过 open0 
方法 打开 窗口 ， 然 后 通过 screen 对 象 获取 屏幕 的 分 辩 率 ， 最 后 通过 window 对 象 的 moveTo(x,y) 方 法 根据 获取 的 屏 
幕 分 辩 率 的 值 ， 将 新 窗口 在 父 窗口 中 进行 居中 显示 。 下 面 介 绍 window 对 象 中 的 moveTo(x,y) 方 法 和 screen 对 象 。 

使 用 moveTo(x,y) 方 法 可 以 将 窗口 移 到 指定 的 坐标 (x,y) 的 位 置 。 具 体 语法 格式 如 下 : 


window.moveTo(x,y) 


JavaScript 语言 中 的 screen 对 象 ， 主 要 是 用 来 获取 当前 屏幕 的 设置 的 ， 该 对 象 的 常用 属性 如 表 16.1 所 示 。 
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表 16.1 screen 对 象 的 常用 属性 
属 性 说 明 

width 用 于 整个 屏幕 的 水 平 尺寸 ， 单 位 是 像素 

height 用 于 整个 屏幕 的 垂直 尺寸 ， 单 位 是 像素 

pixelDepth | 显示 器 每 个 像素 的 位 数 

availWidth | 返回 的 是 窗口 中 内 容 区 域 的 水 平 尺寸 ， 单 位 是 像素 

availHeight | 返回 的 是 窗口 中 内 容 区 域 的 垂直 尺寸 ， 单 位 是 像素 
返回 当前 颜色 的 位 数 设置 。1 表示 黑白 色 ; 8 表示 256 色 (支持 256 种 颜色 ); 16 表示 增强 色 (支持 64000 
种 颜色 ); 24/32 表示 真 彩色 (支持 大 概 1600 万 种 颜色 ) 


图 设计 过 程 
(1) 创建 弹出 窗口 newhtm。 
(2) 创建 index.htm 页 ， 编 写 窗口 弹出 控制 代码 ， 以 及 控制 窗口 弹出 的 位 置 代码 ， 关 键 代码 如 下 : 
<script language="javascript"> 
Var hdc=window.open('Login_M.htm',","width=322,height=206"); 
width=screen.width; 
height=screen.height; 
hdc.moveTo((width-322)/2,(height-206)/2); 
</script> 


图 秘笈 心 法 
使 用 moveTo0 方 法 可 以 根据 需要 随意 地 设置 窗口 的 位 置 ， 只 要 是 网 站 需要 的 ， 网 站 设计 者 都 可 以 进行 相关 
的 设 定 ， 以 达到 预期 的 效果 。 


colorDepth 


实例 420 


图 实例 说 明 

在 实际 设计 网 页 时 ， 经 常 需要 在 一 个 窗口 中 创建 一 个 规定 了 大 小 、 显 示 位 置 和 显示 样式 的 新 窗口 ， 如 新 用 
户 注册 时 ， 进 行 注册 信息 的 填写 。 运 行 本 实例 ， 当 单 击 “ 弹 出 新 窗口 ”按钮 后 ， 将 弹出 如 图 16.4 所 示 的 新 窗口 。 
乱 #D -windowsntemetbpoer |)| 


re 二 


首页 新 品 上 架 “特价 识 品 。 会 员 | 


会 员 名 
EE 
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身 - 百 拭 己 告 


图 16.4 单 击 按钮 创建 的 新 窗口 
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图 关键 技术 


本 实例 的 实现 主要 应 用 了 window 对 象 中 的 open0 方 法 , 通过 对 方法 中 一 些 参 数 的 设 定 , 就 可 以 达到 预期 的 
效果 。open0 方 法 的 语法 如 下 : 
WindowVar=window.open(urLwindowname[.location]): 
参数 说 明 
@ WindowVar: 当前 打开 窗口 的 句柄 。 如 果 open0 方 法 成 功 ， 则 WindowVar 的 值 为 一 个 Window 对 象 的 句 
柄 ， 否 则 WindowVar 的 值 是 一 个 空 值 。 
@ url: 目标 窗口 的 URL。 如 果 URL 是 一 个 空 字符 串 ， 则 浏览 器 将 打开 一 个 空白 窗口 ， 允 许 用 write0 方 法 
创建 动态 HTML。 
目 windowname: window 对 象 的 名 称 。 
@ location: 对 窗口 属性 进行 设置 。 
图 设计 过 程 
(1) 创建 弹出 的 新 窗口 new.htm。 
(2) 创建 网 站 首页 index.htm， 并 在 首页 中 编写 弹出 窗口 控制 代码 ， 关 键 代码 如 下 : 
<body> 
<script language="javascript"> 
function pushO{ 
‘window.open("new.htm","new","height=400,width=500,top=10,left=20"); 
Us 
<form name="forml" method="post" action=""> 
<input type="button" name="Button" value=" 弹 出 新 窗口 " onClick="pushO"> 
</form> 
</body> 


图 秘笈 心 法 
根据 本 实例 的 实现 方法 , 读者 可 以 实现 在 应 用 window 对 象 的 open0 方 法 打开 窗口 时 , 根据 不 同 参数 的 设置 
《如 窗口 的 大 小 、 窗 口 的 位 置 、 是 否 显示 工具 栏 以 及 状态 栏 等 )， 使 打开 的 窗口 具有 不 同 的 效果 。 


实例 421 


国 实例 说 明 


在 网 站 中 应 用 弹出 窗口 时 ， 虽 然 弹出 窗口 上 有 可 以 直接 关闭 窗口 的 按钮 ， 但 总 是 显得 不 那么 直观 ， 为 了 方 
便 用 户 ， 在 设计 网 页 时 可 以 直接 给 弹出 窗口 添加 一 个 直观 的 关闭 按钮 。 运 行 本 实例 ， 当 单 击 “ 最 新 服务 ”导航 
后 ， 将 弹出 一 个 带 有 关闭 按钮 的 窗口 ， 如 图 16.5 所 示 ， 单 击 “ 关 闭 ” 按 钮 窗口 将 会 关闭 。 
0] 
《编程 则 网 》s5r 吕 
te | 
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图 关键 技术 

本 实例 的 实现 主要 是 应 用 了 window 对 象 中 的 close0 方 法 ， 前 面 在 介绍 window 对 象 时 提 到 过 close0 方 法 ， 
下 面 将 作出 详细 介绍 。 

window.close0; 


功能 : 该 方法 用 于 自动 关闭 浏览 器 窗口 。 
但 是 在 应 用 时 要 注意 ， 应 用 close0 方 法 和 单 击 正 标题 栏 中 的 “关闭 ”按钮 是 一 样 的 ， 但 是 如 果 关 闭 正 的 
主 窗口 ， 系 统 就 会 弹出 “是 否 关闭 此 窗口 ”的 确认 对 话 框 ， 只 有 单 击 “ 是 ”按钮 后 才 可 以 关闭 正 主 窗口 。 
图 设计 过 程 
创建 弹出 窗口 new.htm， 并 编写 关闭 控制 语句 ， 关 键 代 码 如 下 : 
<table width="322" height="206" border="0" celipadding="-2" cellspacing="-2"> 
<h> 


<td height="200" background="001 ,jpg"><input name="Button" type="button"class="btn_grey" value=" 关 闭 " 
onClick="window.closeO:"> 


</td> 
<t> 
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读者 在 设计 网 站 时 可 以 考虑 将 本 实例 的 实现 方法 和 实例 420 的 方法 结合 ， 将 窗口 的 弹出 做 到 浏览 者 可 以 根 
据 自己 的 喜好 进行 控制 ， 这 样 就 会 有 更 好 的 用 户 体验 。 


图 实例 说 明 

弹出 窗口 有 多 种 方式 ， 有 时 为 了 需要 ， 在 弹出 窗口 时 要 与 用 户 打开 窗口 之 间 有 一 定 的 时 间 间 隔 。 本 实例 就 
是 实现 了 这 一 效果 ， 读 者 在 打开 网 页 时 ，5 秒 钟 之 后 才 会 在 网 页 中 弹出 新 的 窗口 ， 这 样 就 给 浏览 者 争取 了 一 部 
分 进行 其 他 操作 的 时 间 。 本 实例 运行 效果 如 图 16.6 所 示 。 


CE 


本 页 。。 新品 上 况 。 苦 们 再 品 。 会 丙 基建 队 委 和 国生] 里 。 要 抹 
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16.6 ”定时 打开 窗口 


图 关键 技术 
实现 本 实例 的 主要 方法 是 setTimeout0 方 法 和 一 个 自 定义 的 函数 ,在 函数 中 可 以 直接 调用 window 对 象 的 open0 
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方法 。 对 于 setTimeout() 方 法 和 open() 方 法 ， 请 参见 实例 418 和 实例 420 的 关键 技术 部 分 。 
图 设计 过 程 
(1) 创建 弹出 窗口 new.htm。 


(2) 创建 网 站 首页 index.htm， 并 编写 控制 弹出 窗口 的 代码 ， 关 键 代码 如 下 : 
i 


function pushO{ 
window.open("new.htm","new", "height=190,width=775.top=30,left=30"); 


</script> 
国 秘笈 心 法 


在 设计 网 站 时 可 以 结合 本 实例 给 出 的 几 种 方法 ， 将 弹出 窗口 设计 成 读者 可 自行 创建 和 关闭 ， 也 可 以 定时 创 
建 手动 关闭 等 效果 。 


实例 423 


图 实例 说 明 

用 户 在 浏览 网 页 时 都 希望 网 页 的 信息 是 最 新 的 ， 为 了 达到 这 一 点 ， 在 关闭 新 的 弹出 窗口 时 可 以 对 其 父 窗口 
进行 刷新 ， 也 就 是 用 户 通过 open0 方 法 打开 一 个 新 窗口 ， 在 新 窗口 中 对 一 些 数据 进行 了 修改 ， 关 闭 该 子 窗口 后 
希望 可 以 在 父 窗口 中 看 到 更 新 的 内 容 。 本 实例 便 实现 了 这 一 效果 ， 如 图 16.7 所 示 。 


图 16.7 关闭 弹出 窗口 时 刷新 父 窗口 


图 关键 技术 


本 实例 主要 应 用 window.open0 语 句 打开 新 窗口 ， 并 在 新 窗口 中 应 用 opener 属性 ,该 属性 返回 一 个 引用 ,用 
于 指定 打开 本 窗口 的 窗口 对 象 。 

语法 : 

window.opener 

window.opener 方 法 

window.opener 属性 


功能 : 返回 的 是 一 个 窗口 对 象 。opener 属性 与 打开 该 窗口 的 父 窗口 相 联系 ， 当 访问 子 窗口 中 的 opener 属性 
时 ， 返 回 的 是 父 窗口 ， 通 过 该 属性 ， 可 以 使 用 父 窗口 对 象 中 的 方法 和 属性 。 
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实现 本 实例 还 要 用 到 reload0 方 法 ,该 方法 的 功能 和 浏览 器 上 的 刷新 按钮 是 一 样 的 ， 只 要 在 自 定义 函数 中 调 
用 它 即 可 。 
图 设计 过 程 

(1) 创建 父 窗口 index.htm， 并 做 出 快捷 方式 ， 控 制 子 窗口 的 弹出 。 

(2) 创建 子 窗口 new.htm， 并 编写 控制 子 窗口 关闭 和 刷新 父 窗口 的 代码 ， 关 键 代码 如 下 : 

<script language="javascript"> 

function MycheckO 

enc 关 闭 子 窗口! 字 

window.opener.location reloadO; /刷新 父 窗口 中 的 网 页 


window.close(); /关闭 当前 窗口 
} 


图 秘笈 心 法 


本 实例 的 实现 有 着 很 大 的 实用 价值 ， 即 可 以 让 用 户 更 好 地 浏览 到 最 新 的 网 页 信息 ， 获 取 更 大 的 信息 量 ， 用 
户 体验 好 了 ， 网 站 的 访问 量 就 不 是 问题 了 。 


图 实例 说 明 

通常 情况 下 ， 在 使 用 window 对 象 中 的 close0 方 法 关闭 正 主 窗口 时 ， 都 会 弹出 一 个 “你 查看 的 网 页 正在 试 
图 关闭 窗口 ， 是 否 关闭 此 窗口 ? ”的 询问 对 话 框 ， 这 样 用 户 总 是 要 先 关闭 对 话 框 才 可 以 关闭 主 窗口 ， 这 是 很 麻 
烦 的 。 本 实例 将 介绍 如 何 屏蔽 对 话 框 ， 以 解决 这 个 问题 ， 其 运行 效果 如 图 16.8 所 示 。 
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图 16.8 ”屏蔽 对 话 框 效果 


图 关键 技术 

本 实例 应 用 的 实现 方法 就 是 实例 423 中 介绍 的 window 对 象 的 opener 属性 ， 只 要 将 该 属性 关闭 的 正 窗口 的 
打开 窗口 设置 为 null， 这 样 再 使 用 window 对 象 的 close0 方 法 关闭 正 主 窗口 时 就 不 会 弹出 对 话 框 了 。 
图 设计 过 程 

创建 用 于 实现 效果 的 网 页 index.htm， 编 写 控制 代码 ， 关 键 代码 如 下 : 

<td width="17%"><a href="#" onClick="window.location.reload0:">。 刷新 页 面 </a> <br> 


<a href="#" onClick="window.opener=null:window.close0:">。 ”关闭 系统 </a> 
<ltd> 
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国 秘笈 心 法 
本 实例 的 实现 方法 可 以 应 用 到 很 多 网 站 中 ， 尤 其 是 一 些 链接 比较 多 的 网 站 ， 运 用 此 功能 可 以 很 大 程度 上 节 
约 用 户 的 浏览 时 间 ， 省 去 不 必要 的 麻烦 ， 使 用 户 拥有 更 好 的 体验 。 


实例 425 


图 实例 说 明 

很 多 网 站 都 选择 了 在 用 户 打 开 网 页 时 弹出 一 些 新 窗口 ， 如 广告 、 网 站 协议 等 ， 如 果 每 次 打开 网 页 都 会 弹出 
这 些 新 窗口 ， 时 间 久 了 会 让 用 户 产生 厌烦 心理 ， 最 终 会 影响 到 网 站 的 访问 量 。 而 本 实例 的 实现 就 解决 了 这 一 问 
题 , 它 只 在 用 户 第 一 次 登录 网 站 时 才 弹 出 新 窗口 。 本 实例 的 运行 效果 如 图 16.9 所 示 , 第 一 次 访问 时 将 弹出 窗口 ， 
当 关 闭 浏览 器 再 次 访问 时 不 会 弹出 窗口 。 
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图 16.9 弹出 窗口 的 Cookie 控制 


图 关键 技术 

Cookie 是 一 个 文本 文件 ， 是 网 站 在 访问 者 硬盘 上 存储 的 一 些 定制 的 信息 段 。 通 过 浏览 器 ， 网 页 可 以 实现 对 
Cookie 的 存储 、 获 取 和 删除 。Cookie 的 目的 只 有 一 个 ， 即 记录 访问 者 的 个 体 信息 。 在 开始 使 用 Cookie 前 ,读者 
需要 知道 下 面 的 规则 : 

浏览 器 可 以 存储 的 总 Cookie 数量 不 能 超过 300 个 ， 每 个 服务 器 不 得 超过 20 个 〈 对 于 整个 服务 器 ， 而 不 仅 
是 用 户 自己 的 网 页 或 网 站 )。 存 储 容量 也 限制 在 每 个 Cookie 4KB， 所 以 不 要 试图 在 一 个 Cookie 中 存储 过 多 的 信 
息 。 默认 情况 下 , 一 个 Cookie 可 以 在 整个 浏览 器 的 运行 期 间 存在 ; 当 用 户 退 出 浏览 器 后 ，Cookie 内 容 就 会 消失 。 
为 了 让 一 个 Cookie 的 持续 时 间 超 过 一 个 浏览 周期 ， 可 以 设置 失效 日 期 。 


图 设计 过 程 
(1) 创建 弹出 窗口 newhtm。 
(2) 创建 控制 窗口 index.htm， 并 在 其 中 编写 控制 代码 ， 关 键 代码 如 下 : 


function openWindowO{ 
window.open("new.htm",""."width=352.height=193") 
} 


function GetCookie(name){ /获取 登录 信息 


Var offsetend: 
if(document.cookie length>0){ 
offset = document.cookie.indexOf(search); 
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这 offset = -D){ 
offset += search_length: 
end = document.cookie.indexOf(":".offset): 
iflend — -1) end = document.cookie length; 
returnvalue = unescape(document.cookie.substring(offset.end)): 


function LoadPopO{ // 判 断 是 否 是 第 一 次 登录 ， 如 果 是 则 弹出 窗口 

jf(GetCookie("pop")—"){ 

openWindow0: 

要 
国 秘笈 心 法 

如 果 想 再 次 弹出 窗口 ， 可 以 在 浏览 器 中 选择 “工具 ”一 “Internet 选项 ”命令 ， 在 弹出 的 对 话 框 的 “常规 ” 
选项 卡 中 单 击 “ 删 除 Cookies” 按 钮 ， 然 后 单 击 “ 确 定 ”按钮 即 可 。 


16.2 ”弹出 网 页 对 话 框 


本 节 介绍 的 网 页 对 话 框 是 指 通过 指定 的 脚本 代码 打开 的 窗口 ， 这 些 窗口 都 是 有 返回 值 的 。 网 页 对 话 框 可 以 分 
为 两 种 ， 一 种 是 网 页 模式 对 话 框 ， 另 一 种 是 网 页 非 模式 对 话 框 。 下 面 将 通过 具体 实例 介绍 如 何 应 用 网 页 对 话 框 。 


初级 
实用 指数 : 走廊 丰 从 
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力 实例 说 明 
网 页 对 话 框 的 基本 操作 就 是 弹出 网 页 模式 对 话 框 ， 只 有 处 理 好 了 弹出 网 页 模式 对 话 框 ， 接 下 来 才 好 做 出 其 

他 更 多 的 操作 。 本 实例 便 实现 了 弹出 网 页 模式 对 话 框 ， 并 对 对 话 框 的 大 小 进行 了 设置 。 实 例 运 行 效果 如 图 16.10 

所 示 。 

弹出 页 硬汉 恒 -网 ZE 本 = = 


姓名 所 属 部 门 


外 出 原因 


2 时间 加 至 


16.10 ”弹出 网 页 模式 对 话 框 


力 关键 技术 


本 实例 主要 应 用 window 对 象 的 showModalDialog0 方 法 ， 该 方法 用 于 弹出 网 页 (模式) 对话 框 ， 其 语法 格 
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式 如 下 : 


variant = object.showModalDialog(sURL [. vArguments [. sFeatures]]) 
参数 说 明 
@ sURL: 指定 URL 文件 地 址 。 
@ vArguments: 用 于 向 网 页 对 话 框 传递 参数 ， 传 递 参 数 的 类 型 不 限制 ， 对 于 字符 串 类 型 ， 最 大 为 4096 个 字 
但 也 可 以 传递 对 象 ， 如 index.htm。 
目 sFeatures: 可 选 参数 ， 窗 口 对 话 框 的 设置 参数 ， 所 有 参数 都 是 可 选 参数 。 主 要 参数 如 表 16.2 所 示 。 
表 16.2 sFeatures 主要 参数 
参数 说 有明 
dialogWidth:number 设置 对 话 框 的 宽度 
dialogHeight:number 设置 对 话 框 的 高 度 
dialogTop:number 设置 对 话 框 窗口 相对 于 桌面 左上 角 的 Top 位 置 
dialogLeft:number 设置 对 话 框 窗口 相对 于 桌面 左 侧 的 Lef 位 置 
center: {yes | no0|1|0} 指定 是 否 将 对 话 框 在 桌面 上 居中 ，yes|1 为 居中 显示 ，nol0 为 不 居中 显示 ， 默 认 值 为 yes 
help: {yeslno 10 指定 对 话 框 窗口 中 是 否 显示 上 下 文敏 感 的 帮助 图 标 。 默 认 值 是 yes 
scroll: {yeslno 1|0} 指定 对 话 框 是 否 出 现 滚动 条 
resizable: fyeslnolll0} 指定 对 话 框 窗口 大 小 是 否 可 变 ， 默 认 值 是 no 
status: {yesno 1|0} 指定 对 话 框 是 否 显示 状态 栏 


图 设计 过 程 
(1) 创建 弹出 的 网 页 模式 对 话 框 newhtm。 
(2) 创建 控制 页 面 ndex.htm， 并 在 控制 页 面 编写 控制 代码 ， 关 键 代码 如 下 : 
<script language="javascript"> 
function opendialog() 
1 someValue=window.showModalDialog("new.htm",""."dialog Width=640px:dialogHeight=423px:status=no;help=no:scrollbars=no") 


} 
‘</script> 


图 秘笈 心 法 


本 实例 的 实现 内 容 可 以 应 用 到 很 多 地 方 ， 如 商业 网 站 的 注册 信息 的 填写 ， 以 及 一 些 需要 随时 更 新 的 网 站 公 


这 
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图 实例 说 明 

在 进行 网 站 开发 时 ， 有 时 一 些 信息 只 有 特定 的 用 户 才 能 看 到 ， 而 且 必 须 看 到 ， 那 么 在 设计 时 就 可 以 将 这 些 
信息 放 到 一 个 网 页 模式 对 话 框 中 ， 在 进行 显示 时 实现 全 屏 显示 即 可 。 本 实例 便 实 现 了 该 功能 ， 在 用 户 单 击 相关 
超 链接 以 后 ， 弹 出 相应 的 网 站 服务 规定 和 信息 ， 运 行 效果 如 图 16.11 所 示 。 


图 关键 技术 


本 实例 主要 应 用 screen 对 象 的 width 、height 属性 和 window 对 象 的 showModalDialog0 方 法 实现 ， 
showModalDialog() 方 法 的 具体 介绍 请 参见 实例 426。 打 开 网 页 对 话 框 除 了 使 用 showModalDialog() 方 法 外 ， 还 可 
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使 用 showModelessDialog() 方 法 。 


回 一 本 严 一 


雪 六 Rs 雪 


rn 


Ht 3 元》 
3 器 
验 呈 ”二 咕 到 
人 古风 Eee EE 
ET ER [本 
Ormeas 
HF | 8 说 (元 ) 
CE 本 是 
于 半生 红 生 计 证 失 全 区 和 天竺 - 避 
放 抽 ，， 醒 咕 Hj Ee EE 
EE 条 需 |。 可 有 HH, 本 和 乔 |， 病 拖 圭一 寺 宇和 相 寺 和 ee 


图 16.11 全 屏 显 示 网 页 模式 对 话 框 


showModalDialog0 和 showModelessDialog0 方 法 两 者 的 主要 区 别 就 在 于 showModalDialog0 打 开 的 网 页 对 话 
框 是 模式 窗口 ， 并 且 是 置 在 父 窗 口上 的 ， 要 想 关 闭 父 窗口 ， 就 必须 先 关闭 该 对 话 框 :而 showModelessDialogO 
方法 打开 的 对 话 框 是 无 模式 窗口 ， 打 开 后 无 论 关 闭 与 否 都 可 以 访问 父 窗口 或 其 他 窗口 。 
图 设计 过 程 

(1) 创建 全 屏 弹出 窗口 new.htm。 

(2) 创建 控制 弹出 窗口 的 主 窗口 ndex-htm， 并 将 控制 代码 写 入 ， 关 键 代码 如 下 : 


Var height=screen.height: 
window.showModalDialog("new.htm".""."dialog Width="+width+"px:dialogHeight="+height +"px;status=no:help=no:scrollbars=no") 
} 


</script> 
<td width="64"><a href="#" onClick="opendialog0"> 购 买 须知 </a></td> 


图 秘笈 心 法 


实现 本 实例 后 ， 再 设计 网 站 时 ， 就 可 以 做 到 强制 用 户 去 注意 一 些 网 站 的 规定 ， 这 样 可 以 更 好 地 约束 用 户 的 
行为 ， 维 护 网 站 的 正常 合法 运营 。 


实例 428 


力 实例 说 明 
在 进行 网 页 人 机 交互 时 ， 经 常会 遇 到 一 些 网 页 需要 进行 时 间 的 输入 ， 如 果 让 用 户 手工 输入 的 话 ， 那 么 在 时 


间 的 格式 上 是 很 难 控制 的 ， 而 且 还 不 方便 操作 。 为 了 解决 该 问题 ， 可 以 在 网 页 中 加 入 日 期 选择 器 ， 让 用 户 自 行 
选择 设计 好 格式 的 时 间 。 本 实例 便 实现 了 这 一 效果 ， 运 行 效果 如 图 16.12 所 示 。 
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加 


外 日 时 泽 匡 - Windows Intemet Explorer = 


请 假 时 间 2010-08-07 


图 16.12 实现 网 页 日 期 选择 


图 关键 技术 


本 实例 主要 应 用 window 对 象 的 showModalDialog0 方 法 实现 , showModalDialog( ) 方 法 的 详细 介绍 请 读者 参 
见 实例 426。 


图 设计 过 程 
(1) 创建 网 站 首页 index.htm， 在 本 页 创建 弹出 窗口 网 页 控制 快捷 方式 。 


(2) 创建 需要 进行 日 期 选择 的 网 页 new.htm， 编 写 控制 函数 loadCalendar0， 具 体 代码 如 下 : 
<script language="javascript"> 
function loadCalendar(field) 
{ 
var rtn = window.showModalDialog("calendar.htm","","dialog Width:280px:dialogHeight:250px:status:no:help:no;scrolling=no;scrollbars=no"): 
if(rtn!=null) 
field.value=rtn: 
Tetum; 
} 
‘</script> 
(3) 创建 日 期 选择 页 面 calendarhtm， 并 编写 日 期 显示 代码 ， 本 部 分 代码 是 实现 本 实例 的 关键 部 分 ， 关 键 
代码 如 下 : 
<script language=javascript> 
Var monthNames = new Array ("™", "1","2","3","4","5","6","7", "8", "9", "10", "11", "12" ); 
var endDay = new Array ( 0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ); 
var dayNow = 0; 
var monthNow = 0; 
Var yearNow = 0; 
function load ( form ) { 
set_month_year_now 0: 
var found = false; 
for ( var month=0; month<form.monthList.length; month++ ) 
if (form.monthList[month].text 一 monthNames[monthNow] ) { 
form.monthList[month].selected = true; 
found = true; 


} 

if( !found) { 
error (0): 
Tetumn; 


var found = false: 
for (Var year=0; year<form.yearListlength: year++ ) 
ff( form.yearList[year].text 一 yearNow ) { 
form yearList[year].selected = tme: 
found = true: 
if(!found) { 


error 0; 
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Teturm: 
} 
display month ( form ); 


function preceding month ( form ) { 
var month_selected = form.monthList.selectedIndex; 
Var year_selected = form.yearList.selectedIndex; 
if( !month selected &é& !year selected) { 
error (0; 
Teturn; 


} 

if( month selected>0) 
month_ selected --; 

else { 
month selected = 11; 
year_selected --; 


} 
forn. monthList[month_selected].selected = true: 
form yearList[year_selected].selected = true; 
display_month ( form ); 
} 
function following_month ( form ) { 
Var month_selected = form.monthList.selectedIndex; 
Var year_selected = form.yearList.selectedIndex; 
if ( month selected >= ( form.monthList.length - 1 ) &é& year_selected >= ( form.yearList.length - 1 ) ) { 
error |; 
Teturn; 
} 


if (month selected< 11 ) 
Ionth_selected ++; 
else { 
month_selected = 0; 
year_selected ++; 
} 
form.monthList[month_selected].selected = true: 
form.yearList[year_selected].selected = true; 
display_month ( form ); 
} 
function set month year nowO { 
Var form = document.calendar: 
Var now = new Date (|; 
monthNow = now.getMonth 0 + 1; 
yearNow = now.getYear (): 
dayNow = now.getDate(); 
yearNow = ( yearNow < 100 ) ? yearNow + 1900 : yearNow: 
Var count=0 
for (var i = yearNow-103; i < yearNow + 50; iH+) { 
eval("form.yearList.options[count] = new Option(™+i+", "+it"" 
counttt; 
form.yearList.selectedIndex = 103: 
form.yearList.length = count: 


} 

fanction display month (form) { 
var month = form monthListselectedIndex + 1; 
var year =parseInt ( form yearListoptions[ form yearList selectedIndex] text ): 
var start_day = start_day in_ month ( year month ); 
Var count = 
for ( var row=0: Tow<6: row++) { 

for ( var col=0; col<7: colt+ ) 


让 (row 一 0&&col<(start day-1)) 
Var day =""; 

else if( count <endDay[month] ) 
day =++count: 
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else 
有 

form.dayBox[(row*7)+col].style.display =""; 
form.dayBox[(row*7)+col].style.color = "black"; 
if(day—"™") { 

form.dayBox[(row*7)+col].style.display = "none": 
}else { 
form.dayBox[(row*7)+col].value = day: 
if(col%7 一 0) form.dayBox[(row*7)+col].style.color = "red"; 


if (yearNow 一 year &é& monthNow 一 month &é dayNow 一 day) form.dayBox[(row*7)+col].style.color = "blue";; 


} 

finction start day in month ( year month) { 
var day daynum, ndays, mnum: 
sday = start_day_in_ year ( year ); 
endDay[2] = ( year % 4 ) ? 28 : 29; 


ndays = sday; 
for ( mnum=2; mnum<month+1; mnumt+ ) 
ndays = ndays + endDay[mnum-1]; 
daynum = ndays % 7; 
} 
daynum = (ldaynum) ? 7 : daynum:; 


Tetum (daynum); 

} 

function start day in year(year) { 
Var y, m, d; 
varn; 


y=year- 1;m=13;d=1; 
n=d+2*m+(Math.floor((0.6+(m+1)))+y); 

n=n+Mathfloor (((y/ 4)- Mathfloor ( (y/ 100))+ Math.floor((y/400))) 
n=Math.floor (((n/7-Math.floor ((n/7)))*7+0.5)); 

Teturn (n+1); 


} 
function CheckDate(strDay) { 
Var docFrm = document.calendar: 
Var choice_daynum = 0; 
Var current_daynum = 0; 


Var strY = docFrm.yearList.value; 

Var strM = docFrm.monthList.value; 

Var curr y= new String(yearNow); 

Var curr_m = new String(monthNow); 

var curr d =new String(dayNow):; 

if (curr m.length 一 1) curr m= "0"+cur m; 

if (curr d.length 一 1) curr d="0"+curr d: 

current_daynum = new Number(curr y+cur m+ curr d) : 

if (strM.length 一 1) strM ME 

if (strDay.length 一 1) strDay "+strDay: 
choice_daynum = new Number(strY + strM + strDay): 


+25 


parent.window.returnValue = strY+"-"+strM+"-"+strDay; /将 选择 的 日 期 传递 到 父 窗 口中 


Parent window:closeO: 
} 

Tetum false; 
上 


</script> 
<body onLoad="load(document.calendar)" topmargin="0"> 
<center> 
<form name="calendar"> 
<table border="0" cellpadding="0" cellspacing="0"> 
<tr> 
<td colspan="3" height="24"></td> 
< 
<tr> 
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<td width="205" align="right" VALIGN="MIDDLE" nowrap= nowrap"> 
<select name="yearList" onChange="display_month(this.form)"> 
</select></td> 
<td width="65" nowrap="nowrap" align="left"><select name="monthList" size="1" onChange="display_month(this.form)"> 
<option value="1">1</option> 
<option value="2">2</option> 
<option value="3">3</option> 
<option value="4">4</option> 
<option value="5">5</option> 
<option value="6">6</option> 
-<option value="7">7</option> 
<option value="8">8</option> 
<option value="9">9</option> 
<option value="10">10</option> 
<option value="11">11</option> 
<option value="12">12</option> 
</select> 
</td> 
<td width="10"></td> 
<> 
<tr> 
<td colspan="3" height="6"></td> 
</t> 
<t> 
<td colspan="3"><table border="0" cellpadding="1" cellspacing="0" align="center"> 
<tr> 
<td bgcolor="#82664F"><table border="0" cellpadding="0" cellspacing="0"> 
<tr bgcolor="#82664F" height="18"> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF"><font color="#FF0000"> 日 </font></td> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF">—</td> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF"> 二 </td> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF"> 三 </td> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF"> 四 </td> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF"> 五 </td> 
<td width="31" align="center" nowrap="nowrap" BGCOLOR="#0099FF"> 六 </td> 
<t> 
<tr bgcolor="#FFFFFF" height="18"> 
<td align="center"><input type="text" size="2" name="dayBox” readOnly onClick="javascript:CheckDate(this.value);" 
‘onMouseOver="this.style.background=#EEEEEE”" onmouseout="this.style.background=white"> 
<ltd> 
<td align="center"><input type="text” size="2" name="dayBox” readOnly onClick: 
‘onMouseOver="this.style.background=#EEEEEE”™" onmouseout="this.style.background="white™> 
<td> 
<td align="center"><input type="text" size="2" name="dayBox" readOnly onClick="javascript:CheckDate(this.value);" 
‘onMouseOver="this.style.background=#EEEEEE”" onmouseout="this.style.background=white"> 
<t> 
<td align="center"><input type="text" size="2" name="dayBox" readOnly onClick="javascript:CheckDate(this.value);" 
‘onMouseOver="this.style.background=#EEEEEE”" onmouseout="this.style.background="white”™> 
<td> 
<td align="center"><input type="text" size="2" name="dayBox” readOnly onClick="javascript:CheckDate(this.value);" 
‘onMouseOver="this.style.background=#EEEEEE”" onmouseout="this.style.backeground='white"> 


"javascript:CheckDate(this.value);" 


<htd> 
<td align="center"><input type="text" size="2" name="dayBox" readOnly onClick="javascript:CheckDate(this.value);" 
<htd> 
</tr> 
</table></td> 
</t> 
</table></td> 
</> 
</table> 
</form> 
‘</center> 
</body> 


</html> 
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图 秘笈 心 法 


其 实在 设计 网 页 时 ， 不 仅 时 间 可 以 让 用 户 进行 选择 ， 性 别 、 爱 好 等 也 都 可 以 进行 选择 输入 ， 这 样 不 仅 可 以 
方便 用 户 操 作 ， 而 且 可 以 控制 输入 内 容 的 格式 。 


图 实例 说 明 
在 一 些 网 站 中 ， 尤 其 一 些 博客 论坛 中 总 会 有 浏览 者 留言 这 个 模块 。 为 了 突出 留言 者 的 个 性 和 引 人 注 意 ， 在 


留言 时 可 以 将 字体 颜色 进行 相应 的 改变 。 本 实例 便 实 现 了 在 进行 留言 编辑 时 用 户 可 以 选择 自己 喜欢 的 字体 颜色 ， 
运行 效果 如 图 16.13 所 示 。 


一 答 久 言 = 
| 了 | zj 字体 | 未 FI] 字号 5 厦 色 国 罩 


16.13 ”网 页 拾 色 器 效果 
图 关键 技术 


在 本 实例 中 仅 使 用 216 种 浏览 器 安全 的 颜色 ， 即 所 谓 Netscape 色 块 。 这 216 种 颜色 分 别 代表 0、51、102、 
153 和 204 这 5 个 颜色 值 以 及 每 一 种 原色 ( 即 红 、 绿 、 蓝 )。 这 些 十 进 制 数值 对 应 的 十 六 进 制 数 分 别 为 0x00、0x33、 
0x66、0x99、0xCC 和 0xFF。 在 HIML 的 颜色 属性 中 ， 黑 色 是 #000000， 纯 红色 是 姓 F0000， 纯 绿色 是 #00FF00， 
纯 蓝 色 是 #0000FF， 白 色 是 性 FFFFF。 在 实现 网 页 拾 色 器 时 ， 需 要 应 用 JavaScript 的 数组 。 创 建 数组 可 以 有 以 下 
3 种 方法 。 
(1) 无 参数 调用 。 语 法 格式 如 下 : 
var h = new ArrayO; 
(2) 指定 数组 前 n 个 元 素 的 值 。 语 法 格式 如 下 : 
var h = new Array(arglist): 
其 中 参数 arglist 是 一 个 用 逗号 隔 开 的 值 表 ， 这 些 值 用 于 给 Variant 所 包含 的 数组 的 各 元 素 赋值 。 如 果 不 提供 
参数 ， 则 创建 一 个 长 度 为 0 的 数组 。 
G3) ha 语法 格式 如 下 : 
var h= new Array(n); 
其 中 参数 n 是 指定 数组 的 长 度 。 由 于 在 JavaScript 中 ， 数 组 的 第 一 个 元 素 的 下 标 值 为 0， 所 以 n 的 值 为 数组 
的 最 大 下 标 值 加 1。 


图 设计 过 程 


(1) 创建 index.htm 网 页 ， 并 在 其 中 编写 控制 代码 ， 实 现 调用 拾 色 器 页 面 ， 关 键 代 码 如 下 : 
<script language="javascript"> 
fanction colorpick(field) { 
var rtn = window.showModalDialog("color htm","","dialogWidth:225px:dialogHeight:170px:status:no:help:no:scrolling=no:scrollbars=no"); 
iflrin!=null) 
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field .style.background=rtn: 
Tetum; 


了 
</script> 颜色 
<input name="color" type="text" id="color" size="3" readonly="yes" style="background-color#000000" onClick="colorpick(this):"> 
</span></td> 
(2) 创建 拾 色 器 页 面 color.htm， 并 编写 相应 的 自 定义 函数 ， 关 键 代 码 如 下 : 
<body> 
<script language="JavaScript"> 


function action(RGB) { 
/lalert(' 您 选择 的 颜色 是 :#+RGB); 
parent.window.returnValue="#"+RGB; 
window:close0; 


} 
function Mcell(R, G B) { 
document.write('<td bgcolor="# +R+ G+B+">"); 
document.write('<a href="#" onClick="action(\ + (R+ G+B)+N\)">); 
document.write('<img border=0 height=12 width=12 \)" alt=\#+R+G+B+\>"); 
document ,write('</a>); 
document.write('‘</td>"); 
} 
function Mtr(R, B) { 
document.write('<tr>"); 
for (var i= ; 
Mcell(R, 


} 
document write('</tr>) 


} 
function Mtable(B) { 


document.write('</table>"); 


} 
function McubeO { 
document.write('<table cellpadding=0 cellspacing=0 border=0><tr>"); // 
for (var i=0;i<6; HD) { 
if(i%3—0){ 
document.write('<tr>"): 
} 
document.write('<td bgcolor="#FFFFFF">"); 
Mtable(h[i]) 
document.write('</td>"); 
} 
if(i%3=—0){ 
document.write('</tr>"); 


} 
document.write('‘</tr></table>"): 
站 
Meube0 
二 > 
</script> 
</body> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 实现 在 开发 网 站 时 ， 使 用 网 页 拾 色 器 实现 网 页 的 换 肤 功能 。 
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16.3 窗口 的 动画 效果 


在 浏览 网 页 时 ， 许 多 窗口 在 打开 时 都 显示 了 各 种 各 样 的 动画 效果 ， 这 样 可 以 在 浏览 页 面 时 ， 给 人 一 种 动态 、 
新 颖 的 效果 。 下 面 将 通过 几 个 典型 实例 进行 详细 讲解 。 


实用 指数 : 食 人 福全 


图 实例 说 明 
本 实例 主要 实现 了 在 用 户 打开 网 页 时 ， 网 页 自动 纵向 滚动 ， 显 示 网 页 底部 ， 用 户 只 有 在 调整 窗口 到 合适 大 
小 时 才 可 看 到 全 部 网 页 内 容 。 本 实例 还 实现 了 标题 的 横向 循环 滚动 。 运 行 效果 如 图 16.14 所 示 。 


16.14 页 面 自动 滚动 


图 关键 技术 


本 实例 主要 是 应 用 window 对 象 的 scroll0 方 法 指定 窗口 的 当前 位 置 。 下 面 对 scroll0 方 法 的 使 用 进行 详细 的 
介绍 。 

scroll0) 方 法 的 语法 格式 如 下 : 

scroll(x,y); 

参数 说 明 

© x: 屏幕 的 横向 坐标 。 

@y: 屏幕 的 纵向 坐标 。 

功能 : 指定 窗口 显示 位 置 的 坐标 。 


国 设计 过 程 
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图 秘笈 心 法 


对 于 本 实例 的 实现 方式 ， 读 者 可 以 将 其 运用 到 一 些 网 页 中 ， 这 样 用 户 在 浏览 网 页 时 就 必须 查看 全 部 网 页 内 
容 ， 从 而 可 以 更 好 地 获取 网 页 中 的 全 部 信息 ， 包 括 一 些 网 页 规范 ， 有 利于 网 站 的 正常 运营 
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力 实例 说 明 


本 实例 主要 实现 了 在 用 户 打开 网 页 时 ， 所 弹出 的 窗口 是 最 小 状态 ， 然 后 窗口 的 高 度 慢 慢 增加 ， 直 到 和 屏幕 
的 高 度 一 样 ， 当 高 度 和 屏幕 一 样 后， 窗口 的 宽度 便 开 始 增长 ， 直 到 和 屏幕 的 宽度 一 样 ， 这 时 整个 窗口 便 稳 定 下 
来 不 再 变化 。 实 例 运行 效果 如 图 16.15 所 示 。 


实 和 类 | 次 昌 ] 建议 网 站 ” 县 ] 网 页 快讯 库 
逢 动 丰 旺 示 容 口 从 "~ 园 - 己 吓 ”> ” 


由 


软件 网 购 识 板 | 
Ei... 
| 


图 16.15 动态 显示 网 页 
图 关键 技术 


本 实例 主要 应 用 了 screen 对 象 的 availWidth 和 availHeight 属性 来 获得 当前 屏幕 的 宽度 和 高 度 , 并 用 resizeTo0 
方法 来 自动 增加 窗口 的 高 度 和 宽度 。screen 对 象 的 介绍 请 参见 实例 419 的 关键 技术 部 分 。 下 面 将 详细 介绍 
resizeTo0 方 法 ， 其 具体 格式 如 下 : 

window.resizeTo(x.y) 

参数 说 明 

@ x: 窗口 的 水 平 宽度 。 

@ y: 窗口 的 垂直 宽度 。 

功能 : 将 窗口 改变 成 (x,y) 大 小 ，x、y 分 别 为 宽度 和 高 度 。 


图 设计 过 程 
创建 动态 显示 的 窗 口 ndex htm， 在 其 中 调用 window 对 象 的 resizeTo0 方 法 ， 关 键 代码 如 下 : 


~ topdist: 
for (sizeheight = 1: nt 
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selfresizeTo("1", sizeheight); 

了 

for (sizewidth = 1; sizewidth < winwidth: sizewidth +=— widthspeed) { 
self resizeTo(sizewidth, sizeheight); 

} 

} 

</script> 


图 秘笈 心 法 


根据 本 实例 的 实现 方法 ， 读 者 可 以 试 着 去 做 到 限定 窗口 的 打开 大 小 ， 可 以 制作 下 拉 式 的 窗口 ， 从 而 实现 更 
好 的 网 页 动态 效果 。 
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实用 指数 ， 让 让 页 页 


图 实例 说 明 
本 实例 的 实现 效果 是 当 窗 口 弹 出 时 ， 单 击 窗口 中 的 超 链接 ， 会 在 屏幕 的 左上 角 弹 出 子 窗口 ， 并 且 弹 出 的 子 
窗口 的 高 度 和 宽度 会 慢 慢 变 大 ， 直 到 和 整个 屏幕 一 样 ， 窗 口才 会 稳定 不 再 变化 。 本 实例 的 运行 效果 如 图 16.16 
所 示 。 
| 


| 
| | 软件 网 购 高 城 Wi 
| a 二 


图 16.16 指定 窗口 的 扩展 大 小 
图 关键 技术 


本 实例 主要 是 应 用 window 对 象 的 open() 方 法 来 打开 窗口 ， 用 screen 对 象 的 availHeight 和 availWidth 属性 
来 获取 屏幕 可 工作 区 域 ， 用 moveTo0 和 resizeTo0 方 法 来 设置 窗口 的 位 置 和 大 小 ， 用 resizeBy0 方 法 使 窗口 逐渐 
变 大 ， 直 到 和 屏幕 的 大 小 相同 。 下 面 主 要 对 window 对 象 的 resizeBy0 方 法 进行 介绍 。 

resizeBy0 方 法 的 语法 格式 如 下 : 

window.resizeBy(x.y) 

参数 说 明 

@ x: 窗口 放大 或 缩小 的 水 平 宽度 。 

@ y: 窗口 放大 或 缩小 的 垂直 宽度 。 

功能 : 改变 窗口 的 大 小 为 (x,y)， 当 x、y 的 值 大 于 0 时 为 扩大 ， 小 于 0 时 为 缩小 。 


图 设计 过 程 
(1) 创建 指定 大 小 的 弹出 窗口 newhtm。 
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winheight=100; 

winsize=100; 

5; 
in2=window.open("new.htm","","scrollbars=no™); 

win2 moveTo(0.0): 

win2.resizeTo(100.100): 

gow20: 


} 

fanction gow20{ 

if (winheight>=screen.availHeight-3) 
x=0 


if (winsize>=screen.width-5){ 
winheight=100 
winsize=100 
x=5 
Tetum 
setTimeout("gow20",50) 
} 
</script> 


图 秘笈 心 法 


本 实例 中 resizeBy0 方 法 的 应 用 可 以 加 以 扩展 ,不 仅 可 以 设 定 为 全 屏 显示 ,还 可 以 将 其 设 定 为 只 在 屏幕 的 左 
上 角 的 一 部 分 区 域 进 行 显示 ， 读 者 可 以 试验 一 下 。 


高 级 


实例 4 : 
实例 名、 实用 指数 : 广 娘 让 食 : 


图 实例 说 明 


网 页 设计 时 的 窗口 弹出 方式 很 多 ， 本 实例 便 实 现 窗口 从 屏幕 的 上 方 直接 空降 下 来 。 实例 运 行 效 果 如 图 16.17 
所 示 。 


首页 。 新品 上 名 。 匠 从 BB 吕 。 全 中 芹 理 。。 风物 千 。。 下 本 林 钊 。。 铺 国生 
er 和 
ECE 特 nas aa 
大 | | 
EL | 
妆 杂 | | 到 | 
身 百 IK 忆 各 - 
小 天 个 视 新 新 人 类 由 杭 
现价: 1000 00 更 们 : 2000 00 
i EE 
新 sr-m aa 
亲人 类 家 四 
国 国 日 =:/::>c> 
P= 。 训 : 起 5 时 怀 ， 之 # 后 浊 
下 详 基 信息 > 


16.17 ”实现 空降 窗口 
图 关键 技术 
本 实例 的 实现 首先 是 用 screen 对 象 的 availHeight 属性 获取 屏幕 的 工作 区 的 高 度 ， 然 后 使 用 window 对 象 的 
moveBy0 方 法 实现 窗口 的 下 降 操 作 。moveBy0 方 法 的 语法 如 下 : 


window.moveBy(x.y) 
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参数 说 明 

© x: 水 平 位 移 量 。 

@ y: 垂直 位 移 量 。 

功能 : 按照 指定 位 移 量 设置 窗口 的 大 小 。 


图 设计 过 程 
创建 下 降 动态 页 面 index.htm， 在 其 中 自 定义 函数 down0 中 调用 moveBy0 方 法 ， 实 现实 例 效果 ， 关 键 代码 
如 下 : 


self.moveBy(0,3); 
} 
} 


ee 
图 秘笈 心 法 
根据 本 实例 的 实现 方法 ， 读 者 还 可 以 实现 让 窗口 斜 着 弹出 等 动态 效果 。 


| 


力 实例 说 明 


本 实例 主要 实现 的 效果 是 在 弹出 窗口 时 先 指定 窗口 的 弹出 位 置 ， 然 后 让 窗口 慢 慢 变 大 ， 直 到 和 屏幕 的 工作 
区 大 小 一 样 为 止 。 实 例 运行 效果 如 图 16.18 所 示 。 
[BE RR -Wrdow nome PA 


Oe -1 x ow 
[xun wae sav cms IAM wih 

育 9 | 例 自 建 网 太 v 已 同人 心 计 库 一 
i 


3 吉 eH- TAO ~ 


图 16.18 慢 慢 变 大 窗口 


图 关键 技术 


本 实例 的 实现 主要 是 应 用 了 screen 对 象 的 availHeight 和 availWidth 属性 获取 屏幕 的 工作 区 的 大 小 ， 然 后 应 
用 window 对 象 的 resizeTo0 方 法 指定 窗口 的 弹出 位 置 ， 用 moveTo0 方 法 改变 窗口 的 大 小 。 


图 设计 过 程 
创建 变化 窗口 ndex.htm, 在 其 中 编写 自 定义 函数 bbig0, 并 在 函数 中 调用 window 对 象 的 resizeTo0 和 moveToO 
方法 实现 实例 效果 ， 关 键 代码 如 下 : 


<BODY onLoad="bbig0"> 
<table width="800" height="476" border="0" align="center" cellpadding="0" cellspacing="0"> 
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<t> 
<td width="800"><img src="12jpg" width="800" height="800" /></td> 
<t> 

</table> 

<script language="JavaScript"> 

var sun=800; 

var screenW=screen.avail Width: 

var screenH=screen.availHeight: 

window.resizeTo((screenW-sun).(screenH-sun)): 

Var initialW=screenW-sun: 

Var initialH=screenH-sun; 

Var x=((screenW)-initialW)/2; 

Var y=((screenH)-initialH)/2; 

window.moveTo(x.y); 

Var timer; 

function bbigO{ 

if (initialH<(window.: oo 30){ 
initialW=initialW+2: 
initialHinitialH+2; 
window.resizeTo(initialW.initialHD); 
timer=setTimeout("bbig0".50): 
X=x-1; 
‘window.moveTo(%,y); 


} 

else {window.clearTimeout(timer)} 
} 

</script> 

</BODY> 


图 秘笈 心 法 
在 本 实例 的 实现 基础 上 ， 读 者 可 以 试 着 让 窗口 慢 慢 变 小 和 在 屏幕 的 右 下 角 进 行 窗口 向 左上 角 慢 慢 放大 ， 也 
可 以 试 着 让 窗口 进行 缩小 。 


| “人 


图 实例 说 明 

很 多 读者 都 见 过 泡 泡 的 屏保 , 泡 泡 在 屏幕 中 来 回 地 弹跳 很 好 看 ， 本 实例 便 实现 了 窗口 从 屏幕 的 左上 角 弹 出 ， 
然后 在 屏幕 中 来 回 移动 ， 当 窗口 碰 到 屏幕 边缘 时 就 弹 开 ， 直 到 关闭 窗口 ， 移 动 的 效果 才 会 停止 。 实 例 运 行 效果 
如 图 16.19 所 示 。 


图 16.19 移动 的 窗口 


第 16 章 窗口 的 应 用 


关键 技术 


本 实例 主要 应 用 screen 对 象 的 availHeight 和 availwidth 两 个 属性 获取 屏幕 的 工作 区 ， 然 后 判断 窗口 是 否 碰 
到 屏幕 边缘 , 如 果 碰 到 就 弹 开 。 还 应 用 了 window 对 象 的 resizeTo0 和 moveTo0 方 法 进行 指定 窗口 的 大 小 和 位 置 。 


图 设计 过 程 

创建 移动 窗口 index.htm， 在 其 中 自 定义 函数 ltir0， 在 函数 中 使 用 screen 对 象 以 及 window 对 象 的 方法 
TesizeTo0 和 moveTo0， 就 可 以 实现 本 实例 的 效果 ， 关 键 代码 如 下 : 

<body> 


<img src="12jpg" width="782" height="600"> 
<script language="JavaScript"> 
window.resizeTo(300,300) 
window.moveTo(0.0) 
inter=setInterval("ltorO", 1); 
Var aa=0 

var bb=0 

Var a=0 

var b=0 

function ltor0 

{ 


ty{ 

证 (aa 一 0) 

a=at2; 

if (a>screen.availWidth-300) 
aa=l; 


b=b+2; 
if (b>screen.availHeight-300) 
bb=1: 


bb=0: 


o Ww.moveTo(a,b); 
} 
Sy 0 


</script> 
</body> 


秘笈 心 法 


读者 可 以 根据 本 实例 的 实现 方法 让 网 页 中 出 现 一 些 移动 的 装饰 ， 也 可 以 将 网 站 的 一 些 协议 和 注意 事项 在 窗 
口中 移动 出 现 ， 从 而 更 好 地 引起 用 户 的 注意 。 
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图 实例 说 明 


用 过 QQ 等 聊天 工具 的 读者 都 知道 ， 其 中 有 一 个 颤 屏 功能 ， 每 一 次 颤 屏 都 会 引起 对 方 注意 。 本 实例 就 是 实 
现 窗口 的 颤 屏 功能 ， 实 例 的 运行 效果 如 图 16.20 所 示 ， 当 单 击 窗口 中 的 相应 按钮 时 ， 窗 口 将 颤动 。 
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三 有 要 沪 上 下 民 动 | | 将 及 习 动 
EE mi J 大 -| 
2 


> 


软件 网 购 商 城 


上 Am 1 
上 E 计 从 沸 攻 和 中 本 大 广场 | 


16.20 ”震颤 窗口 


图 关键 技术 

本 实例 主要 使 用 了 window 对 象 的 moveBy0 方 法 ， 方 法 的 详细 介绍 请 参见 实例 433 的 关键 技术 部 分 ， 此 处 
不 再 奖 述 。 
图 设计 过 程 

创建 操作 网 页 index.htm， 在 其 中 编写 相关 的 自 定义 函数 ， 在 函数 中 调用 window 对 象 的 moveBy0 方 法 ， 实 
现实 例 效果 ， 关 键 代 码 如 下 : 

<body> 

全 

<SCRIPT language=javascript> 
function flap_xy(n){ 
if (self.moveBy){ 


for (i= 10;i>0; i-){ 
for OG =n;j> 0;j-){ 


self.moveBy(0,i): 
self.moveBy(i,0) 
self.moveBy(0. 
self.moveBy(-i 
1 
} 
} 
function flap x(n){ 
证 (selfmoveBy){ 
for (i=10;i>0:; i-){ 
for (=n;j>0;j-){ 
self.moveBy(i.0); 
self.moveBy(-i.0): 
} 
} 
} 
function flap_y(n){ 
if (self moveBy){ 
for (i= 10;i> 0;i-){ 
forG =n;j> 0;j-){ 
selfmoveBy(0.i: 
self moveBy(0.-iD: 
} 
} 
j 
} 
</SCRIPT> 


<input name="buttonl" type="button" id="button1" value=" 左 右 震 动 " onclick="flap_x(5)"> 

<input name="button2" type="button" id="button2" value=" 上 下 震动 " onclick="flap_y(5)"> 

<input name="button3" type="button" id="button3" value=" 整 屏 震动 " onclick="flap_xy(5)"> 
<p> 
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<p><img src="11.jpg" width="779" height="502"></p> 
</body> 
国 秘笈 心 法 


moveBy0 方 法 的 应 用 还 有 很 多 ， 不 同 的 参数 设 定 有 不 同 的 效果 。 读 者 可 以 试 着 改变 其 中 的 参数 ， 看 看 是 否 
可 以 得 到 更 多 的 效果 。 
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力 实例 说 明 
本 实例 实现 的 是 让 窗口 在 屏幕 中 以 一 点 为 圆心 进行 旋转 , 让 用 户 更 好 地 注 
意 到 该 窗口 ， 这 样 可 以 在 窗口 中 加 一 些 广告 信息 等 ,达到 更 好 的 宣传 效果 。 本 


实例 运行 效果 如 图 16.21 所 示 。 GO ewreorom ie -] 
关键 技术 安 和 天 | 房 自理 网 站 


牧 施 洁 的 窗口 
实现 本 实例 的 关键 问题 是 如 何 计 算出 窗口 运动 时 的 圆 形 轨迹 , 这 里 可 以 用 
公式 *Math.cos((i*Math.PD/180) 和 r*Math.sin((i*Math.PD/180) 计 算得 出 ， 这 样 
得 出 坐标 值 后 就 可 以 使 用 window 对 象 的 moveTo() 方 法 实现 窗口 的 旋转 。 两 个 
公式 的 参数 说 明 如 下 。 加 1621 雍和 的 窗 昌 
口 r: 指 的 是 圆 形 轨迹 的 半径 。 
口 i: 指 的 是 圆周 的 点 ， 通 过 它 可 以 求 出 圆 轨迹 的 各 点 坐标 。 


图 设计 过 程 

创建 实例 操作 窗口 index.htm， 编 写 自 定义 函数 eddy0， 在 自 定义 函数 中 调用 window 对 象 的 moveTo0 方 法 
和 圆 形 轨迹 的 计算 公式 ， 具 体 代码 如 下 : 
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<img align="left" src="001 jpg" width="150" height="60"> 
<script language="javascript"> 

Var a=275; 

Var b=275; 

var pp; 

Var 1=60; 

Var x=y=0; 
‘window.resizeTo(200.200); 

function eddy(i){ 

Var ob=document.all("tt"); 
X=r*Math.cos((i*+Math.PI)/180)+a: 
y=r*Math.sin((i*Math.PD)/180)+b; 
window.moveTo(x,y): 

iitl; 

if(1>100) {window.clearTimeout(pp):} 
else: 


(BR) gre 2 
于 计算 机 |E 和 > 下 100% 


ff(i>360){i=0:} 
reddy("Hit")".10); 
} 
} 
eddy(0): 
</script> 
</body> 


图 秘笈 心 法 
本 实例 的 实现 中 要 计算 出 圆 形 的 轨迹 ， 这 需要 很 好 的 数学 知识 。 所 以 作为 一 名 网 站 设计 和 制作 者 一 定 要 对 
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Java Web 开发 实例 大 全 (基础 卷 ) 
各 方面 知识 都 有 所 了 解 ， 这 样 才能 在 网 页 设计 时 得 心 应 手 。 


16.4 窗口 控制 


窗口 的 控制 在 网 站 制作 和 网 页 设计 中 所 占 的 分 量 是 很 重 的 。 例 如 ， 有 时 要 控制 网 页 的 大 小 不 变 、 控 制 窗 口 
的 最 大 化 和 最 小 化 、 根 据 屏幕 的 分 辨 率 调整 窗口 的 大 小 等 。 下 面 就 通过 一 些 实例 来 详细 介绍 。 


实例 438 i 
实用 指数 : 食 食 食 合 : 
图 实例 说 明 


在 设计 网 站 时 经 常 需要 强制 用 户 对 某 些 信息 进行 处 理 ， 例 如 ， 有 些 
网 站 内 容 需 要 用 户 进行 注册 后 才 可 以 浏览 。 本 实例 就 实现 了 将 窗口 居 上 
显示 ， 只 有 用 户 处 理 好 本 窗口 的 内 容 才 可 以 操作 其 父 窗口 或 其 他 窗口 的 
内 容 。 本 实例 运行 效果 如 图 16.22 所 示 。 


图 关键 技术 


本 实例 主要 应 用 了 document 对 象 的 focus() 方 法 来 获得 窗口 的 焦点 。 

用 window 对 象 的 open0 方 法 进行 窗口 操作 ， 将 其 返回 值 即 窗口 对 象 赋 给 
-个 变量 , 然后 用 该 变量 对 创建 的 窗口 进行 操作 。 下 面 将 对 open0 方 法 进 图 16.22 将 窗口 居 上 显示 

行 详细 介绍 。 

window 对 象 的 open() 方 法 的 语法 格式 如 下 : 

WindowVar=window.open(urlLwindowname[,location]): 

参数 说 明 

@ url: 用 于 打开 一 个 新 的 浏览 器 窗口 ， 并 在 新 窗口 中 装 入 一 个 指定 的 URL 地 址 。 

@ windowname: 打开 一 个 新 的 浏览 器 窗口 时 ， 指 定 窗口 的 名 称 。 

@ location: 对 窗口 属性 进行 设置 ， 其 可 选 参数 如 表 16.3 所 示 。 


表 16.3 location 参数 的 取 值 


参 数 值 描述 
a 指定 窗口 是 否 有 标准 工具 栏 。 当 该 选项 的 值 为 1 或 yes 时 ， 表 示 有 标准 工具 栏 ， 当 该 选项 的 值 为 0 或 no 
时 ， 表 示 没 有 标准 工具 栏 
location 指定 窗口 是 否 有 地 址 工具 栏 ， 选 项 的 值 及 含义 与 toolbar 相同 
directories 指定 窗口 是 否 有 链接 工具 栏 ， 选 项 的 值 及 含义 与 toolbar 相同 
Status 指定 窗口 是 否 有 状态 栏 ， 选 项 的 值 及 含义 与 toolbar 相同 
menubar 指定 窗口 是 否 有 菜单 ， 选 项 的 值 及 含义 与 toolbar 相同 
scrollbar 指定 当前 窗口 文档 大 于 窗口 时 是 否 有 滚动 条 ， 选 项 的 值 及 含义 与 toolbar 相同 
Tesizable 指定 窗口 是 否 可 改变 大 小 ， 选 项 的 值 及 含义 与 toolbar 相同 
alwaysLowered | 指定 窗口 隐藏 在 所 有 窗口 之 后 ， 选 项 的 值 及 含义 与 toolbar 相同 


指定 窗口 浮 在 所 有 窗口 之 上 ， 选 项 的 值 及 含义 与 toolbar 相同 
指定 打开 的 窗口 为 当前 窗口 的 一 个 子 窗口 ， 并 随 着 父 窗口 的 关闭 而 关闭 ,选项 的 值 及 含义 与 toolbar 相同 


alwaysRaised 


dependent 


hotkeys 在 没有 菜单 栏 的 新 窗口 中 设置 安全 退出 的 热 键 ， 选 项 的 值 及 含义 与 toolbar 相同 
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续 表 
参数 值 描述 
innerHeight 设 定 窗口 中 文档 的 像素 高 度 
innerWidth 设 定 窗口 中 文档 的 像素 宽度 
screenX 设 定 窗口 距离 屏幕 左边 界 的 像素 长 度 
ScreenY 设 定 窗口 距离 屏幕 上 边界 的 像素 长 度 
titleBar 指明 标题 栏 是 否 在 新 窗口 中 可 见 ， 选 项 的 值 及 含义 与 toolbar 相同 
Z-look 指明 当 窗 口 被 激活 时 ， 不 能 浮 在 其 他 窗口 之 上 ， 选 项 的 值 及 含义 与 toolbar 相同 
图 设计 过 程 


创建 效果 启动 页 面 index.htm， 在 其 中 利用 JavaScript 脚本 语言 的 相关 对 象 和 函数 输出 一 个 新 的 弹出 窗口 让 
其 始终 居 上 显示 ， 关 键 代 码 如 下 : 


<body> 

<input type="button" name="Button" value=" 显 示 窗 口 " onClick="newform0"> 
<script language="JavaScript"> 

var name; 

function newformO{ 

name=window.open("™","","width=300,height=200"); 
name.document.write('<input name="imageField" type="image" src="001.jpe" width="280" height="180" 
border="0">"); 

show(name); 

} 

function show(name){ 

ty{ 

Dame.documentfocus0: 

setTimeout("show(name)",1); 


. 

catch(e) {} 

} 

</script> 
国 秘笈 心 法 

本 实例 实现 的 方法 可 以 强制 用 户 进行 必要 的 信息 处 理 ， 其 实 强制 用 户 进行 信息 处 理 的 方法 很 多 ， 如 可 以 在 
用 户 不 处 理 相 应 的 信息 时 不 让 其 进行 登录 或 在 本 网 站 中 进行 网 页 的 跳 转 等 。 


高 级 
实例 实用 指数 ， 友 去 友人 
国 实例 说 明 


用 户 在 浏览 网 页 时 经 常 需要 对 一 些 窗口 进行 全 屏 显 示 ， 以 便 更 清晰 地 浏览 网 页 中 的 信息 。 窗 口 在 弹出 时 若 
不 是 全 屏 显 示 的 话 ， 通 常 都 是 用 户 自 行 操作 进行 全 屏 ， 如 果 只 是 应 用 窗口 自身 的 全 屏 按 钮 总 是 不 那么 方便 ， 那 
么 在 网 页 设计 时 就 可 以 给 网 页 加 上 全 屏 按钮 。 本 实例 就 是 实现 这 一 功能 的 ， 运 行 效果 如 图 16.23 所 示 。 
图 关键 技术 

本 实例 主要 应 用 了 window 对 象 的 open0 方 法 中 的 fnllscreen 参数 和 document 对 象 的 location 属性 。 使 用 open0 


方法 中 的 fullscreen 参数 将 当前 窗口 重新 创建 ， 这 样 既 可 以 对 本 窗口 进行 全 屏 显 示 ， 又 可 以 避免 其 他 窗口 在 打开 
时 也 全 屏 显示 。 而 document 对 象 的 location 属性 则 是 用 来 指定 当前 窗口 。 


Java Web 开发 实例 大 全 (基础 卷 ) 


[ESEELE 


(Fama J) 


图 16.23 全屏 显 示 窗口 
图 设计 过 程 

(1) 创建 初始 窗口 index.htm， 并 在 其 中 添加 快捷 方式 ， 关 键 代码 如 下 : 
<div align="center"> 
<input name="button1" type="button" id="button1" onClick="fullscreen()" value=" 全 屏 显示 "> 
<input name="button2" type="button" id="button2" value=" 关 闭 窗口 " onClick="window.close0"> 
</div> 

(2) 编写 JavaScript 脚本 语言 ， 实 现 新 窗口 的 弹出 和 控制 ， 关 键 代码 如 下 : 
‘<script language="javascript"> 
后 fullscreenO{ 
Pp=wWindow.open("Index.htm","",'fullscreen=yes"); 
} 
</script> 


秘笈 心 法 


细心 的 读者 可 以 发 现 ， 好 的 网 站 的 一 些 操作 都 是 很 人 性 化 的 ， 它 们 都 做 到 了 方便 用 户 的 操作 ， 这 样 就 会 有 
很 好 的 用 户 体验 ， 拥 有 了 好 的 用 户 体验 何 愁 访 问 量 的 问题 呢 。 


so | 


图 实例 说 明 

实例 439 中 使 用 按钮 进行 窗口 的 最 大 化 ， 其 实在 设计 网 页 时 可 以 对 一 些 信息 量 大 或 者 信息 比较 重要 的 网 页 
直接 实现 自动 最 大 化 窗口 。 本 实例 就 实现 了 这 一 功能 ， 运 行 效果 如 图 16.24 所 示 。 
图 关键 技术 


本 实例 主要 是 用 screen 对 象 的 availWidth 和 availHeight 属性 来 获取 屏幕 工作 区 的 宽度 和 高 度 , 并 用 resizeTo0 
方法 将 当前 窗口 的 大 小 设 为 屏幕 大 小 ， 再 用 moveTo0 方 法 将 窗口 放 在 屏幕 的 左上 角 。 
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16.24 ”自动 最 大 化 窗口 


图 设计 过 程 

创建 弹出 窗口 index.htm, 在 其 中 嵌入 最 大 化 控制 代码 , 使 用 window 对 象 的 moveTo0 和 resizeTo0 两 个 方法 ， 
关键 代码 如 下 : 

<BODY onLoad="clockon0"> 

<table width="800" height="476" border="0" align="center" cellpadding="0" cellspacing="0"> 

外 width="800"><img src="01jpg" width="800" height="600" /></td> 

ble 

‘<script language="JavaScript"> 

this.moveTo(0,0) 

this.resizeTo(screen.avail Width,screen.availHeight) 

‘</script> 


图 秘笈 心 法 
修改 实例 中 的 resizeTo0 方 法 的 参数 可 以 实现 窗口 任意 指定 大 小 。 


实例 441 


图 实例 说 明 

平时 用 户 在 浏览 网 页 时 ， 经 常会 遇 到 一 些 弹出 的 窗口 的 大 小 不 适合 自己 的 需要 ， 有 时 需要 窗口 最 大 化 ， 有 
时 又 需要 窗口 最 小 化 。 这 些 操作 用 户 都 可 以 使 用 窗口 本 身 的 最 大 和 最 小 化 按钮 去 实现 ， 但 是 由 于 本 身 所 带 的 按 
钮 使 用 起 来 很 不 方便 ， 所 以 在 进行 网 站 设计 时 可 以 在 网 页 的 显示 窗口 添加 最 大 化 和 最 小 化 按钮 。 本 实例 就 是 实 
现 这 一 功能 的 ， 实 例 运行 效果 如 图 16.25 所 示 。 


图 关键 技术 


本 实例 主要 应 用 到 了 <objec 人 标记 和 <param> 标 记 。 <objec 人 标记 中 的 classid 属性 是 给 出 浏览 器 插件 的 类 型 。 
用 <object> 标 记 在 页 面 中 插入 ActiveX 控件 或 其 他 对 象 之 后 ， 有 时 需要 向 该 对 象 或 者 控件 传递 参数 ， 这 就 要 使 用 
<param> 标 记 。 该 标记 没有 相应 的 结束 标志 </param>， 下 面 对 <param> 标 记 进行 详细 说 明 。 
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16.25 ”最 大 和 最 小 化 按钮 实现 
<param> 标 记 的 一 般 格 式 为 : 
<param name=* value=* Valuetype=+ type=*> 
参数 说 明 
@ name: 是 参数 的 名 字 。 
@ value: 指定 参数 的 值 。 
@ valuetype: 指定 怎样 表示 参数 的 值 。 
@ type: 指定 媒体 类 型 。 
图 设计 过 程 
创建 网 页 index.htm， 并 在 其 中 写 入 相关 属性 参数 和 JavaScript 代码 ， 关 键 代码 如 下 : 
<script language="JavaScript"> 
shcobjeetidLhhl classid="clsid:ADBS80AG6-D8FF-11CF-9377-00AA003B7AL1">; 
s=s+'<param name="Command" value="Minimize"></object>"; 
s=s+'<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">’; 
s=s+'<param name="Command" value="Maximizer></object>': 
aa.innerHTML=s; 
</script> 


力 秘笈 心 法 
良好 的 操作 界面 是 衡量 一 个 网 站 好 坏 的 重要 标准 ， 读 者 在 设计 网 站 时 一 定 要 注意 如 何 把 握 网 页 中 的 快捷 方 
式 的 设计 ， 尽 量 提供 简洁 方便 的 操作 。 
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力 实例 说 明 
在 浏览 网 页 时 ， 经 常会 看 到 一 些 网 页 以 频道 的 方式 进行 打开 。 本 实例 就 是 实现 这 一 功能 的 ， 用 户 打开 网 页 
后 单 击 其 中 的 “频道 方式 ”按钮 ， 即 会 弹出 窗口 的 频道 方式 的 显示 模式 。 本 实例 运行 效果 如 图 16.26 所 示 。 


图 关键 技术 
本 实例 主要 应 用 了 window 对 象 的 open0 方 法 中 的 channelmode 参数 值 来 使 弹出 的 窗口 以 频道 方式 进行 显示 。 
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DER Wo heret Erplorer 下 


GO 由 电子 吾 坛 


16.26 ”频道 方式 显示 窗口 
图 设计 过 程 
(1) 创建 频道 弹出 窗口 new.htm。 
(2) 创建 频道 弹出 窗口 的 控制 窗口 index.htm， 并 在 其 中 调用 window 对 象 的 open0 方 法 和 设 定 方法 的 相关 
参数 ， 关 键 代码 如 下 : 
<body> 
‘<script language="javascript"> 
function showO{ 
window.open("new.htm"," 频 道 方 式 窗 体 ","channelmode.scrollbars"); 
上 
<form name="form1" method="post" action=""> 
<input type="button" name="Submit" value=" 频 道 方式 窗口 " onClick="show0"> 
</form> 
</body> 


国 秘笈 心 法 


读者 可 以 在 实现 本 实例 的 基础 上 ， 根 据 open0 方 法 参数 的 说 明 ， 试 着 去 改变 一 些 参数 的 值 ， 使 窗口 的 显示 
更 加 多 样 化 。 


图 实例 说 明 

在 浏览 网 页 时 ， 给 浏览 者 以 清晰 、 整 齐 的 感觉 是 进行 网 站 设计 时 最 大 的 追求 。 但 有 时 可 能 会 因为 浏览 者 计 
算 机 的 分 辩 率 不 同 ， 而 影响 页 面 的 整体 效果 。 本 实例 将 实现 根据 不 同 计算 机 分 辩 率 来 自动 调整 窗口 ， 实 例 运行 
效果 如 图 16.27 所 示 。 
图 关键 技术 


本 实例 主要 应 用 screen 对 象 获取 屏幕 的 分 辩 率 ， 然 后 用 window 对 象 的 resizeTo0 方 法 设置 窗口 的 大 小 。 在 
前 面 的 实例 中 已 经 讲解 了 screen 对 象 和 window 对 象 的 resizeTo0 方 法 的 具体 用 法 ， 此 处 不 再 详细 说 明 。 
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16.27 ”自动 调整 的 窗口 
图 设计 过 程 
创建 显示 窗口 index.htm, 在 其 中 编写 自 定义 函数 winsize0, 在 该 函数 中 调用 window 对 象 的 resizeTo0 方 法 ， 
实现 本 实例 的 效果 ， 关 键 代码 如 下 : 
ipt language—"javascript"> 


window.resizeTo(screen.width-100,screen.height-100); 


<body onload="winsize0:"> 
<table width="800" height="476" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 


<td width="800"><img src="11jpg" width="800" height="600" /></td> 
</tr> 


</table> 
<body> 


国 秘笈 心 法 
由 于 不 同 版 本 的 浏览 器 或 用 户 的 硬件 设置 的 不 同 都 可 能 影响 到 网 页 的 显示 效果 ， 所 以 在 进行 网 页 设计 时 以 
上 因素 都 要 考虑 到 ， 尽 量 减少 固定 参数 的 设置 。 


高 级 
实例 444 3 
实 人 | 实用 指数 : 食 食 食 
| | 实例 说 明 TAR 人 ES 
在 浏览 网 页 时 ， 常 常 需要 在 网 页 中 进行 一 些 文本 的 输入 ， 但 网 人 A 
页 的 背景 常常 会 使 输入 的 内 容 模糊 不 清 。 本 实例 就 是 实现 在 文本 输 2 有 
入 框 中 实现 背景 透明 的 ， 实 例 运 行 效果 如 图 16.28 所 示 。 宗 认 地址: 
图 关键 技术 > Ap 而 


本 实例 主要 应 用 的 是 浮动 框架 标记 <iffame>。 用 <ifame> 标 记 可 
以 将 其 他 页 中 的 内 容 显 示 在 当前 页 面 中 .下 面 对 <iframe> 标 记 的 相关 
属性 进行 说 明 。<ifame> 标 记 的 属性 如 表 16.4 所 示 。 16.28 ”窗口 背景 透明 显示 
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表 16.4 <iframe> 标 记 的 属性 


属 性 说 有明 
SIC 浮动 框架 中 显示 页 面 源 文件 的 路 径 
width 浮动 框架 的 宽度 
height 浮动 框架 的 高 度 
name 浮动 框架 的 名 称 
align 浮动 框架 的 排列 方式 ，left 表示 居 左 ，center 表示 居中 ，right 表示 居 右 
frameborder 设置 框架 边框 显示 
scrolling 设置 框架 滚动 条 显示 
marginwidth 设置 框架 边缘 宽度 
marginheight 设置 框架 边缘 高 度 
allowtransparency 设置 框架 背景 透明 
图 设计 过 程 


(1) 创建 输入 窗口 melodyhtm 。 
(2) 创建 控制 窗口 index.htm， 并 在 其 中 编写 控制 代码 和 设 定 相关 参数 ， 关 键 代 码 如 下 : 


<table valign="center" align="center" width="480" height="318" border="1" cellpadding="0" cellspacing="0"> 

<t> 

<th width="480" height="318" valign="middle" scope="col"> 
<div id="div1" align="justify"></div> 

</th> 

</r> 
</table> 
<script language="JavaScript"> 
divl.innerHTML=<IFRAME frameborder="0" scrolling="no" src="melody.htm" width=506 height=360 


图 秘笈 心 法 
本 实例 的 实现 方式 还 可 以 应 用 到 如 网 站 内 容 的 清晰 显示 、 动 态 地 替换 输入 信息 等 操作 。 读 者 在 设计 网 页 时 
- 定 要 注意 网 页 的 视觉 效果 。 


16.5 框架 的 应 用 


所 谓 框架 就 是 网 页 的 各 部 分 为 相互 独立 的 网 页 ， 又 由 一 个 网 页 将 这 些 分 开 的 网 页 组 成 一 个 完整 的 网 页 ， 显 
示 在 浏览 者 的 浏览 器 中 ， 重 复出 现 的 内 容 被 固定 下 来 ， 每 次 浏览 者 发 出 对 页 面 的 请 求 时 ， 只 下 载 发 生变 化 的 框 
架 页 面 ， 其 他 子 页 面 保持 不 变 。 使 用 框架 可 以 将 容器 窗口 划分 为 若干 个 子 窗口 ， 在 每 个 子 窗口 中 可 以 分 别 显示 
不 同 的 网 页 。 下 面 将 通过 具体 实例 详细 介绍 框架 的 应 用 。 


实例 445 a 
: 实用 指数 : 食 食 太 人 : 
图 实例 说 明 


在 进行 网 络 程序 开发 时 ， 在 网 页 中 使 用 一 个 框架 集 是 非常 简单 的 。 但 如 果 要 在 同一 个 网 页 中 应 用 更 多 的 框 
架 集 时 ， 应 该 怎样 进行 框架 集 的 嵌 套 呢 ? 本 实例 将 解决 这 一 问题 ， 运 行 结果 如 图 16.29 所 示 。 
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图 16.29 框架 集 的 媒 套 


图 关键 技术 

本 实例 主要 介绍 框架 集 的 嵌 套 应 用 ， 下 面 将 对 框架 集 进行 详细 介绍 。 

框架 集 主 要 包含 如 何 组 织 各 个 框架 的 信息 ,可 以 通过 <frameset> 标 记 来 定义 框架 集 。 框架 是 按照 行 和 列 来 组 
织 的 ， 可 以 使 用 <frameset> 标 记 的 下 列 属性 对 框架 的 结构 进行 设置 。 

(1) 左右 分 割 窗 口 属性 COLS 

在 水 平方 向 上 将 浏览 器 分 割 成 多 个 窗口 ， 可 以 通过 框架 的 左右 分 割 窗口 属性 COLS 实现 ， 语 法 格式 如 下 ; 


参数 说 明 

value: 用 于 指定 各 个 框架 的 列 宽 ， 取 值 有 3 种 形式 ， 即 像素 、 百 分 比 〈%) 和 相对 尺寸 (*)。 

例如 ， 若 要 通过 框架 将 浏览 器 窗口 划分 为 3 列 ， 其 中 第 一 列 占 浏览 器 窗口 宽度 的 20%， 第 二 列 为 120 像素 ， 
第 3 列 为 浏览 器 窗口 的 剩余 部 分 的 框架 ， 关 键 代 码 如 下 : 


<frameset cols="20%,120,.*" > 
<frame> 
<frame> 


(2) 上 下 分 割 窗口 属性 ROWS 
在 垂直 方向 上 将 浏 览 器 分 割 成 多 个 窗 口 ， 可 以 通过 框架 的 上 下 分 割 窗口 属性 ROWS 实现 ， 语 法 格式 如 下 : 


参数 说 明 

value: 用 于 指定 各 个 框架 的 行 高 ， 取 值 有 3 种 形式 ， 即 像素 、 百 分 比 〈%) 和 相对 尺寸 (*)， 设 置 方法 与 
COLS 属性 类 似 。 

例如 ， 若 要 通过 框架 将 浏览 器 窗口 划分 为 3 行 ， 其 中 的 第 一 行 占 浏览 器 窗口 宽度 的 20%， 第 二 行为 120 像 
素 ， 第 3 行为 浏览 器 窗口 的 剩余 部 分 的 框架 ， 关 键 代 码 如 下 : 

<frameset rows="20%,120.*"> 

<frame> 

<frame> 

</frameset> 

(3) 框架 边框 显示 属性 FRAMEBORDER 

该 属性 用 于 指定 框架 周围 是 否 显示 边框 ， 取 值 为 1 (显示 边框 ， 默 认 值 ) 或 0 (不 显示 边框 )。 
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(4) FRAMESPACING 

该 属性 用 于 指定 框架 之 间 的 间隔 ， 以 像素 为 单位 。 如 果 不 设置 该 属性 ， 则 框架 之 间 没 有 间隔 。 
(5) 指定 边框 宽度 属性 BORDER 

该 属性 用 于 指定 边框 的 宽度 ， 只 有 FRAMEBORDER 属性 为 1 时 才 有 效 。 


图 设计 过 程 
在 需要 进行 布局 的 页 面 中 写 入 以 下 程序 代码 ， 将 sre 属性 值 修改 为 需要 链接 的 文件 即 可 ， 关 键 代码 如 下 : 
<html> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> 框 架 集 的 嵌 套 </title> 


</head> 

<!-- 创 建 嵌 套 框架 集 --> 

<frameset rows="30%,+"> 
<frame src="software_top.htm"> 
<frameset cols="50%,50%"> 
<frame src="software_main.htm"> 
<frame src="software_left.htm" scrolling="auto"> 
</frameset> 

</frameset> 

<body> 

</body> 

<html> 


国 秘笈 心 法 


框架 的 合理 应 用 可 以 使 网 页 的 显示 更 加 合理 和 模块 化 ， 使 网 站 的 维护 更 加 容易 。 
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图 实例 说 明 

在 开发 网 络 程序 时 ， 经 常会 应 用 到 框架 ， 如 网 络 考试 管理 系统 中 就 涉及 了 浮动 框架 。 通 过 浮动 框架 将 网 站 
中 各 部 分 独立 的 网 页 重新 组 成 一 个 完整 的 网 页 ， 并 显示 在 浏览 器 中 。 运 行 本 实例 ， 在 网 页 的 左 侧 是 一 个 独立 的 
网 页 ， 右 侧 也 是 一 个 独立 的 网 页 ， 如 图 16.30 所 示 。 
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16.30 在 网 页 中 应 用 浮动 框架 


图 关键 技术 


本 实例 主要 应 用 浮动 框架 将 各 部 分 独立 的 网 页 重新 组 成 一 个 完整 的 网 页 , 下 面 将 对 浮动 框架 进行 详细 介绍 。 
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浮动 框架 <iframe> 是 一 种 特殊 的 框架 页 面 ， 在 浏览 器 窗口 中 可 以 嵌 套 子 窗 口 ， 在 其 中 显示 子 页 面 的 内 容 ， 
语法 格式 如 下 : 

<IFRAME src=" 文 件 " height=" 数 值 " width=" 数 值 " name=" 框 架 名 称 " scrolling=" 值 " frameborder=" 值 "> 

/IFRAME> 


下 面 是 浮动 框架 属性 的 详细 介绍 。 
(1) 浮动 框架 的 文件 路 径 属 性 SRC 
语法 格式 如 下 : 
<IFRAME SRC="file name"> 
参数 说 明 
file name: 指明 浮动 框架 文件 的 文件 名 或 者 其 他 超 链接 的 网 址 。 
(2) 浮动 框架 的 名 称 属性 NAME 
语法 格式 如 下 : 
<IFRAME SRC="file name" NAME="frame name"> 
参数 说 明 
frame name: 定义 的 浮动 框架 名 称 。 
(3) 浮动 框架 的 对 齐 属性 ALIGN 
语法 格式 如 下 : 
<IFRAME SRC="file name" ALIGN="left/center/right"> 
参数 说 明 
© left: 居 左 对 齐 。 
@ center: 居中 对 齐 。 
四 Tight: 居 右 对 齐 。 
(4) 浮动 框架 的 宽度 和 高 度 属性 WIDTH、HEIGHT 
语法 格式 如 下 : 
<IFRAME SRC="file name" WIDTH="value" HEIGHT="value"> 
参数 说 明 
@ WIDTH: 浮动 框架 的 宽度 。 
@ HEIGHT: 浮动 框架 的 高 度 。 
(5) 浮动 框架 滚动 条 显示 属性 SCROLLING 
语法 格式 如 下 : 
<IFRAME SRC="file name" SCROLLING="value"> 
参数 说 明 
value: 有 3 个 取 值 ， 分 别 为 YES〈 显 示 滚 动 条 )、NO (不 显示 滚动 条 )、 AUTO (根据 窗口 内 容 决定 是 否 
有 滚动 条 )。 
(6) 浮动 框架 边框 属性 FRAMEBORDER 
语法 格式 如 下 : 
<IFRAME SRC="file name" FRAMEBORDER="value"> 
参数 说 明 
value: 值 为 yes 代表 显示 框架 边框 ， 值 为 no 代表 隐藏 框架 边框 。 
(7) 浮动 框架 边缘 的 宽度 和 高 度 属 性 MARGINWIDTH、MARGINHEIGHT 
语法 格式 如 下 : 
<IFRAME SRC="file name" MARGINWIDTH="value" MARGINHEIGHT="value"> 
参数 说 明 
@ MARGINWIDTH: 设 定 浮动 框架 左右 边缘 与 边框 的 宽度 。 
@ MARGINHEIGHT: 设 定 浮动 框架 上 下 边缘 与 边框 的 高 度 。 
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图 设计 过 程 
在 需要 重新 组 建 的 网 页 中 写 入 浮动 框架 的 程序 代码 , 并 将 src 属性 值 设 为 需要 组 建 的 网 页 文件 , 关键 代码 如 下 : 


<table cellpadding="0" cellspacing="0" border="0" width="10096" height="1009%"> 
<t> 


<td width="6%"></td> 

<td height="100%"><iframe src="adm Mainlefthtm" frameborder="0" width="100%" height="100%" name="mainl” align= "middle" 
scrolling="auto"> 对 不 起 ， 你 的 浏览 器 不 支持 框架 ! </iframe></td> 

<td width="7%"> 

<td> 

<t> 

</table> 

</td></tr> 


<tr> 
<td height="36">&nbsp:</td> 
A> 


</table> 

<td> 

<td width="1%"> 

<img src="images/Manage/gotoleft.gif" alt=" 放 大 " width=12 height="100"> 
<td> 


<td width="490" height="300"> 

<iframe src="adm_Mainright.htm" frameborder="0" width="100%" height="100%" name="mainr" scrolling="auto"> 对 不 起 , 你 的 浏览 器 不 支持 框架 ! 
</iframe> 

</td> 

</tr> 

</table> 


图 秘笈 心 法 


读者 还 可 将 本 实例 的 实现 方法 应 用 到 后 台 管 理 的 网 页 中 ， 这 样 就 可 以 省 去 网 页 跳 转 时 带 来 的 麻烦 。 
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国 实例 说 明 

在 进行 网 络 程序 开发 时 常常 需要 应 用 到 框架 , 所 谓 框架 就 是 网 页 
的 各 部 分 为 相互 独立 的 网 页 , 又 由 一 个 网 页 将 这 些 分 开 的 网 页 组 成 一 
个 完整 的 网 页 ， 显示 在 浏览 者 的 浏览 器 中 , 此 时 重复 出 现 的 内 容 将 被 
固定 下 来 ,那么 如 何在 一 个 网 页 中 创建 空白 的 框架 呢 ? 本 实例 将 解决 
这 一 问题 ， 实 例 运行 结果 如 图 16.31 所 示 。 
图 关键 技术 

本 实例 主要 应 用 框架 的 sre 属性 给 框架 写 一 个 通用 的 HTML 文 
档 。 下 面 将 对 Frame 框架 进行 详细 介绍 。 

使 用 Frame 框架 可 以 设置 框架 的 属性 ， 包 括 框架 的 名 称 、 框 架 
是 否 包 含 滚动 条 以 及 在 框架 中 显示 的 网 页 等 ， 语 法 格式 如 下 : 

<Frame src=" 文 件 " name=" 框 架 名 称 " scrolling=" 值 ” [noresize] frameborder=" 数 值 "> 

下 面 对 框 架 属 性 进行 详细 介绍 。 

(1) 框架 文件 的 路 径 属性 SRC 

功能 : 通过 SRC 属性 来 定义 框架 装载 文件 的 路 径 。 

语法 格式 如 下 : 


<FRAME SRC="file name"> 


图 16.31 创建 空白 框架 
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参数 说 明 
file name: 指明 框架 文件 的 文件 名 或 者 其 他 超 链接 的 网 址 。 
(2) 框架 的 名 称 属性 NAME 
功能 : 通过 NAME 属性 定义 框架 的 名 称 ， 所 起 的 名 称 将 应 用 于 页 面 的 链接 和 脚本 描述 。 
语法 格式 如 下 : 
<FRAME SRC="file name" NAME="frame name"> 
(3) 框架 边框 显示 属性 FRAMEBORDER 
功能 : 可 以 设置 是 否 显示 框架 边框 。 框 架 边框 的 显示 情况 继承 框架 集 边 框 属 性 的 设 定 。 
语法 格式 如 下 : 
<FRAME SRC="file name" FRAMEBORDER="value"> 
参数 说 明 
value: 值 为 yes 代表 显示 框架 边框 ， 值 为 no 代表 隐藏 框架 边框 。 
(4) 框架 滚动 条 显示 属性 SCROLLING 
功能 : 通过 SCROLLING 属性 设置 是 否 在 框架 内 显示 滚动 条 。 
语法 格式 如 下 : 
<FRAME SRC="file name" SCROLLING="value"> 
参数 说 明 
value: 有 3 个 取 值 ， 分 别 为 yes〈 显 示 滚 动 条 )、no (不 显示 滚动 条 )、auto (根据 窗 口内 容 决定 是 否 显示 滚 
动 条 )。 
(5) 框架 边缘 的 宽度 和 高 度 属性 MARGINWIDTH、MARGINHEIGHT 
功能 : 通过 设置 这 两 个 属性 可 以 调整 框架 页 面 内 容 与 边框 的 距离 。 
语法 格式 如 下 : 
<FRAME SRC="file name" MARGINWIDTH="value" MARGINHEIGHT="value"> 
参数 说 明 
@ MARGINWIDTH: 设 定 框架 左右 边缘 与 边框 的 宽度 。 
@ MARGINHEIGHT: 设 定 框架 上 下 边缘 与 边框 的 高 度 。 
(6) 框架 尺寸 调整 属性 NORESIZE 
功能 : 禁止 改变 框架 的 尺寸 。 利 用 该 属性 可 以 控制 框架 的 尺寸 是 否 可 以 调整 。 
语法 格式 如 下 : 


<FRAME SRC="file name" NORESIZE> 
(7) 不 支持 框架 标记 <NOFRAMES> 
某 些 版 本 的 浏览 器 是 不 支持 框架 结构 的 ， 如 果 遇 到 这 种 情况 ， 就 可 以 使 用 <NOFRAMES> 和 </NOFRAMES> 
标记 再 声明 一 对 文件 主体 标记 <BODY> 和 </BODY>， 代 表 在 无 法 接受 框架 结构 时 唯一 显示 的 页 面 。 


图 设计 过 程 
在 需要 添加 空白 框架 的 页 面 中 添加 以 下 程序 代码 ， 即 可 完成 空白 框架 的 创建 ， 关 键 代码 如 下 : 
<html> 


<meta http-equiv="Content-Type” content="text/html: charset=gb2312" /> 
<title> 创 建 空白 框架 </title> 

</head> 

<frameset> 

<frame name="Framel" src-"sshtm"> 
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国 秘笈 心 法 
读者 可 以 和 JavaScript 脚本 语言 的 内 容 进行 结合 ， 在 浏览 器 不 支持 框架 时 弹出 对 话 框 进行 提示 。 
高 级 
实用 指数 : 二 食 广 从 : 
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图 实例 说 明 

将 页 面 设置 为 居中 显示 对 于 用 表格 布局 的 页 面 来 说 很 简单 ， 只 需 设 置 表格 水 平 居中 显示 即 可 ， 但 如 果 是 框 
架 页 面 就 没有 那么 简单 了 ， 这 就 需要 应 用 框架 嵌 套 技术 。 例 如 ， 在 明日 科技 网 站 的 软件 首页 就 是 应 用 框架 撕 套 
技术 居中 显示 页 面 的 ， 如 图 16.32 所 示 。 
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图 16.32 居中 显示 框架 


图 关键 技术 
本 实例 主要 应 用 框架 集 实现 框架 页 的 居中 显示 ， 框 架 集 的 详细 介绍 请 读者 参见 实例 445。 


图 设计 过 程 
通过 对 框架 集 <frameset> 标 记 的 属性 设置 ， 将 指定 的 框架 页 进行 居中 显示 ， 关 键 代码 如 下 : 
<html> 


<head> 

<title> 居 中 显示 框架 页 </title> 

<meta http-equiv="Content-Type" content="text/html: charset=gb2312"> 

</head> 

<frameset rows="*" cols="1*.800.1+*" frameborder="NO" framespacing="0" border="0"> 
<frame src="blank.htm" name="BLFrame" scrolling="NO" noresize> 

<frameset rows="157,*" cols="*" frameborder="NO" border="0" framespacing="0"> 
<frame src="software_top.htm" name="topFrame" scrolling="NO" noresize > 
<frameset rows="*" cols="225.+" framespacing="0"> 
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<frame ste="software_left. htm" name="lefiFramer scrolling="auto" noresize> 
<frame ste="software_main htm" name="mainFrame" frameborder="no" scrolling="auto"> 
</frameset> 
</frameset> 
<frame ste="blank htm" name—"BRFrame" scrolling="NO" noresize> 


图 秘笈 心 法 

在 建设 Web 网 站 时 不 得 不 考虑 的 一 个 问题 是 : 如 何 让 不 同 分 辩 率 的 用 户 都 能 看 到 网 页 的 最 佳 效 果 。 目 前 ， 
虽然 许多 用 户 的 浏览 器 的 分 辩 率 还 是 800x600 的 , 但 也 有 一 部 分 已 经 是 1024x768 了 ， 所 以 在 设计 页 面 时 , 经 常 
要 兼顾 两 者 。 那 么 就 应 该 这 样 设计 页 面 : 将 网 页 在 800x600 的 分 辩 率 下 设计 ， 然 后 将 页 面 居中 显示 ， 这 样 的 网 
页 在 1024x768 下 显示 时 ， 将 不 会 给 人 很 难看 的 感觉 。 


16.6 无 边框 窗口 


所 谓 无 边框 窗口 ， 是 指 不 包括 正 浏览 器 窗口 所 固有 的 标题 栏 及 灰色 的 窗口 边框 的 窗口 ， 无 边框 窗口 在 某 些 
特定 的 网 站 中 起 着 举足轻重 的 作用 。 下 面 将 通过 几 个 具体 实例 介绍 如 何 实现 无 边框 窗口 。 


力 实例 说 明 
通常 用 户 在 正 浏览 器 中 浏览 网 页 时 ， 浏 览 器 窗口 都 是 包括 标题 栏 、 菜 单 栏 和 状态 栏 等 固定 内 容 的 。 虽 然 通过 

正 主 菜 单 可 以 将 浏览 器 的 菜单 栏 和 状态 栏 隐藏 , 但 是 标题 栏 却 不 能 隐藏 , 即使 将 网 页 全 屏 显示 也 是 不 能 将 其 去 除 。 

有 时 为 了 实现 网 站 的 整体 效果 或 其 他 目的 ， 不 得 不 使 用 全 屏 显示 的 无 边框 有 滚动 条 的 窗口 。 例 如 ， 在 皮 皮 宠物 网 

站 中 ， 为 了 给 用 户 以 更 真实 的 感觉 ， 就 可 以 将 整个 网 站 的 主页 面 设置 为 全 屏 显示 模式 ， 如 图 16.33 所 示 。 

优 东 开 文本 框 | 编辑 村 | 隐 莹 域 的 值 - Windows Internet Explorer 二 | 回 | 

GD-la httpVlocalhost *| BE| + | X ||P sng Pr- 


高 天 | 次 外 ] 建 网 站 ~ 镭 ] 网 页 快讯 让 ~ 


发 贴 名 称 : 明日 科技 获取 内 容 如 下 : 


发 i: 本 全 Rs 
发 由 标题 胡 


你 好 ， 明 日 科技 : 
Nd 明日 科技 ! 
回复 成 功 ! 


le | 保护 醒 如 


图 16.33 ”全屏 显示 无 边框 有 滚动 条 的 窗口 
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力 关键 技术 


实现 全 屏 显 示 无 边框 有 滚动 条 的 窗口 主要 通过 window 对 象 的 open( 方 法 实现 。 这 就 需要 借助 一 个 中 转 页 实 
现 ， 即 当 该 中 转 页 运行 时 调用 open0 方 法 打开 一 个 全 屏 显示 的 窗口 ， 并 关闭 打开 中 转 页 的 窗口 ， 这 时 就 需要 应 
用 window 对 象 的 close0 方 法 关闭 窗口 ， 关 闭 窗口 时 不 弹出 确认 对 话 框 。 


图 设计 过 程 
(1) 新 建 一 个 空 的 HTML 页 面 ， 该 页 面 中 可 以 没有 任何 页 面 布局 元 素 或 内 容 ， 名 称 为 ndex htm。 在 该 页 


(2) 创建 main.htm 文件 ， 该 文件 才 是 网 站 的 真正 首页 ， 前 面 的 index.htm 页 面 只 是 起 到 一 个 页 面 跳 转 的 作 
用 。 该 页 面 读 者 可 根据 实际 情况 设计 ， 这 里 不 再 进行 详细 介绍 。 
图 秘笈 心 法 
在 JavaScript 中 调用 window 对 象 的 open0 方 法 时 ， 只 要 设置 fnllscreen 参数 值 为 1， 即 可 将 打开 的 新 窗口 全 
屏 显 示 。 
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图 实例 说 明 

对 于 一 个 页 面 风格 清新 自然 的 网 站 来 说 , 如 果 弹 出 的 窗口 带 有 不 适合 页 面 风格 的 灰色 边框 及 死板 的 标题 栏 ， 
那么 这 势必 会 影响 网 站 的 整体 效果 。 本 实例 将 向 读者 介绍 一 种 更 为 完善 的 无 边框 窗口 的 实现 方法 ， 那 就 是 应 用 
CSS+DIV 实现 。 运 行 本 实例 ， 单 击 “ 用 户 登 录 ” 超 链接 即 可 弹出 无 边框 的 用 户 登录 窗口 ， 如 图 16.34 所 示 。 


寸 无 边框 无 滚动 条 窗口 高 级 


实用 指数 :让 从 


蜀 0 关 食 多 


© 有 NE 到 阴 日 拓宽 包 和 请 加 全 的 宇 王 入 产 ! 1 芷 肌 在 是 让 


ail 县 个 人 主页 全 sp 事 rr 地 直 外 内 未 时 间 : 2006-7-5 19:00:09 


7 款 不 要 允 无 云 拉 天 补 
我 二 式 元 有 的 人 生 | 
加 昌 和 本 了 
EL 


项 是 因为 技 名 拉 一 份 天时 的 重信! 


16.34 ”应 用 CSS 实现 指定 尺寸 无 边框 无 滚动 条 窗口 
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图 关键 技术 


本 实例 主要 通过 在 页 面 中 加 入 DIV 层 ， 并 在 页 面 中 控制 层 的 位 置 及 其 显示 和 隐藏 来 实现 。 在 页 面 中 加 入 层 
的 语法 如 下 : 
<DIV id="value" align="value" class="value" style="value"> 


参数 说 明 

@ id: <div> 标 签 的 id 也 可 以 说 是 它 的 名 字 ， 常 与 CSS 样式 结合 ， 实 现 对 网 页 中 任何 元 素 的 控制 。 

@ align: 用 于 控制 <div> 标 签 中 的 元 素 的 对 齐 方式 ， 其 value 值 可 以 是 left、center 和 right, 分 别 用 于 设置 元 
素 的 居 左 、 居 中 和 居 右 对 齐 。 

@ class: 用 于 设置 <div> 标 签 中 的 元 素 的 样式 ， 其 value 值 为 CSS 样式 中 的 class 选择 符 。 

@ style: 用 于 设置 <div> 标 签 中 的 元 素 的 样式 ， 其 value 值 为 CSS 属性 值 ， 各 属性 值 间 应 用 分 号 分 隔 。 该 属 
性 最 常用 的 功能 之 一 就 是 进行 <div> 标 签 的 定位 ， 其 对 应 的 属性 为 position， 该 属性 有 两 个 可 选 值 ， 即 relative 和 
absolute，relative 表示 <div> 标 签 的 位 置 是 相对 于 它 所 在 的 窗口 的 ，absolute 表示 <div> 标 签 的 位 置 是 绝对 的 ， 可 
以 通过 表 16.5 所 示 的 属性 进行 设置 。 


表 16.5 <div> 的 属性 说 明 


属 性 说 明 
left 相对 于 窗口 左边 的 位 置 ， 单 位 为 像素 (pixels) 
top 相对 于 窗口 上 边 的 位 置 ， 单 位 为 像素 (pixels) 
width <div> 标 记 的 宽度 。 所 有 在 <div> 标 记 中 的 文字 或 HTML 元 素 都 包含 在 里 面 
height <div> 标 记 的 高 度 。 该 属性 很 少 使 用 ， 除 非 想 要 对 层 进行 分 割 
clip:rect(top.right.bottom.left 给 出 层 的 可 见 部 分 。 该 属性 可 使 得 <div> 标 记 显 示 为 一 个 可 以 定义 得 很 准确 的 方块 区 域 
visibility 隐藏 或 显示 <div> 标 记 中 的 元 素 ， 其 值 为 visible、hidden、inherit 
z-index <div> 标 记 的 立体 位 置 ， 值 越 大 ，<div> 标 记 的 位 置 越 高 
background-color <div> 标 记 的 背景 颜色 
layer-background-color Netscape 的 <div> 标 记 的 背景 颜色 
background-image <div> 标 记 的 背景 图 像 
layer-background-image Netscape 的 <div> 标 记 的 背景 图 像 


style 属性 的 另 一 个 常用 功能 是 控制 <div> 标 记 的 display 属性 ， 用 于 设置 元 素 的 浮动 特征 ， 当 display 被 设置 
为 block ( 块 ) 时 ， 容 器 中 所 有 元 素 都 将 会 被 当 作 一 个 单独 的 块 放 入 到 页 面 中 ; 将 display 设置 为 inline， 将 使 其 
行为 和 元 素 inline 一 样 ， 即 使 是 普通 的 块 元 素 它 也 会 被 组 合成 像 <span> 那 样 的 输出 流 输出 到 页 面 上 ; 将 display 
设置 为 none，<div> 元 素 就 像 从 页 面 中 被 移 走 一 样 ， 它 下 面 的 所 有 元 素 都 会 被 自动 跟 上 填充 。 


图 设计 过 程 
(1) 在 要 弹出 无 边框 窗口 的 页 面 的 最 底部 加 入 一 个 DIV 层 ， 其 name 属性 的 值 为 User， 并 通过 其 style 属 


性 控制 层 的 大 小 和 层 的 隐藏 ， 该 层 中 的 内 容 为 无 边框 窗口 要 显示 的 内 容 。User 层 的 完成 代码 如 下 : 
<!-- 应 用 层 设计 用 户 登录 表单 页 面 开始 --> 
<div id="User" style="position:absolute:width:240px: height:139px:display:none:"> 
<table width="240" height="139" border="0" align="center" cellpadding="-2" cellspacing="-2"> 
<t> 
<td height="139" align="center"><form name="form_U" method="post" action="#"> 
<table width="220" height="115" bgcolor="#FFFFFF" border="0" align="center" cellpadding="-2" cellspacing="-2" class="tableBorder"> 
<tr align="center" valign="middle"> 
<td height="24" colspan="2" background="Images/bg_login.gif'><font color="#505875"> 一 用 户 登录 一 = </font> </td> 
</> 
<tr> 
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<td width="61" height="27" align="right" valign="middle"> 用 户 名 : </td> 
<td width="157" valign="middle"><input name="UID" type="text" maxlength="20"></td> 
</tr> 


<t> 
<td height="27" align="right" valign="middle"> 密 &nbsp: 码 : </td> 
<td valign="middle"><input name="PWD" type="password” maxlength="20" onKeyDown="if(event.keyCode—13) mycheck(form U, 
用 户 名 )"></td> 
</> 
<tr align="center" valign="middle"> 
<td height="27" colspan="2"><input name="Submit" type="button" class="btn_grey" value=" 登 录 " onClick="mycheck (form_U, 用 户 名 )"> 
&nbsp; 
<input name="Submit2" type="button" class="btn_grey" value=" 关 闭 " onClick="javascriptUserstyle .display=none':"></td> 


</div> 
<!-- 应 用 层 设计 用 户 登 录 表单 页 面 结束 --> 
(2) 在 页 面 中 加 入 “用 户 登 录 ” 超 链接 ， 该 超 链 接 执行 的 操作 是 调用 自 定义 JavaScript 函数 Myopen0 显 示 
User 层 ， 关 键 代码 如 下 : 
<a href="#" onClick="Myopen(User)"> 用 户 登 录 </a> 
(3) 编写 自 定义 的 JavaScript 函数 Myopen0， 用 于 控制 层 的 居中 显示 ， 关 键 代码 如 下 : 
<script language="javascript"> 
function Myopen(divID) 
/根据 传递 的 参数 确定 显示 的 层 
divID styledisplay=block' 
divID styleJeft=(document body clientWidth-240)/2: 
divID.style.top=(document.body.clientHeight-139)/2; 
Se 
图 秘笈 心 法 
如 果 在 网 页 中 单独 使 用 <div> 而 不 加 任何 CSS-P〈Cascading Style Sheets Positioning 的 简写 ， 是 CSS 的 一 个 
扩展 ， 它 可 以 控制 任何 东西 在 网 页 上 的 位 置 )， 它 在 网 页 中 的 效果 和 使 用 <p> 标 记 是 一 样 的 。 


实例 451 


图 实例 说 明 


通常 情况 下 ， 网 页 中 弹出 的 窗口 都 是 包括 标题 栏 和 有 边框 的 ， 这 样 的 窗口 有 时 会 影响 到 页 面 的 整体 效果 。 
根据 实际 情况 将 弹出 的 窗口 设置 为 无 边框 的 窗口 ， 会 让 页 面 更 加 引 人 注 目 ， 同 时 也 可 以 统一 网 站 风格 。 例 如 ， 
明日 实业 网 站 的 管理 员 登 录 窗 口 就 是 无 边框 窗口 ， 运 行 本 实例 ， 单 击 页 面 下 方 的 TOP 超 链接 ， 即 可 弹出 无 边框 
的 居中 显示 的 管理 员 登 录 窗 口 ， 如 图 16.35 所 示 ， 这 样 可 以 使 页 面 看 起 来 更 加 和 谐 统一 。 需 要 说 明 的 是 ， 该 实 
例 只 适合 正 6.0 及 以 下 版 本 ， 对 于 已 经 安装 更 新 版 本 〈 如 更 新 版 本 为 SP1) 的 浏览 器 弹出 的 窗口 不 能 指定 尺寸， 
只 能 全 屏 显 示 。 


力 关键 技术 


本 实例 主要 应 用 window 对 象 的 open0 方 法 , 弹出 一 个 最 大 化 的 窗口 , 再 通过 window 对 象 的 resizeTo0 方 法 
和 moveTo0 方 法 控制 窗口 的 尺寸 和 显示 位 置 。 下 面 对 window 对 象 的 resizeTo() 方 法 进行 详细 介绍 。 
功能 : 将 当前 窗口 改变 成 (x,y) 大 小 。 
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管理 员 查 录 


加 斯 休 闽 岛 。 才 


图 16.35 应 用 JavaScript 实现 指定 尺寸 无 边框 无 液 动 条 窗口 


语法 格式 如 下 : 

window.resizeTo(x,y) 

参数 说 明 

@ x: 表示 水 平 宽度 ， 单 位 为 像素 。 

@y: 表示 垂直 高 度 ， 单 位 为 像素 。 
图 设计 过 程 

(1) 在 实例 的 index.htm 页 面 中 ， 添 加 控制 窗口 弹出 的 超 链接 ， 本 实例 中 采用 的 是 图 片 热点 超 链接 ， 该 超 
链接 执行 的 操作 是 调用 自 定 义 的 JavaScript 函数 manage0。 manageO 函 数 实现 了 在 网 页 中 弹出 一 个 以 最 大 化 方式 
显示 的 窗口 ， 该 窗口 的 内 容 是 login.htm 页 的 内 容 ， 关 键 代码 如 下 : 

<img ste="Images/re_top.gif” width="208" height="56" border="0" usemap="#Map"> 

<script language="javascript"> 

function manage() 

{ 


} 
</script> 
<map name="Map"> 


Var w=wWindow.open('login.htm',",'fullscreen=1,scrollbars=0"); 


<area shape="rect" coords="73.13,135.43" href="#" onClick="manageO"> 
</map> 
(2) 制作 弹出 的 窗口 页 面 login.htm， 在 该 页 面 中 添加 控制 窗口 位 置 和 大 小 的 JavaScript 代码 ， 关 键 代码 
如 下 : 
‘<script language="javascript"> 
Sm 
selfmoveTo((width-: 2 (height-139)/2): 
</script> 
(3) 在 login.htm 页 面 的 <body> 标 记 中 还 需要 加 入 “scroll-no”， 否 则 弹出 的 窗口 会 带 有 滚动 条 ， 关 键 代码 
如 下 : 


<body scroll-no> 
图 秘笈 心 法 

window 对 象 的 resizeTo0 方 法 在 正 6.0 以 上 版 本 中 ， 只 能 改变 以 一 般 状 态 显示 的 窗口 的 尺寸 ， 不 能 改变 最 
大 化 窗口 (用 window 对 象 的 open() 方 法 设置 了 fullscreen=1 参数 的 窗口 ) 的 尺寸 。 
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导航 条 的 应 用 


让 水平 导航 条 的 应 用 
MH 下 拉 菜 单 式 导航 条 
MW 例 导 航 条 设计 
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17.1 水 平 导 航 条 的 应 用 


随 着 网 站 内 容 的 复杂 化 ， 应 用 导航 条 可 以 对 网 站 内 容 根据 类 别 进行 分 类 ， 因 此 ， 导 航 条 对 于 每 个 网 站 来 说 
都 是 必 不 可 少 的 。 本 节 将 介绍 一 些 水 平 导航 条 的 实例 ， 水 平 导 航 条 有 很 多 种 ， 如 本 节 中 介绍 的 带 图 标的 文字 导 
航 条 、Flash 导航 条 、 图 片 按钮 导航 条 等 。 


实例 452 初级 | 
实用 指数 : 食 食 食 | 
图 实例 说 明 


在 浏览 一 些 网 站 时 ， 有 些 网 站 的 导航 会 采用 文字 和 图 标 结合 的 方式 ， 这 样 浏览 者 不 通过 文字 也 可 以 大 概 了 
解 每 个 导航 条 的 内 容 ， 增 加 网 站 的 实用 性 ， 实 例 的 运行 效果 如 图 17.1 所 示 。 
Da pe ep 启 dh | 


首 而 技术 志 持 。。 会 员 中 必 次 件 代理 肝 务 开发 论坛 购 丈 新 知 


当前 位 置 : 首页 >>> 
明日 系列 《编程 词典 少 软 件 是 由 救 十 位 资深 编程 技术 人 员 为 广大 程序 设计 人 员 和 编程 爱好 者 开发 
术 次 软件 ， 它 包含 技术 、 控件 、 ;和 、 项目 源码 、 ~ 


从 人 人 的 人 软件 开发 无 忧 > 


图 17.1 带 图 标的 文字 导航 条 


图 关键 技术 


本 实例 的 实现 比较 简单 ， 主 要 应 用 HTML 的 <img> 标 签 和 <a> 标 签 来 实现 ， 应 用 <img> 标 签 可 以 在 网 页 中 添 
加 图 片 ，<a> 标 签 用 于 设置 文字 或 其 他 内 容 的 超 链 接 。 
<img> 标 签 的 常用 属性 如 表 17.1 所 示 。 


表 17.1 <img> 标 签 的 常用 属性 


设置 图 片 的 路 径 ， 路 径 可 以 是 绝对 路 径 ， 也 可 以 是 相对 路 径 


alt 当 图 片 无 法 显示 时 显示 的 字符 串 
id | <img> 标 签 的 唯一 标识 在 JavaScript 中 常用 id 属性 来 操作 HTML 元 素 的 对 象 
title | 图 片 的 提示 信息 ， 当 鼠标 停留 在 图 片上 时 ， 显 示 title 中 设置 的 提示 信息 
border | 设置 图 片 的 边框 宽度 
width | 设置 图 片 的 宽度 
height 设置 图 片 的 高 度 


<a> 标 签 的 常用 属性 如 表 17.2 所 示 。 
表 17.2 <a> 标 签 的 常用 属性 
属 性 说 明 
用 于 指定 目标 文件 的 URL 地 址 


href 
name “| 指定 超 链接 的 名 称 
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属 性 说 ”有明 
tiue | 该 属性 可 选 ， 用 于 指定 指向 超 链接 时 显示 的 文字 内 容 


该 属性 可 选 ， 用 于 指定 超 链接 页 面 的 打开 方式 ， 如 果 省 略 该 属性 ， 则 目标 文件 将 取代 包含 该 超 链 接 的 文件 。 
target 属性 既 可 以 是 窗口 或 框架 的 名 称 ， 也 可 以 是 blank、 parent、 self 和 top 4 个 保留 字 中 的 一 个 


target 


图 设计 过 程 

(1) 创建 ndexjsp 页 ， 在 页 面 的 适当 位 置 添加 一 个 一 行 多 列 的 表格 ， 该 表格 的 列 根据 实际 的 导航 链接 的 
个 数 确定 。 

(2) 在 index.jsp 页 的 表格 的 单元 格 中 添加 导航 文字 和 图 标 ， 然 后 添加 <a> 超 链接 标签 ， 把 导航 文字 和 图 标 
作为 <a> 标 签 的 内 容 ， 并 设置 <a> 标 签 的 链接 地 址 ， 关 键 代 码 如 下 : 

<td width="64"><a href="http://ww.mingribook com"><img src="images/T_mrbook gif" width="42" height="28"> 明 日 图 书 </a></td> 
国 秘笈 心 法 

在 超 链接 标签 <a> 中 应 用 <img> 标 签 时 ， 显 示 的 图 片 会 带 有 蓝 色 边框 ， 此 时 只 需要 将 <img> 标 签 的 border 属 
性 设置 为 0， 即 可 去 掉 此 边框 。 


i 初级 
实例 145 实用 指数 : 室 食 但 
图 实例 说 明 


在 一 些 个 性 网 站 中 ， 网 站 导航 的 首选 就 是 Flash 导航 条 ，Flash 导航 条 可 以 给 浏览 者 带 来 更 好 的 视觉 效果 ， 
是 网 站 个 性 的 主要 体现 之 一 ， 本 实例 的 运行 效果 如 图 17.2 所 示 。 


图 17.2 Flash 导航 条 


关键 技术 


本 实例 主要 应 用 Flash 动作 脚本 中 Button 类 的 release0 方 法 实现 。release0 方 法 在 按 下 并 释放 鼠标 左 键 时 触 
发 ， 语 法 格式 如 下 : 


onGelease) 


/此 处 插入 语句 
} 


上 加 说 明 : 制作 Flash 导航 条 时 需要 应 用 有 关 Flash 的 软件 制作 工具 ， 本 实例 应 用 的 是 Macromedia Flash 
Professional 8。 当 然 ， 读 者 也 可 以 选择 制作 Flash 的 其 他 软件 ， 如 Adobe Flash CS 系列 的 软件 。 

图 设计 过 程 

(1) 在 Macromedia Flash Professional 8 中 ， 新 建 一 个 Flash 文档 ， 在 菜单 中 选择 “插入 ”一 “新 建 元 件 ” 
命令 ， 在 弹出 的 “创建 新 元 件 ” 对 话 框 中 选中 “按钮 ” 单 选 按 钮 ， 单 击 “ 确 定 ” 按 钮 。 

(2) 在 “ 弹 起 ”关键 帧 中 输入 文本 “首页 ”， 选 择 “指针 经 过 ” 帧 ， 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 
选择 “插入 关键 帧 ”命令 ， 在 “ 按 下 ” 帧 中 插入 一 个 动画 元 件 ， 在 “点 击 ” 帧 中 画 出 作用 区 域 。 

(3) 返回 场景 ， 从 库 中 将 按 元 件 拖 入 场景 中 适当 的 位 置 。 
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(4) 选中 按钮 ， 打 开 “ 动 作 ” 面 板 ， 在 代码 区 中 输入 如 下 代码 : 


人 


} 
(5) 依次 做 出 多 个 按钮 ， 然 后 生成 SWF 文件 ， 并 在 网 页 中 插入 刚刚 生成 的 SWF 文件 ， 代 码 如 下 : 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
codebase="htip://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cabiversion=7,0,19,0" width="767" height="80"> 
<param name="movie” value="navigation.swf” /> 
<param name="quality” value="high" /> 
‘<embed sre="navigation. sw” quality="high" pluginspage—"htip:/ww.macromedia.com/go/getflashplayer”" type="application/-shockwave flash" width 
="767" height="80"></embed> 
</object> 


图 秘笈 心 法 
在 网 页 中 插入 Flash 导航 的 SWF 文件 ,应 用 的 是 <object> 标 签 ,其 中 object 标签 的 classid 属性 值 为 支持 Flash 
文件 在 网 页 中 播放 的 固定 值 。 


getURL("index jsp"); 


初级 
实例 454 实用 指数 : 银 博 雪 | 
图 实例 说 明 


- 些 网 站 为 了 吸引 更 多 的 浏览 者 ， 导 航 条 会 设计 成 图 片 按钮 的 形式 。 本 实例 将 介绍 如 何 应 用 图 片 按钮 作为 
网 站 的 导航 条 ， 本 实例 的 运行 效果 如 图 17.3 所 示 。 


[商城 首页 | [新品 上 市 | 「 特价 商品 | | 购物 推 车 | | 订单 查询 | 


Ware index New upcity Specialware Shoopingcar Orderdemand 


图 17.3 图 片 按钮 导航 条 


图 关键 技术 
本 实例 主要 应 用 图 片 热点 超 链接 来 实现 ， 应 用 HTML 的 <map> 标 签 可 以 为 图 片 添加 热点 。 为 图 片 设置 热点 
超 链接 的 语法 格式 如 下 : 


<img Ee mS" acm Mane 
<map name="MapName 
<area shape="value” Ey href 人 "URL” alt=" 碎 斌 交 字 "> 
</map> 
<map> 标 签 的 属性 说 明 如 表 17.3 所 示 。 


表 17.3 <map> 标 签 的 常用 属性 


图 片 热点 的 名 称 ， 该 属性 值 对 应 <img> 标 签 的 usemap 属性 值 


alt 设 定 区 域 超 链接 的 描述 文字 

shape | 定义 图 片 热点 区 域 的 形状 ，shape 属性 包含 4 个 属性 值 ， 分 别 为 rect、circle、poly 和 default 
coords 。 |。 设 定 区 域 坐标 

href 设 定 区 域 的 超 链 接地 址 


在 <map> 标 签 中 ,根据 属性 shape 的 取 值 不 同 ， 相 应 坐标 的 设 定 也 不 同 。 下 面 介 绍 shape 属性 的 3 种 取 值 以 
及 相应 坐标 的 设 定 。 
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口 设 定 shape 属性 值 为 rect 

rect 属性 值 表示 矩形 区 域 ， 属 性 coords 的 坐标 形式 为 (xl,y1,x2,y2)。 其 中 ，x1l1 和 yl 表示 和 矩形 左上 角 的 x 
坐标 和 y 坐标 ，x2 和 y2 表示 矩形 右 下 角 的 xx 坐标 和 y 坐标 。 

口 设 定 shape 属性 值 为 cicle 

cicle 属性 值 表示 圆 形 区 域 ， 属 性 coords 的 坐标 形式 为 (x,yr)。 其 中 ，x 和 y 为 圆心 坐标 ，T 为 圆 的 半径 。 

口 设 定 shape 属性 值 为 poly 

poly 属性 值 表示 多 边 形 区 域 ， 属 性 coords 的 坐标 形式 为 (x1,y1,x2;y2,…,xn,yn)。 其 中 ，xn 和 yn 代表 构成 
多 边 形 每 一 顶点 的 坐标 值 ， 多 边 形 有 几 条 边 就 有 几 对 〈x:y) 坐标 。 
图 设计 过 程 

(1) 在 Dreamweaver 工具 中 ， 插 入 一 个 带 有 按钮 的 图 片 ， 然 后 在 “属性 ”面板 中 选择 “矩形 热点 工具 ”， 

为 图 片 的 每 个 按钮 添加 设 定 超 链接 。 选 中 热点 区 域 ， 在 其 “属性 ”面板 的 “ 超 链 接 ” 文 本 框 中 输入 超 链接 的 地 
址 ， 本 实例 中 设置 为 空 链接 “#” 依次 为 每 个 热点 设置 超 链接 地 址 。 


(2) 新 建 index.jsp 页 ， 在 该 页 中 添加 步骤 (1) 设置 的 图 片 热点 超 链 接 的 代码 ， 具 体 代 码 如 下 : 
人 
<tr> 


<td width="925" height="299"><img src="images/bg.jpg”" width="869" height="336" border="0" usemap="#Map"></td> 
<tr> 


</table> 

<map name="Map> 
<area shape="rect" coords="292,17,382,57" href="#" alt=" 嵌 雯 谤 检 绥 次 问 到 陪 械 站 克 > 
<area shape="rect" coords="410,19,500,59" href="#" alt=" 浇 协 蕉 稻 竣 入 到 新 屈 上 六 页 万 
<area shape="rect" coords="525,19,616,60" href="#" alt=" 沉 击 藤 细 座 入 蜀 作价 硝 肯 页 硬 > 
<area shape="rect" coords="640,18,734,59" href="#" alt=" 沉 击 藤 幼 雁 入 到 网 荔 从 村 页 而 > 
<area shape="rect" coords="756,19,848,59" href="#" alt=" 沉 击 藤 幼 进 入 天尊 这 查询 页 硬 > 

</map> 

</body> 


图 秘笈 心 法 

为 了 更 准确 地 设置 图 片 的 热点 区 域 坐标 值 ， 可 以 先 利用 制作 网 页 的 Dreamweaver 工具 ， 应 用 它 的 图 形 界面 
操作 优势 ， 可 以 准确 地 设置 图 片 的 热点 坐标 , 然后 再 将 生成 的 代码 应 用 在 JSP 页 中 即 可 ,这样 省 去 了 直接 在 JSP 
页 中 编写 代码 设置 坐标 值 的 麻烦 。 


实例 455 


图 实例 说 明 
导航 条 是 网 站 设计 中 不 可 缺少 的 元 素 之 一 ， 它 能 正确 地 引导 浏览 者 查找 需要 的 资料 ， 成 为 浏览 者 的 网 站 路 
标 。 本 实例 实现 的 是 导航 条 的 动画 效果 ， 如 图 17.4 所 示 ， 当 鼠标 经 过 导航 文字 时 ， 导 航 文字 将 变 成 另 一 种 效果 。 


17.4 ”导航 条 的 动画 效果 


图 关键 技术 
本 实例 主要 应 用 JavaScript 控制 <img> 标 签 的 sre 属性 值 来 实现 。 当 鼠标 经 过 <img> 标 签 表示 的 图 片 时 ， 会 
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触发 onMouseMove 事件 ， 该 事件 会 调用 相应 的 JavaScript 代码 来 改变 <img> 标 签 的 src 属性 值 ， 当 鼠标 移出 时 ， 
会 触发 onMouseOut 事件 ， 调 用 JavaScript 代码 修改 <img> 标 签 的 src 属性 值 为 初始 值 。 

在 JavaScript 中 ， 可 以 应 用 document 对 象 的 getElementById(0 方 法 获取 <img> 标 签 的 对 象 ，imgl 为 <img> 标 
签 的 这 值 ， 代 码 如 下 : 


document getElementById("img1").sre = "img1 .gif"; 
图 设计 过 程 
(1) 创建 index.jsp 页 ， 编 写 鼠 标 经 过 和 移出 的 JavaScript 方法 move0 和 out0， 关 键 代码 如 下 : 


function move(image,num){ 

image.src=Tmages/top/menu_0'+num+' over.gif; /根据 num 参数 值 ， 更 换 图 片 
} 
function out(image,num){ 

image.src=Tmages/top/menu_ 0'+numt’.gif; /根据 num 参数 值 ， 更 换 图 片 
} 


(2) 在 indexjsp 页 中 ， 应 用 <img> 标 签 添加 图 片 导航 条 ， 并 设置 <img> 标 签 的 onMouseMove 事件 调用 
JavaScript 的 move() 方 法 切换 图 片 ，onMouseOnut 事件 调用 out0 方 法 还 原 图 片 ， 关 键 代码 如 下 : 


<td width="95" align="center”> 

<a href=#"> 

<img src="Images/top/menu_01.gif" id="imagel” border="0" onMouseMove="move(this,'1)" onMouseout="out(this,'1)"> 
</a> 


<td> 

<td width="95" align="center"> 

<a href="#"> 

<img src="Images/top/menu_02.gif" id="image2” border="0" onMouseMove="move(this,'2")" onMouseout="out(this,'2")"> 
</a> 

</td> 

<td width="94" align="center "> 

<a href="#"> 

<img src="Images/top/menu_03.gif" name="image3"” border="0" onMouseMove="move(this,'3'")" onMouseout="out(this,'3")"> 
</a> 


Atd> 
图 秘笈 心 法 

在 <img> 标 签 的 onMouseMove 事件 和 onMouseOnut 事件 中 调用 JavaScript 方法 时 , 应 用 了 this 关键 字 作为 参 
数 ，this 关键 字 表示 一 个 对 象 ， 它 表示 <img> 标 签 本 身 ， 应 用 它 作 为 参数 将 图 片 对 象 传递 到 JavaScript 方法 中 ， 
可 以 方便 地 操作 图 片 对 象 的 属性 。 


实例 456 和 二 


实用 指数 :朗朗 页 


图 实例 说 明 


在 浏览 一 些 网 站 时 ， 当 鼠标 经 过 导航 菜单 某 一 项 时 ， 其 背景 颜色 将 切换 为 其 他 颜色 ， 实 现 这 种 简单 的 效果 
会 更 吸引 浏览 者 的 注意 ， 本 实例 的 运行 效果 如 图 17.5 所 示 。 


| 9s 种 请 忆 X96 六 Wxmwm 替 # 


17.5 动态 改变 导航 菜单 的 背景 颜色 


图 关键 技术 
本 实例 主要 应 用 JavaScript 方法 来 动态 改变 <td> 标 签 的 背景 颜色 。 当 鼠标 经 过 <td> 表 示 的 导航 菜单 时 , 会 触 
发 onMouseOver 事件 ， 然 后 调用 自 定义 的 JavaScript 方法 改变 <td> 的 背景 颜色 : 当 鼠 标 移出 <td> 时 ， 会 触发 
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onMouseOut 事件 ， 调 用 自 定义 的 JavaScript 方法 还 原 背 景 颜色 为 初始 值 。 

在 JavaScript 中 改变 <td> 标 签 的 属性 值 时 ， 需 要 为 <td> 设 置 一 个 id 值 ， 然 后 在 JavaScript 方法 中 ， 根 据 
document 对 象 的 getElementById0 方 法 即 可 获取 单元 格 对 象 , 接 下 来 就 可 以 修改 单元 格 对 象 的 属性 。 如 下 代码 展 
示 了 如 何 修改 id 为 tdl 的 单元 格 的 背景 颜色 。 

document.getElementById("td1").style.background—"skyblue"; 

图 设计 过 程 
(1) 创建 index.jsp 页 ， 编 写 鼠 标 经 过 事件 的 JavaScript 方法 over0 和 鼠标 移出 事件 的 方法 out0， 在 这 两 个 
方法 中 ， 修 改 单元 格 的 背景 颜色 ， 关 键 代码 如 下 : 

<script type="text/avascript"> 

function over(id){ 

document.getElementById(id).style.background="skyblue"; 

function out(id){ 

‘document.getElementById(id).style.background="white”"; 


} 
‘</script> 
(2) 在 每 个 导航 菜单 的 <td> 标 签 中 , 设置 onMouseOver 事件 调用 JavaScript 的 over0 方 法 ,设置 onMouseOnut 

事件 调用 JavaScript 的 out0 方 法 ， 关 键 代码 如 下 : 

<td width="64" id="td1" onmouseover="over('td1)" onmouseout="out(td1)"><a hre 人 ="http:/www.mingribookcom"> 明 日 图 书 </a></td> 

<td width="64" id="td2" onmouseover="over('td2')" onmouseout="out('td2)"><a href=%http:/Wwww.mingrisoft.com ”> 明日 软件 </a></td> 

<td width="64" id="t1d3" onmouseover="over('td3")" onmouseout="out(td3)"><a href="htp:/Awww.mingrisoft.com"> 关 于 明日 </a></td> 

<td width="64" id="td4" onmouseover="over('td4")" onmouseout="out(td4")"><a href=# > 购买 须知 </a></td> 

<td width="64" id="td5" onmouseover="over("td5')" onmouseout="out(td5")"><a href="htp:/Avww.mingribook.com > 联系 我 们 </a></td> 


图 秘笈 心 法 


在 JavaScript 方法 中 ， 修 改 单元 格 对 象 的 背景 颜色 时 ， 首 先 要 调用 style 属性 。 需 要 注意 的 是 ， 表 示 背 景 颜 
色 的 属性 名 为 background， 而 并 不 是 bgcolor。 


实例 457 


实用 指数 : 食 食 但 


图 实例 说 明 


- 般 质感 比较 强 的 导航 条 都 是 通过 图 像 制作 软件 来 制作 质感 图 片 的 。 本 实例 介绍 的 是 只 需要 修改 网 页 代码 
就 可 以 改变 导航 条 背景 色 的 方法 ， 即 应 用 CSS 样式 实现 ， 本 实例 的 运行 效果 如 图 17.6 所 示 。 


图 17.6 实现 质感 导航 条 


图 关键 技术 
本 实例 主要 应 用 CSS 样式 的 wave 滤 镜 实现 。wave 滤 镜 的 语法 格式 如 下 : 
{filter:wave(add=add.,freq=freq.lightstrength=strength.phase=phase.strength=strength)} 
参数 说 明 


@ add: 表示 是 否 要 把 对 象 按 照 波形 样式 打 乱 ， 取 值 为 true 或 false。 

@ freq: 表示 波形 的 频率 ， 也 就 是 指定 在 对 象 上 共 需 要 产生 多 少 个 完整 的 波纹 。 
目 lightstrength: 表示 可 以 对 波纹 增强 光影 效果 ， 取 值 范围 在 0 一 100 之 间 。 

@ phase: 用 来 设置 正弦 波 的 偏 移 量 。 

@ strength: 用 来 设置 振幅 的 大 小 。 
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图 设计 过 程 
(1) 创建 ndex:jsp 页 ， 在 页 面 中 导航 位 置 添加 一 个 单线 边框 的 表格 ， 并 将 表格 的 背景 颜色 设置 为 页 面 的 主 
色调 ， 同 时 添加 导航 文字 ， 关 键 代码 如 下 : 
<table width="10096" height="27” border="1" cellpadding="0" cellspacing="0” 
bordercolor="#FFFFFF" bordercolordark="#FFFFFF" bordercolorlight="#0066CC” bgcolor="#006666"> 
<tr align="center”> 
<td valign="botftom"><a href=#" class="shadow”> 首 页 </a></td> 
<td valign="botfom"><a href=#" class="shadow"> 公 司 简 介 </a></td> 
<td valign="botftom"><a href=#" class="shadow"> 产 品 介绍 </a></td> 
<td valign="bottom"><a href="#" class="shadow"> 技 术 支 持 </a></td> 
<td valign="bottom"><a href=#" class="shadow"> 公 司 荣 誉 </a></td> 
<td valign="bottom"><a href="#" class="shadow"~ 网 站 地 图 </a></td> 
<td valign= "botiom'><a href="#" class="shadow"> 与 我 联系 </a></td> 
</tr> 
</table> 


(2) 为 导航 条 设置 CSS 滤 镜 样式 ， 也 就 是 设置 <table> 标 签 的 style 属性 ， 关 键 代码 如 下 : 
style="/filter:wave(add=falsefreq=1,lightstrength=50,phase=50)" 


图 秘笈 心 法 


可 以 将 CSS 样式 代码 写 在 <style> 标 签 内 ， 并 设置 样式 的 名 称 ， 然 后 为 <table> 标 签 的 class 属性 引用 该 CSS 
样式 名 即 可 ， 这 样 有 利于 网 站 样式 的 维护 ， 代 码 如 下 : 
<style type="text/css "> 
.navigationStyle{ 
filter:wave(add=false,freq=1,lightstrength=50.phase=50): 
} 


</style> 


Ey | 4 - 


图 实例 说 明 


当 网 页 内 容 比 较 复杂 时 ， 可 以 使 用 标签 页 导航 条 将 功能 类 似 的 信息 放 在 同一 个 标签 页 内 ， 用 户 可 以 方便 地 
在 不 同 的 标签 页 间 进 行 切换 。 本 实例 将 介绍 如 何 实现 标签 页 的 导航 条 ， 本 实例 的 运行 效果 如 图 17.7 所 示 ， 单 击 
“社会 “法 制 ^“ 体 育 ” 和 “娱乐 ”标签 时 ， 将 分 别 显示 不 同 的 类 别 信息 。 

2009 年 3 月 12 日 星期 四 14:18:12 。 新 闻 内 容 关键 :| ”|[ 叶 下 要闻] 站 | 
社会 “法制 ”体育 娱乐 1 焦点 导读 


9 中 国 春 二 期 间 j 中 运输 司 兄 良好 
9 昨天 、 今 天 哪个 是 立春 


9 全 省 取缔 了 27 守 采 供血 机 构 
外 开始 关注 中 国 的 春节 


RD | ， + 保险 公司 不 会 大 多 回 基 全 
好 际 起 剖 拍 二 典 名 竺 区 9。 糊 朱 细 和 开放 基 全 
LE 100 亿 烧 久 将 浇 到 | 认 天 来 了 什么 ? 


图 17.7 标签 页 导航 条 
图 关键 技术 


本 实例 主要 应 用 Dojo 工具 包 来 实现 ， 可 以 访问 Dojo 的 官方 网 站 http://dojotookit.org 下 载 Dojo 最 新 版 本 的 
工具 包 。Dojo 是 一 个 JavaScript 库 ， 它 的 功能 主要 是 处 理 Ajax 请 求 , 还 包括 对 DOM 的 支持 、 对 拖拉 的 支持 等 。 
Dojo 提供 了 一 个 美观 而 实用 的 工具 集 ， 包 括 树 、 富 文本 编辑 器 、 日 期 选择 器 、 菜 单 和 容器 等 。 本 实例 中 应 用 的 
是 TabContainer 和 ContentPane 容器 。 
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在 使 用 Dojo 时 ， 首 先 需 要 加 载 所 需 包 的 对 象 。Dojo 对 象 的 require0 函 数 可 以 调用 某 个 包 空间 的 对 象 。 在 使 
用 Dojo 时 ， 如 果 需 要 的 对 象 未 引入 JavaScript 文件 中 ， 则 应 该 调用 require0 函 数 来 请 求 这 个 包 空间 ，Dojo 会 根 
据 require 请 求 自动 得 到 相应 的 JavaScript 文件 ， 并 加 载 到 内 存 中 。Dojo 会 自动 维护 已 经 加 载 的 包 列表 ， 所 以 不 
会 重复 加 载 。require0 函 数 的 语法 格式 如 下 : 

dojo.require(object) 

参数 说 明 

object: 用 于 指定 要 调用 的 对 象 ， 包 括 包 路 径 。 

例如 ， 加 载 TabContainer 包 的 具体 代码 如 下 : 

dojo.require("dijit Jayout. TabContainer"): 

-个 标签 页 效果 需要 由 TabContainer 和 ContentPane 两 个 容器 组 成 ,其 中 TabContainer 表示 整个 标签 页 容器 ， 

而 ContentPane 则 用 于 声明 每 一 个 标签 页 ,在 页 面 中 声明 TabContainer 对 象 时 , 只 要 在 <div> 标 签 中 设置 dojoType 
属性 为 dijitlayout.TabContainer 即 可 ， 代 码 如 下 : 

<div id="mainTabContainer" dojoType="dijit layout TabContainer" style="width: 541px;height:177px; display:block; border:0 solid #FFFFFF:"> 

然后 还 需要 声明 ContentPane 对 象 ， 在 声明 ContentPane 对 象 时 ， 与 声明 TabContainer 对 象 类 似 ， 需 要 指定 
dojoType 属性 值 为 dijit.layout.ContentPane， 通 常 还 需要 设置 以 下 几 个 属性 。 

口 refreshOnShow: 用 于 指定 在 标签 页 从 隐藏 到 展现 时 是 否 刷 新 数据 ， 值 为 tue 或 false。 

口 href: 用 于 指定 该 标签 页 内 显示 页 面 的 URL 地 址 。 

口 selected: 用 于 指定 该 标签 页 内 是 否 为 选中 状态 ， 值 为 true 或 false。 

口 title: 用 于 指定 单个 标签 页 的 标题 。 

口 ”preload: 用 于 指定 是 否 强制 加 载 数据 ， 值 为 true 或 false。 


设计 过 程 
(1) 创建 ndexjsp 页 ， 在 该 页 中 导入 Dojo 提供 的 CSS 样式 表 文 件 ， 以 及 Dojo 库 和 dijit 库 ， 关 键 代码 如 下 : 
<style type="text/css "> 


@import "js/dijit/themes/tundra/tundra.css"; 
@import "js/dojo/resources/dojo.css"; 
</style> 
<script type="text/avascript" sre="]js/dojo/dojo.js" djConfig="parseOnLoad: true"></script> 
<script type="text/avascript" sre="js/dijit/dijitjs"></script> 
(2) 在 JavaScript 代码 中 ， 应 用 Dojo 对 象 的 require0 函 数 导 入 TabContainer 对 象 和 ContentPane 对 象 ， 关 
键 代码 如 下 : 
<script type="text/avascript"> 
dojo.require("dijit.layout. TabContainer"); 
dojo.require("dijit.layout.ContentPane"); 
</script> 
(3) 应 用 <div> 标 签 声明 TabContainer 和 ContentPane 对 象 ， 实 现 标签 页 导航 ， 关 键 代码 如 下 : 
<div id="mainTabContainer" dojoType="dijit layout TabContainer”" style="width:541px;height:177px; display:block; border:0 solid #FFFFFF:"> 
<div id="news1” dojoType="dijit layout.ContentPane” refreshOnShow="true” selected="hue” title="## 会 " href="newsListjsp?ftype= 寺 会 " 
Preload= "ve 社会 新 闻 </div> 
<div id="news2" dojoType="dijit layout. ContentPane" title=" 闭 前” refreshOnShow="true” href="newsListjsp?type= 活 秽 /> 法 制 新 闻 </div> 
<div id="news3" dojoType="dijit layout.ContentPane" title=" 体 育 " refreshOnShow="frue" href="newsListjsp?type= 体 育 "> 体 育 新 闻 </div> 
<div id="news4” dojoType="dijitlayout.ContentPane”title=" 克 舌 ”refreshOnShow="tue”href="newsListjsp?type= 效 锯 > 娱乐 新 闻 
</div> 
</div> 


国 秘笈 心 法 


Doio 是 一 个 非常 庞大 的 JavaScript 类 库 ，Dojo 以 包 的 形式 组 织 众 多 功能 ， 相 同 功能 的 函数 、 类 、 对 象 放 在 
同一 个 包 下 ， 类 似 于 Java 中 的 类 库 。 而 导入 包 也 类 似 于 Java 的 import， 也 可 以 使 用 〈*) 号 ， 代 码 如 下 : 


dojo.require("dojo.widget.*"); 
目前 ， 在 很 多 开发 Web 的 项 目 中 ， 都 采用 Dojo 作为 JavaScript 框架 ， 最 主要 是 Dojo 实现 了 Ajax 的 封装 处 
理 ， 应 用 它 可 以 方便 地 处 理 Ajax 请 求 。 关 于 Dojo 的 详细 介绍 读者 可 以 参考 相关 资料 。 
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17.2 下拉 菜单 式 导航 条 


下 拉 菜 单 式 导航 条 可 以 使 整个 页 面 看 起 来 更 规范 ， 本 节 将 介绍 一 些 常用 的 下 拉 菜 单 式 导 航 条 ， 如 二 级 导航 
菜单 、 半 透明 背景 的 下 拉 菜 单 、 弹 出 式 下 拉 菜 单 等 。 


| 


初级 
实用 指数 : 位 食 但 
图 实例 说 明 
网 站 中 的 导航 条 在 整个 网 站 中 充当 着 网 站 路 标的 作用 ， 一 个 层次 分 明 的 网 站 导航 对 于 网 站 来 说 极为 重要 。 
由 于 网 站 内 容 过 于 复杂 ， 有 时 一 级 导航 菜单 并 不 能 明确 划分 网 站 内 容 ， 此 时 需要 设计 二 级 导航 菜单 。 本 实例 实 
现 的 是 如 何 为 网 站 建立 二 级 导航 菜单 ， 运 行 本 实例 ， 当 鼠标 移动 到 一 级 导航 菜单 时 ， 将 显示 对 应 的 二 级 导航 菜 
单 ， 如 图 17.8 所 示 。 


图 17.8 二 级 导航 菜单 


图 关键 技术 

实现 二 级 导航 菜单 也 很 简单 ， 应 用 JavaScript 来 动态 处 理 HTML 超 链 接 <a> 标 签 的 鼠标 事件 即 可 实现 。 当 鼠 
标 经 过 一 级 导航 菜单 时 , 会 触发 onMouseOver 事件 , 然后 在 该 事件 中 调用 自 定义 的 JavaScript 方法 。 在 JavaScript 
方法 中 ， 应 用 innerHTML 属性 为 <div> 动 态 添加 二 级 导航 菜单 信息 即 可 。 

例如 ， 在 网 页 中 添加 一 个 id 为 mydiv 的 <div> 标 签 ， 应 用 JavaScript 动态 为 该 <div> 添 加 内 容 的 代码 如 下 : 

document.getElementById("mydiv").innerHTML="<a hre 伍 # 吃 向 DIV 中 添加 内 容 </a>"; 
图 设计 过 程 

(1) 创建 index.jsp 页 ,编写 动态 添加 二 级 导航 菜单 的 JavaScript 方法 addSecondMenu()， 参数 value 用 于 判 

断 一 级 导航 类 别 的 值 ， 关 键 代码 如 下 : 


function addSecondMenu(value){ 
var submenu = document.getElementById("submenu"); 
Switch (value){ 

case "基础 ": 


submenu.innerHTML="<a hre 人 =## target=mainF> 客 户 信息 管 理 </a>|<a hre 人 = 六 target='mainF 人 > 商品 信息 管理 </a>|<a hre 仁 六 
target='mainF> 供 应 商 信息 管理 </a>|<a hre 人 = 六 target=mainF> 客 户 信息 查询 </a>|<a hre 人 = 六 target=mainF> 商 品 信息 查询 </a>|<a hre 人 = 六 
target='mainF> 供 应 商 信息 查询 </a>"; 

break: 


"采购 … 
1 submenu.innerHTMIL 一 "<a hre 全 党 target-mainF> 商 品 采购 </a>|<a hre 伍 # target=mainF'> 采 购 查询 </a>"; 
break: 
e "库存 ": 
ol submenu.innerHTMIL="<a hre 人 = 雪 target=mainF> 商 品 入 库 </a>|<a hre 全 # target='mainF> 商 品 入 库 退 货 </a>j<a hre 全 入 
target= mainF> 库 存 查询 </a>|<a hre 仁 尖 target='mainF> 价 格调 整 <a>"; 
en 
.此 外 省 申 了 一 些 case 语句 的 判断 
} 
(2) 在 一 级 导航 菜单 的 超 链接 <a> 标 签 中 ， 添 加 鼠标 经 过 事件 onMouseOver， 在 该 事件 中 调用 添加 二 级 导 
航 菜单 的 方法 addSecondMenu0， 关 键 代码 如 下 : 
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<a href=#" onMouseOver="addSecondMenu( 基 础 )"> 基 础 信息 </a>| 
<a hre 人 = 叶 #" onMouseOver="addSecondMenu(' 采 购 )"> 采 购 管理 </a>| 
<a hre 人 = #"onMouseOver="addSecondMenu(' 库 存 )"> 库 存 管理 </a>| 
<a hre 作 哇 "onMouseOver-"addSecondMenu( 销售 )"> 商 品 销售 </a>| 
<a href= 叶 ”onMouseOver="addSecondMenu( 查 询 )"> 查 询 统 计 </a>| 
<a href= 叶 "onMouseOver="addSecondMenu( 往 来 )"> 往 来 管理 </a>| 
<a href=#" onMouseOver="addSecondMenu( 系统 )"> 系 统 设置 </a> 


图 秘笈 心 法 
本 实例 在 JavaScript 方法 中 应 用 的 是 switch-case 语句 ， 而 不 是 站 语句 。 当 判断 分 支 比较 多 时 ， 应 该 考虑 使 
用 switch-case 语句 来 实现 。 


2 初级 
实例 465 实用 指数 : 依 食 食 
图 实例 说 明 


本 实例 将 介绍 如 何 实现 半 透 明 背 景 的 下 拉 菜 单 ， 运 行 本 实例 ， 当 鼠标 移动 到 一 级 导航 菜单 时 ， 在 其 下 方 将 
显示 出 半 透 明 的 下 拉 式 二 级 菜单 ， 透 过 此 下 拉 菜 单 仍 可 以 看 到 页 面 上 的 内 容 ， 如 图 17.9 所 示 。 


[eolt 年 or 月 29 日 星期 四 11 10:34] 。 首页 


简况 排行 桥 
17.9 半 透 明 背 景 的 下 拉 菜 单 


图 关键 技术 


实现 半 透 明 背 景 的 下 拉 菜单 , 首先 需要 在 页 面 中 根据 onMouseOver 和 onMouseOnut 事件 调用 JavaScript 方法 
动态 向 页 面 中 添加 下 拉 菜 单 , 然后 再 通过 设置 下 拉 菜 单 的 CSS 样式 实现 半 透 明 效 果 。 在 CSS 样式 中 , 应 用 alpha 
滤 镜 来 实现 半 透 明 的 效果 ，alpha 滤 镜 的 语法 格式 如 下 : 

{filter:alpha(opacity=value,finishOpacity=value, style=value, startX=x1, startY=y]1 ,finishX=x2,finishY=y2)} 

参数 说 明 

@ opacity: 表示 透明 度 ， 取 值 范 围 在 0 一 100 之 间 ，0 表示 完全 透明 ，100 表示 完全 不 透明 。 

@ finishOpacity: 用 于 设置 渐变 的 透明 效果 ， 可 以 使 用 该 参数 指定 结束 时 的 透明 度 ， 取 值 范围 在 0 一 100 之 间 。 

@ style: 指定 透明 区 域 的 形状 特征 ， 取 值 分 别 为 0( 统 一 形状 )、1 (线形 )、2 (放射 状 )、3 (长 方形 )。 

@ startX: 表示 渐变 透明 效果 区 域 的 开始 位 置 x 坐标 。 

@@ startY: 表示 渐变 透明 效果 区 域 的 开始 位 置 y 坐标 

@ finishX: 表示 渐变 透明 效果 区 域 的 结束 位 置 x 坐标 。 

@ finishY: 表示 渐变 透明 效果 区 域 的 结束 位 置 y 坐标 。 
图 设计 过 程 

(1) 创建 menujs 文件 ， 编 写实 现下 拉 菜 单 的 JavaScript 方法 ， 主 要 包括 控制 下 拉 菜 单 的 显示 和 隐藏 的 方 

法 ， 关 键 代 码 如 下 : 

var menuOffX=0; // 菜 单 距 连接 文字 最 左 端 距离 


var menuOffY=18; // 菜 单 距 连 接 文字 顶端 距离 
var fo_shadows=new ArrayO: 


var linkset=new Armay0; 
var IE=document.all&-&navigator.userAgent.indexOf("Opera")—-1: 
var ss .getElementById&&ldocument.all: 
Fr netscape4=document.layers; 
1 给 化 要 显示 的 荣 单 
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function showmenu(e.vmenu.mod) { 
if (!document.all&&:!document.getElementByIdé&-é&!document layers) 
return 
which=vmenu; 
clearhidemenuO: 
IE_clearshadow0): 
menuobj=IE? document.all.popmenu : netscape6? document getElementById("popmenu") : netscape4? documentpopmenu : 
menuobjthestyle=(IE|Inetscape6)? menuobj.style : menuobj; 
if (Elinetscape6) 
menuobj innerHTML=which 
elsef 
menuobj.document. write( <layer name="other” bgColor="#E6E6E6" width="165" onmouseover-"clearhidemenuO"onmouseout- "hidemenu0" > 
+whicht'</layer>"); 
menuobj.document closeO; 
} 


menuobj.contentwidth=(IE|Inetscape6)? menuobj.offsetWidth : menuobj.document.other.document.width 

menuobj.contentheight=(IE|lnetscape6)? menuobj.offsetHeight : menuobj.document.other. document.height 

eventX=IE? event.clientX : netscape6? e.clientX : ex 

eventY=IE? event.clientY : netscape6? e.clientY : ey 

Var rightedge=IE? document.body.clientWidth-eventX : window.innerWidth-eventX; 

Var bottomedge=IE? document.body.clientHeight-eventY : window.innerHeight-eventY; 

if (rightedge<menuobj.contentwidth) 

menuobi.thestyle.left=I[E? document.body.scrollLeft+eventX-menuobj.contentwidth+menuOffX : netscape6?window.pageXOffsett eventX- 

menuobj.contentwidth : eventX-menuobj.contentwidth 

else 


menuobj thestyle.left-IE? IE_x(event.srcElement)+menuOffX : netscape6? window.pageXOffset+eventX : eventX 
if (bottomedge<menuobj.contentheight&-&-mod!=0) 


menuobj.thestyle.top=IE?document.body.scrollTopteventY-menuobj.contentheight-event.offsetY+menuOffY-23 
netscape6?window.pageYOffsetteventY-menuobj.contentheight-10 : eventY-menuobj.contentheight 
else 
Imenuobj.thestyle.top=IE? IE_y(event.srcElement)+menuOffY : netscape6? window.pageYOffsetteventY+10 : eventY 
menuob.thestyle.visibility="visible"; 
IE_dropshadow(menuobj,"#999999",3); 
return false; 


} 
// 计 算 y 轴 的 坐标 
function IE_y(e){ 
Var t=e.offsetTop; 
while(e=e.offsetParent){ 
t+=e.offsetTop; 
} 


return ft 


} 
1/ 计算 x 轴 的 坐标 
function IE x(e){ 
Var l=e.offsetLeft: 
while(e=e.offsetParent){ 
l+=e.offsetLeft: 


return 1 


} 
// 显 示 菜 单 
function IE_dropshadow(el, color, size) { 
vari 
for (i=size; i>0; i--){ 
Var rect = document.createElement('div"); 
Var rs= fect.style 
TS.position = 'absolute’; 
Ts.left = (el.style.posLeft +i) + 'px': 
rs.top = (el.style.posTop + i) + 'px'; 
rs.width = el.offsetWidth + px’; 
rs.height = el.offsetHeight + 'px'; 
Ts.zIndex =el.style.zIndex - i: 
Ts.backgroundColor = color; 
var opacity = 1 -i/ (i+ 1): 
rs .filter ='alpha(opacity= + (100 * opacity) + ")'; 
fo_shadows[fo_shadows.length] = rect 


} 


} 
/清除 显示 
function IE_clearshadowO{ 
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for(var i=0:i<fo_shadows.length:ith){ 
if (fo_shadows[i]) 
fo_shadows[i].style.display="none" 
} 


fo_shadows=new Array0O; 
} 
/隐藏 菜单 
function hidemenuO{ 
if (window.menuobj) 
menuobj.thestyle.visibility=(IE|Inetscape6)? "hidden" : "hide” 
IE_clearshadowO 
} 
/动态 隐藏 
function dynamichide(e){ 
if (IE&&!menuobj.contains(e.toElement)) 
hidemenuO 
else if (netscape6&&e.currentTarget!= erelatedTarget&c&e !contains_netscape6(e.currentTarget, e.relatedTarget)) 
hidemenu() 


} 
/延迟 隐藏 菜单 
function delayhidemenuO{ 
证 (IE|Inetscape6lnetscape4) 
delayhide=setTimeout("hidemenu0".500) 


} 
/停止 延迟 隐藏 菜单 
function clearhidemenuO){ 
这 (window.delayhide) 
clearTimeout(delayhide) 
} 
function highlightmenu(e,state){ 
if (document.all) 
source_el=event.srcElement 
else if (document.getElementById) 
source_el=e.target 
if (source_el.className—"menuitems"){ 
source_el.id=(state—"on")? "mouseoverstyle” : "" 


else{ 
while(source_el.id!="popmenu"){ 
source_el=document.getElementById? source_el.parentNode : source_el.parentElement 
if (source_el.className—"menuitems"){ 
source_el.id=(state—"on")? "mouseoverstyle" : "" 
} 
LE 
} 
} 
/设置 菜单 背景 
function overbg(tdbg){ 


tdbg.style.background='"url(Images/item _over.gif)' 
tdbg.style.border=' #9CA6C6 1px solid' 


} 
function outbg(tdbg){ 
tdbg. style.background="url(Images/item_out.gif)’ 
tdbg.style.border=" 
} 
Var sysmenu='<table width=80><tr><td id=library onMouseOver=overbg(library) onMouseOut=outbg(library)><a hre 人 给 图 书馆 信息 </a></td></tr>\ 
<tr><td id=manager onMouseOver=overbg(manager) onMouseOut=outbg(manager)><a hre 人 =#> 管 理 员 设置 </a></td></tr>\ 
<tr><td id-para onMouseOver=overbg(para) onMouseOut-outbg(para)><a href-#> 参 数 设置 </a></td></tr>\ 
<tr><td id=bookcase onMouseOver=overbg(bookcase) onMouseOut=outbg(bookcase)><a href=#> 书 架设 置 </a></td></tr~>\ 
</table>’ 
Var readermenu=<table width=90><tr><td id=readerType onMouseOver=overbg(readerType) onMouseOut=outbg(readerType)><a href=#> 读 者 类 型 管 
理 </a></td></trx\ 
<tr><td id=reader onMouseOver=overbg(reader) onMouseOut=outbg(reader)><a href=#> 读 者 档案 管理 </a></td></tr>\ 
‘</table> 
Var bookmenu='<table width=90><tr><td id=bookType onMouseOver=overbg(bookType) onMouseOut=outbg(bookType)><a href=#> 图 书 类 型 设置 
</a></td></tra\ 
<tr><td id=book onMouseOver=overbg(book) onMouseOut=outbg(book)><a href=#> 图 书 档案 管理 </a></td></tr>\ 
‘</table> 
Var borowmenu='<table width=60><tr><td id=Borow onMouseOver=overbg(Borrow) onMouseOut=outbg(Borrow)><a href=#> 图 书 借阅 
</a></td></tr\ 
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<tr><td id=renew onMouseOver=overbg(renew) onMouseOut=outbg(renew)><a href=#> 图 书 续 借 </a></td></tr>\ 

<tr><td id=giveback onMouseOver=overbg(giveback) onMouseOut=outbg(giveback)><a href=#> 图 书 归 还 </a></td></tr\ 

-</table> 

var querymenu='<table width=90><tr><td id=bookQuery onMouseOver=overbg(bookQuery) onMouseOut=outbg(bookQuery)><a href=#> 图 书 档案 查 
询 </a></td></tr\ 

<tr><td id=borrowQuery onMouseOver=overbg(borrowQuery) onMouseOut=outbg(borrowQuery)><a href-#> 图 书 借阅 查询 </a></td></tr>\ 

<tr><td id=givebackQuery onMouseOverroverbg(givebackQuery) onMouseOut=outbg(givebackQuery)><a href-#> 借 阅 到 期 提醒 </a></td></tr\ 
</table>" 

Var sortmenu='<table width=100><tr><td id=readerSort onMouseOver=overbg(readerSort) onMouseOut=outbg(readerSort)><a href=#> 读 者 借阅 排行 
榜 </a></td></tr\ 

<tr><td id-bookSort onMouseOver=overbg(bookSort) onMouseOut=outbg(bookSort)><a href=#> 图 书 借阅 排行 榜 </a></td></tr>\ 

‘</table> 


(2) 创建 indexjsp 页 ， 在 页 面 的 <scrip 人 标签 中 导入 menujs 文件 ， 然 后 在 一 级 导航 超 链 接 <a> 标 签 中 设置 
onMouseOver 和 onMouseOnut 事件 ， 当 鼠标 经 过 导航 超 链接 时 显示 下 拉 菜 单 ， 鼠 标 移出 时 隐藏 下 拉 菜 单 ， 关 键 


代码 a FF 
onmouseover=showmenu(event,sysmenu) onmouseout=delayhidemenu() class=mavlink’ style="CURSOR:hand" > 系统 设置 </a> | 
‘onmouseover=showmenu(event,readermenu) onmouseout=delayhidemenu() class=mavlink'style="CURSOR:hand" > 读者 管理 </a> | 
<a onmouseover=showmenu(event,bookmenu) onmouseout=delayhidemenu() class=mavlink’ style="CURSOR:hand" > 图书 管理 </a> | 
<a _ onmouseover=showmenu(event.borrowmenu) onmouseout=delayhidemenuO class=mavlink’ style="CURSOR:hand”" > 图 书 借 还 </a> | 
<a onmouseover=showmenu(event,querymenu) onmouseout=delayhidemenu() class=%mavlink' style="CURSOR:hand" > 系统 查询 </a> | 
<a onmouseover=showmenu(event,sortmenu) onmouseout=delayhidemenu() class=mavlink’ style="CURSOR:hand" > 排行 榜 </a> | 
(3) 定义 名 为 menuskin 的 CSS 样式 ， 设 置 下 拉 菜 单 的 半 透 明 效果 ， 关 键 代 码 如 下 : 
menuskin { 
BORDER: #666666 1px solid; VISIBILITY: hidden:; 
POSITION: absolute; 
background-image:url("../Images/item_out.gif"); 
-repeat : repeat-y; 
Filter: Alpha(Opacity=85); 
} 
(4) 在 页 面 中 添加 一 个 <div> 标 签 ， 动 态 加 载 的 下 拉 菜单 内 容 将 显示 在 此 标签 体内 ， 设 置 此 标签 应 用 半 透 


明 效 果 的 样式 ， 关 键 代 码 如 下 : 
<div class=menuskin id=popmenu onmouseover="clearhidemenu():highlightmenu(event,'‘on)" 
‘onmouseout="highlightmenu(event,'off );dynamichide(event)" 
style="Z-index:100;position:absolute:"></div> 
图 秘笈 心 法 
alpha 属性 是 把 一 个 目标 元 素 与 背景 混合 。 设 计 者 可 以 指定 数据 来 控制 混合 的 程度 。 这 种 “与 背景 混合 ” 通 
俗 地 说 是 一 个 元 素 的 透明 度 。 通 过 指定 坐标 可 以 指定 点 、 线 、 面 的 透明 度 。 
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图 实例 说 明 
所 谓 弹出 式 下 拉 菜 单 ， 是 指 类 似 于 Windows 应 用 程序 的 操作 菜单 ， 如 Word 的 主 菜单 。 本 实例 将 介绍 如 何 


实现 这 种 弹出 式 下 拉 菜 单 。 运 行 本 实例 ， 当 和 鼠标 移动 到 一 级 导航 菜单 时 ， 将 弹出 对 应 的 二 级 下 拉 菜 单 ， 如 果 二 
级 菜单 中 还 有 子 菜单 ， 鼠 标 经 过 时 将 继续 显示 子 菜单 ， 如 图 17.10 所 示 。 


系统 设置 | 读者 管理 | 图 书 管理 | 图 书 借 还 | 系统 查询 | 


| 还 书 时 间 ， 


17.10 ”弹出 式 下 拉 菜 单 
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力 关键 技术 

本 实例 的 弹出 式 菜单 的 效果 主要 是 通过 Fireworks 实现 的 , 具体 方法 将 在 设计 过 程 中 详细 介绍 , 此 处 先 对 “ 弹 
出 菜单 编辑 器 ”对 话 框 中 “内 容 ” 选 项 卡 的 “目标 ” 栏 中 的 可 选 值 进行 详细 介绍 。 在 “目标 ” 栏 中 共有 4 个 选 
项 ， 各 选项 的 功能 如 下 。 

口 _blank: 指定 将 链接 的 目标 文件 加 载 到 未 命名 的 新 浏览 器 窗口 中 。 

口 parent: 指定 将 链接 的 目标 文件 加 载 到 包含 链接 的 父 框架 页 或 窗口 中 ， 如 果 包 含 链接 的 框架 不 是 嵌 套 

的 ， 则 链接 的 目标 文件 加 载 到 整个 浏览 器 窗口 中 。 
口 _self: 指定 将 链接 的 目标 文件 加 载 到 链接 所 在 的 同一 框架 或 窗口 中 。 
口 _top: 指定 将 链接 的 目标 文件 加 载 到 整个 浏览 器 窗口 中 ， 并 由 此 删除 所 有 框架 。 


图 设计 过 程 
(1) 在 Fireworks 中 创建 一 个 新 的 文件 ， 名 称 为 pppmenu.png， 画 布 大 小 为 750x33。 在 该 文件 中 添加 5 个 


图 层 ， 并 在 每 一 层 中 添加 一 个 导航 图 片 ， 如 图 17.11 所 示 。 选 择 “ 拢 形 热点 工具 ”为 每 一 张 图 片 添加 热点 ， 完 
成 后 的 效果 如 图 17.12 所 示 。 


系统 设置 | 读者 管理 | 图 书 管理 | 图 书 借 还 | 系统 查询 | 系统 设置 | 武者 管理 | 阳 书 管理 | 并 知 货 还 | 系统 站 和 | 


17.11 添加 导航 图 片 17.12 添加 热点 


(2) 在 “读者 管理 ”热点 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 弹出 菜单 ”命令 ， 将 弹出 “ 弹 
出 菜单 编辑 器 ”对 话 框 。 在 “文本 ” 栏 中 输入 条 目 内 容 ， 在 “链接 ” 栏 中 输入 此 条 目 所 链接 到 的 页 面 的 文件 名 
或 地 址 ， 在 “目标 ” 栏 中 指定 链接 到 的 内 容 在 何 处 显示 ， 在 该 栏 中 有 4 个 可 选项 ， 有 具体 说 明 请 读者 参见 本 实例 
的 关键 技术 部 分 。 如 果 某 一 菜单 项 还 包括 子 菜单 ， 可 以 直接 在 相应 位 置 输入 子 菜单 项 的 名 称 ， 然 后 单 击 该 窗口 
中 的 外 按钮 即 可 。 设 置 完成 后 的 “读者 管理 ”菜单 内 容 如 图 17.13 所 示 。 


内 容 | 外 观 | 高 吸 | 位 置 | 


图 17.13 “弹出 菜单 编辑 器 ”对 话 框 


(3) 单 击 “ 继 续 ”按钮 ， 设 置 菜单 的 外 观 ， 设 置 完 成 后 再 单 击 “ 继 续 ” 按 钮 ， 对 菜单 的 边框 和 单元 格 进行 
详细 设置 ， 再 单 击 “ 继 续 ” 按 钮 ， 设 置 菜单 和 子 菜单 的 位 置 ， 最 后 单 击 “完成 ”按钮 ， 完 成 一 个 菜单 的 设置 。 

(4) 重复 步骤 (2) 和 步骤 (3) 的 操作 ， 给 其 他 菜单 添加 下 拉 菜 单 。 完 成 后 按 F12 键 进行 预览 。 

(5) 选择 “文件 ”一 “导出 ”命令 将 弹出 “导出 ”对 话 框 ， 在 “文件 名 ”文本 框 中 输入 文件 名 后 ， 单 击 “ 保 
存 ” 按 钮 即 可 。 

(6) 将 设置 完成 后 的 菜单 应 用 到 网 页 中 。 此 时 读者 需要 将 生成 的 HTML 文件 打开 ， 将 <body></body> 之 间 
的 内 容 复 制 到 指定 网 页 中 需要 显示 导航 条 的 位 置 。 如 果 用 户 想 改变 超 链接 的 地 址 ， 可 以 直接 在 代码 中 修改 ， 也 
就 是 将 代码 location= 迪 中 的 “#” 号 蔡 换 为 超 链接 地 址 。 


国 秘笈 心 法 


应 用 Fireworks 图 形 界面 工具 可 以 在 短 时 间 内 设计 出 弹出 式 菜单 ， 并 且 会 生成 相应 的 HIML 代码 ， 只 需要 
将 这 些 HTML 内 容 应 用 在 网 页 中 即 可 ， 这 样 省 去 了 编写 大 量 HTML 代码 的 麻烦 ， 从 而 提高 开发 效率 。 


Java Web 开发 实例 大 全 (基础 卷 ) 


实例 462 和 级 
实用 指数 : 食 食 食 | 
国 实例 说 明 


采用 弹出 式 悬 浮 菜单 ， 不 但 可 以 使 网 站 的 导航 内 容 更 加 清晰 ， 而 且 不 影响 页 面 的 整体 效果 。 运 行 本 实例 ， 
当 鼠 标 移动 到 一 级 导航 菜单 的 标题 上 时 ， 将 弹出 悬浮 菜单 显示 该 菜单 对 应 的 子 菜单 ， 鼠 标 移出 时 ， 将 隐藏 悬浮 
菜单 ， 如 图 17.14 所 示 。 


更 工党 理 / 公 聘 管理 / 辣 训 笔 至 / 类 适 第 理 / 亲生 全 全 / 运 出 稍 狂 


shi oH Ess 


17.14 弹出 式 悬 浮 菜单 


图 关键 技术 


本 实例 主要 是 在 JavaScript 中 ， 动 态 改变 <div> 标 签 对 象 的 style 属性 的 display 属性 值 来 实现 动态 显示 和 隐 
藏 二 级 导航 菜单 。 其 实 ， 每 一 个 一 级 菜单 下 的 二 级 菜单 内 容 已 经 添加 在 网 页 的 <div> 标 签 中 ， 只 是 此 时 设置 了 
<div> 不 显示 。 所 以 ， 在 JavaScript 中 ， 当 鼠标 经 过 某 个 导航 的 标题 时 ， 只 需要 调用 指定 的 <div> 对 象 ， 动 态 修改 
它 的 display 属性 即 可 。display 属性 包含 两 个 用 于 显示 和 隐藏 的 属性 值 ， 分 别 为 none〈 隐 藏 》 和 block (显示 )。 

例如 ， 在 网 页 中 有 一 个 id 为 mydiv 的 <div> 标 签 ， 并 设置 了 此 <div> 为 隐藏 。 在 JavaScript 中 ， 控 制 此 <div> 
显示 的 语法 格式 如 下 : 

document.getElementById("mydiv").style.display="block": 

图 设计 过 程 
(1) 编写 用 于 显示 和 隐藏 的 JavaScript 方法 ， 当 鼠标 经 过 一 级 菜单 标题 时 会 显示 二 级 菜单 ， 当 鼠标 移出 时 
会 隐藏 二 级 菜单 ， 关 键 代 码 如 下 : 
function change(img,subMenupath.type){ 
img.sre="images/"+patht".GIF"; 
if(subMenu!=nulD{ 
这 type 一 0){ 
subMenu.style.display="none"; 
Jelse{ 
subMenu.style.display="block"; 
} 


} 


} 
(2) 在 页 面 中 ， 预 先 在 <div> 标 签 中 为 每 个 一 级 导航 菜单 添加 二 级 菜单 的 内 容 ， 并 设置 二 级 菜单 的 <div> 标 
签 为 隐藏 ， 关 键 代 码 如 下 : 


<div id-"NUSer' style="background-color:#F3FFDS; border:#754102 1px solid: width:200px; position:absolute; display:none; left: 1px; top: 34px; "> 
<table width="]0096" border="0" height="35px" cellspacing="0" cellpadding="0"> 
<t> 
<td align="center"><a hre 仁 # 浏 览 员工 信息 </a>&nbsp;&nbsp;<a hre 伍 # 吃 添加 新 员工 </a></td> 
<t> 
</table> 


/有 外 省 申 了 其 他 二 级 琳 单 的 -<tt> 内容 
(3) 在 一 级 菜单 的 表格 的 <td> 中 设置 onMouseOver 和 onMouseOut 事件 , 调用 步骤 (1) 中 定义 的 JavaScript 
的 change0 方 法 ， 动 态 改 变 二 级 菜单 <div> 的 显示 和 隐藏 ， 关 键 代 码 如 下 : 


<td onMouseOver="change(ImgUser. NUser,NUser 1..1)" onMouseOut—"change(ImgUser. NUser.'NUser_b'.0)" style="cursor:hand; "> 
<img id="IngUser” ste="images/NUser_b.GIF™” width="106" height="48" border="0"> 
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…// 省 略 了 二 级 菜单 的 <div> 代 码 
<ltd> 


国 秘笈 心 法 
在 本 实例 中 ，onMouseOver 和 onMouseOut 事件 都 是 调用 的 同一 个 方法 ， 只 是 由 于 传递 的 type 参数 不 同 ， 
然后 在 JavaScript 方法 中 ， 根 据 type 参数 值 即 可 判断 执行 的 是 显示 还 是 隐藏 的 代码 。 
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国 实例 说 明 

在 有 些 网 站 中 ， 会 将 其 导航 条 设计 为 展开 式 导 航 条 ， 这 样 可 以 更 加 引 人 注 意 。 本 实例 将 介绍 如 何 应 用 
JavaScript 的 setTimeoutO 函 数 实现 展开 式 导航 条 。 运 行 本 实例 ， 页 面 右 侧 的 “联系 我 们 ”导航 条 是 慢 慢 展开 的 ， 
并 且 每 次 弹出 属性 页 面 时 ， 都 会 以 同样 的 动画 效果 展开 ， 如 图 17.15 所 示 。 


17.15 ”应 用 setTimeoutO 函 数 实现 展开 式 导航 条 


图 关键 技术 


本 实例 主要 是 应 用 JavaScript 来 动态 改变 <img> 图 片 对 象 的 高 度 ， 这 样 就 需要 在 自 定义 JavaScript 方法 中 ， 
应 用 setTimeoutO 函 数 间隔 指定 的 时 间 动 态 修改 图 片 对 象 的 高 度 ， 从 而 实现 动画 效果 。setTimeoutO 函 数 的 语法 格 
式 如 下 : 

window.setTimeout(function, time); 

参数 说 明 

@ function: 该 参数 为 setTimeout0 函 数 所 调用 的 自 定义 的 JavaScript 方法 名 或 可 执行 的 JavaScript 代码 。 

@ time: 当 过 了 time 时 间 后 调用 指定 的 函数 ， 单 位 为 毫秒 。 

图 设计 过 程 
(1) 在 网 页 中 要 显示 “联系 我 们 ”导航 条 的 位 置 ， 添 加 一 个 全 部 展开 后 的 “联系 我 们 ”导航 图 片 ， 并 将 图 片 
的 height 属性 值 设置 为 0，name 属性 值 设置 为 our。 在 需要 设置 超 链接 的 文字 上 添加 图 片 并 设置 相应 的 超 链接 。 


(2) 编写 JavaScript 方法 ， 应 用 setTimeout0 函 数 改变 图 片 对 象 的 高 度 值 ， 实 现 图 片 的 展开 效果 ， 关 键 代 码 
如 下 : 


function ourmoveO{ 
if(our height<163){ 
‘our.height=our.height+9 
setTimeout(ourmove.100) 
} 
} 
(3) 在 页 面 的 <body> 标 签 中 ， 设 置 onload 事件 调用 自 定义 的 JavaScript 方法 ourmove()， 关 键 代码 如 下 : 
<body onload="ourmove() > 


图 秘笈 心 法 
由 于 setTimeoutO 函 数 只 能 执行 一 次 ， 因 此 在 实现 定时 调用 时 ， 需 要 将 setTimeout0 函 数 写 在 被 调用 函数 的 


687 
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函数 体内 ， 从 而 实现 定时 调用 。 


si 


实用 指数 : 食 食 食 : 
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力 实例 说 明 


在 有 些 网 站 中 ， 会 将 其 导航 条 设计 为 展开 式 导 航 条 ， 这 样 可 以 更 加 引信 注 意 。 本 实例 将 介绍 如 何 应 用 
JavaScript 中 的 setInterval0 函 数 来 实现 展开 式 导航 条 。 运 行 本 实例 ， 页 面 右 侧 的 “联系 我 们 ”导航 条 是 慢 慢 展开 
的 ， 并 且 每 次 弹出 属性 页 面 时 ， 都 会 以 同样 的 动画 效果 展开 ， 如 图 17.16 所 示 。 


17.16 ”应 用 setInterval() 函 数 实现 展开 式 导航 条 
图 关键 技术 


setInterval0) 函 数 相 当 于 JavaScript 中 的 定时 器 , 使 用 它 也 可 以 定时 执行 JavaScript 代码 或 函数 , 并 一 直 执 行 。 
setInterval() 函 数 的 语法 格式 如 下 : 


ObjectTimeID = window.setInterval(finction, time); 

参数 说 明 

@ TimeID: setInterval0 函 数 的 返回 值 ， 表 示 此 定时 器 的 唯一 标识 。 当 然 ， 也 可 以 不 必 设 置 返回 值 。 

@ function: 表示 所 调用 的 自 定义 的 JavaScript 方法 名 或 可 执行 的 JavaScript 代码 。 

@ time: 每 间隔 time 时 间 调用 一 次 指定 的 函数 或 JavaScript 代码 ， 单 位 为 毫秒 。 

当 需 要 取消 定时 器 时 ， 调 用 的 是 取消 定时 器 的 函数 clearInterval0， 该 函数 需要 根据 设置 的 setInterval0 定 时 
器 返回 值 来 取消 定时 器 ， 代 码 如 下 : 

TimeID = window.setInterval(test.1000); 

window.clearInterval(TimerID): 


图 设计 过 程 
(1) 在 网 页 中 要 显示 “联系 我 们 ”导航 条 的 位 置 ， 添 加 一 个 全 部 展开 后 的 “联系 我 们 ”导航 图 片 ， 并 将 图 片 


的 height 属性 值 设置 为 0，name 属性 值 设置 为 our。 在 需要 设置 超 链接 的 文字 上 添加 图 片 并 设置 相应 的 超 链接 。 
(2) 编写 JavaScript 方法 , 应 用 setInterval0 定 时 器 函数 定时 改变 图 片 对 象 的 高 度 值 , 实现 图 片 的 展开 效果 ， 


if(our.height<163){ 
‘our.height=our.height+9; 
和 


De 
</script> 
图 秘笈 心 法 
setTimeoutO 函 数 与 setInterval0 函 数 的 区 别 在 于 : setTimeout0 函 数 只 执行 一 次 ， 如 果 希 望 继续 执行 ， 只 能 写 
在 被 调用 函数 的 函数 体内 ;setInterval0 函 数 会 根据 指定 间隔 时 间 一 直 执 行 下 去 ， 并 且 是 自动 执行 的 ， 不 需要 手 
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动 调用 。 
实例 465 | 
实用 指数 : 食 食 食 | 
图 实例 说 明 


本 实例 通过 层 实现 下 拉 菜 单 ， 当 鼠标 经 过 导航 标题 时 ， 会 在 
下 面 以 下 拉 方 式 显示 下 拉 列 表 ， 并 可 以 通过 选择 下 拉 列 表 中 的 选 
项 进入 指定 的 网 页 ， 本 实例 的 运行 效果 如 图 17.17 所 示 。 


图 关键 技术 
本 实例 主要 应 用 CSS 样式 中 的 display 属性 来 控制 层 是 否 显 图 17.17 用 层 制作 的 下 拉 菜单 
示 ， 当 层 显 示 时 ， 用 CSS 样式 中 的 rect0 方 法 对 层 以 y 轴 和 逐渐 增 
大 的 方式 进行 局 部 显示 。rect0 方 法 用 于 检索 或 设置 对 象 的 可 视 区 域 ， 区 域外 的 部 分 是 透明 的 ， 必 须 将 position 
的 值 设 为 absolute， 此 属性 方 可 使 用 。rect0 方 法 的 语法 格式 如 下 : 
number) 


clip:autolrect(number numner number 

参数 说 明 

@ auto: 对 象 无 剪 切 。 

@ rect(number number number number): 依据 (上 一 右 一 下 一 左 ) 的 顺序 提供 自 对 象 左上 角 为 〈0.0) 坐标 计 
算 的 4 个 偏 移 数值 ， 其 中 任 一 数值 都 可 用 auto 替换 ， 即 此 边 不 剪 切 。 


图 设计 过 程 


(1) 在 页 面 中 编写 用 于 改变 下 拉 菜 单 颜 色 及 位 置 的 CSS 样式 ， 关 键 代码 如 下 : 
<style type="text/css "> 


‘border-color:white sliver sliver white: 
background:#333399: 
padding:15px 
} 
.menu A {text-decoration:none;color:#99FFFF;} 
.menu A:hover {color: #FFFFFF:} 
</style> 


(2) 在 页 面 的 表格 中 ， 添 加 用 于 显示 一 级 导航 条 的 <div> 标 签 ， 关 键 代码 如 下 : 


<td width="2096~> 
<div align="center "id="Tdiv_1" class="menubar” onmouseover="divControl(1)" onmouseout="divControl(0)"> 教 育 网 站 </div> 
<ltd> 
/由 于 代码 类 似 ， 此 处 省 略 了 其 他 导航 <div> 标 签 的 代码 
tr> 
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(3) 在 页 面 中 添加 为 一 级 导航 设置 的 二 级 导航 菜单 选项 ， 关 键 代码 如 下 : 


<t> 
<td width="2096"> 
<div align="Ileft"id="Div] " class="menu” onmouseover—"keepstyle(this)" onmouseout—"hidediv(this)"> 
<a href="#~ 重 庆 XX 大 学 </a><br> 
<a href="#> 长 春 XX 大 学 </a><br> 
<a href=#> 吉 林 XX 大 学 </a> 
</div> 


Atd> 
…/ 此 处 省 略 了 其 他 一 级 导航 下 对 应 的 二 级 导航 菜单 内 容 
</tr> 


(4) 编写 实现 下 拉 菜 单 的 JavaScript 方法 divControl0， 判 断 是 否 显示 相对 应 的 下 拉 列 表 ， 关 键 代码 如 下 : 
function divControl(show){ // 判 断 是 否 显示 相对 应 的 下 拉 列 表 
window.event.cancelBubble=true: 
le 0 


var numID=objID.substring(index+1); 
if(mainID—"Tdiv"){ 
if(show—1) 
eval("showdiv("+"Div"+numID+")"); 
el 
这 eval("hidediv("+"Div"+numID+")"): 
} 
} 
编写 自 定义 函数 displayMenu0， 用 于 在 显示 下 拉 菜 单 时 ， 以 下 拉 方 式 显 示 下 拉 菜 单 ， 关 键 代码 如 下 : 
var nbottom=0,speed=2; 
function displayMenu(ob)){ // 在 显示 下 拉 菜 单 时 ， 以 下 拉 方 式 显示 下 拉 菜 单 
obj.style.clip="rect(0 10096 "+nbottomrt"96 0)"; 
nbottom+=speed; 
if(nbottom<=100) 
timerID=setTimeout("displayMenu("+obj .id+"),1"); 
el: 
多 clearTimeout(timerID); 


} 
编写 自 定义 函数 showdiv0， 用 于 显示 下 拉 列 表 的 下 拉 选 项 ， 关 键 代码 如 下 : 
function showdiv(obj){ /显示 下 拉 列 表 

obj.style.display="block"; 

obj.style.clip="rect(0 0 0 0)"; 

nbottom=5; 

displayMenu(obj); 


} 
编写 自 定义 函数 hidediv0， 用 于 隐藏 下 拉 列 表 的 下 拉 选 项 ， 关 键 代 码 如 下 : 
function hidediv(obj){ 。“ /隐藏 下 拉 列 表 
nbottom=0; 
obj.style.display="none"; 


图 秘笈 心 法 


<div> 标 签 经 常用 于 动态 加 载 网 页 内 容 ， 而 且 经 常 使 用 JavaScript 控制 <div> 标 签 来 实现 各 种 特殊 效果 ， 如 日 
期 选择 器 以 及 Dojo 工具 包 中 的 视图 工具 集 等 。 


实例 466 移入 


实用 指数 : 信人 福 但 


图 实例 说 明 
本 实例 实现 的 是 用 层 制作 的 动态 效果 的 下 拉 菜 单 。 运 行 本 实例 ， 首 先 页 面 会 显示 “ 主 菜 单 ”， 当 鼠标 移动 到 
“ 主 菜单 ”文字 时 ， 下 面 的 菜单 项 会 逐渐 从 两 端 移动 到 中 间 ， 并 且 由 透明 状态 逐渐 变 为 不 透明 ， 运 行 结果 如 


690 


第 17 章 导航 条 的 应 用 


图 17.18 所 示 。 
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图 17.18 主 菜单 中 的 菜单 项 由 两 端 逐 渐 移动 到 中 间 
图 关键 技术 


本 实例 主要 是 应 用 CSS 样式 的 opacity 属性 控制 层 的 透明 度 ， 用 pixelLeft 属性 来 控制 层 的 横向 位 置 。 下 面 
对 opacity 属性 和 pixelLeft 属性 进行 详细 说 明 。 

口 ”opacity: 表示 对 象 的 透明 度 。 取 值 范围 在 0 一 100 之 间 ，0 表示 完全 透明 ，100 表示 完全 不 透明 。 

口 pixelLeft: 用 于 改变 层 的 水 平 位 置 。 只 有 在 position 属性 设置 为 absolute 时 ， 该 属性 才 有 效 。 


图 设计 过 程 


(1) 创建 index.htm 页 ， 在 页 面 中 预先 添加 表示 导航 菜单 的 层 ， 用 来 显示 下 拉 菜 单 中 的 各 个 选项 ， 关 键 代 
码 如 下 : 
<div align=center id="menu01" class="menusStyle” onmouseover='stopTim();moveIn()' onmouseout='runTim()'> 
<font color=white> 主 菜单 </font></div> 
<div align=center id="div1" class="divStyle" style="left: 50px; top:55px;z-index:2; padding-top:4;" 
onmouseover="this.style.backgroundColor= #006699';stopTimO" 
onmouseout="this.style.backgroundColor= #00CC66';runTim0"> 首 页 </div> 
<div align=center id="div2" class="divStyle" style="left:250px; top: 77px; z-index:3; padding-top:3;" 
onmouseover="this.style.backgroundColor= #006699';stopTimO" 
‘onmouseout="this.style.backgroundColor= #00CC66';runTim0"> 公 司 简 介 </div> 
<div align=center id="div3" class="divStyle" style="left: 50px; top:99px; z-index:4; padding-top:3;" 
onmouseover="this.style.backgroundColor= #006699’;stopTimO" 
‘onmouseout="this.style.backgroundColor= #00CC66':runTim0"> 产 品 介绍 </div> 
<div align=center id="div4" class="divStyle" style="left:250px; top:121px; z-index:5;padding-top:3;" 
onmouseover="this.style.backgroundColor= #006699':stopTimO" 
onmouseout="this.style.backgroundColor= #00CC66':runTim(0"> 技 术 支 持 </div> 
…"/ 此 处 省 略 了 其 他 菜单 项 的 <div> 标 签 代码 


(2) 编写 用 于 实现 下 拉 菜 单 的 JavaScript 代码 。 编 写 自 定义 函数 runTim0， 用 于 在 鼠标 指向 主 菜单 时 显示 
菜单 项 ， dA 


function runTimO{ 
window.Timer = setTimeout(‘moveOutO'.300); 


编写 自 定义 函数 stopTim()， 用 于 在 鼠标 移出 主 菜单 时 隐藏 菜单 项 ， 关 键 代码 如 下 : 
function stopTimO{ 
clearTimeout(window. Timer): 


} 
编写 自 定义 函数 moveIn0， 将 菜单 项 以 奇数 的 形式 从 左右 两 边 向 中 间 移 动 ， 并 使 各 菜单 项 的 透明 度 不 断 加 
大 ， 关 键 代码 如 下 : 
function moveInO{ 
if(lefLine!=150) { 

divl.style.pixelLeft += 20: div1 filters.alpha.opacity += 20: 

div2.style.pixelLeft = 20: div2.filters.alpha.opacity + 一 20: 

div3.style.pixelLeft += 20: div3.filters.alpha.opacity += 20: 
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div4 style pixelLeft = 20: div4 filters.alpha.opacity + 一 20: 
div5 stylepixelLeft += 20; div5 filters alpha.opacity += 20: 
div6.stylepixelLeft -= 20; div6 filters alpha opacity + 一 20: 
div7.style.pixelLeft += 20; div7 .filters alpha.opacity += 20; 
div8.style.pixelLeft -= 20; div8 filters.alpha.opacity += 20; 
div9.style.pixelLeft += 20; div9 filters.alpha.opacity += 20: 
div10.style.pixelLeft -= 20; div10.filters.alpha.opacity += 20; 
leftLine += 20; 


timerIn=window.setTimeout('moveIn()',1); 


} 
编写 自 定义 函数 moveOut0, 将 菜单 项 以 奇数 的 形式 从 中 间 向 左右 两 边 移动 , 并 使 各 菜单 项 的 透明 度 不 断 减 
小 ， 关 键 代 码 如 下 : 


function moveOutO{ 
clearTimeout(window.timIn): 
证 (leftLine!= 50){ 
divl style pixelLeft -= 20; divl .filters alpha.opacity -= 20; 
div2.style pixelLeft += 20; div2 filters alpha.opacity -= 20; 
div3.style.pixelLeft -= 20; div3.filters.alpha.opacity -= 20; 
div4.stylepixelLeft += 20; div4.filters.alpha.opacity -= 20; 
div5.style.pixelLeft -= 20; div5 .filters.alpha.opacity -= 20; 
div6.style pixelLeft += 20; div6 filters.alpha.opacity -= 20; 
div7.style pixelLeft -= 20; div7 .filters.alpha.opacity -= 20; 
div8.style.pixelLeft += 20; div8 .filters.alpha.opacity -= 20; 
div9.style.pixelLeft -= 20; div9 filters.alpha.opacity -= 20; 
div10.style.pixelLeft += 20; div10.filters.alpha.opacity -= 20; 
leftLine -= 20; 
} 
else{ 
clearTimeout(window.timOut); 
return false; 


} 
timerOut=window.setTimeout("moveOutO".1); 


图 秘笈 心 法 
本 实例 实现 菜单 项 从 两 侧 逐渐 向 中 间 移 动 时 ， 主 要 是 应 用 了 JavaScript 中 的 setTimeoutO 函 数 ， 间 隔 一 段 时 
间 就 修改 一 次 opacity 和 pixelLeft 属性 值 ， 从 而 实现 预期 效果 。 


17.3” 侧 导航 条 设计 


在 网 站 设计 时 ， 有 时 为 了 体现 页 面 的 整体 效果 ， 可 以 将 网 站 导航 条 放置 在 侧面 。 本 节 将 介绍 几 个 不 同样 式 
的 侧 导航 条 的 实例 。 


初级 


实例 467 | 
实例 实用 指数 : 食 傅 食 ; 


图 实例 说 明 
在 网 站 中 不 仅 可 以 设置 导航 条 ， 而 且 还 可 以 设置 导航 菜单 。 由 于 菜单 内 容 比 较 多 ， 同 一 页 面 显示 比较 杂乱 ， 
所 以 很 多 设计 者 都 采用 收缩 式 的 菜单 形式 。 运 行 本 实例 ， 单 击 “ 网 站 管理 ” 超 链接 时 ， 页 面 将 展开 “网 站 管理 ” 
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的 子 菜 单 ， 再 次 单 击 “ 网 站 管理 ” 超 链 接 时 ， 展 开 的 导航 菜单 将 收缩 为 初始 状态 ， 如 图 17.19 所 示 。 


网 站 管理 
信息 管理 
景点 管理 
房间 管理 
订单 管理 
订单 管理 


已 确认 订单 


回复 管理 
反 庙 管 理 9 


17.19 ”收缩 式 导航 菜单 


图 关键 技术 


本 实例 主要 是 应 用 JavaScript 控制 显示 和 隐藏 表格 的 功能 ， 实 现 收缩 式 导 航 菜单 的 功能 。 单 击 导航 超 链接 ， 
显示 当前 菜单 的 内 容 ， 隐 藏 上 一 个 显示 的 菜单 ， 在 隐藏 菜单 时 ， 让 其 有 规律 地 隐藏 ， 从 而 实现 展开 或 收缩 的 动 
画 效 果 。 


图 设计 过 程 
(1) 创建 indexjsp 页 ， 在 页 面 中 添加 一 级 导航 菜单 项 以 及 二 级 导航 菜单 ， 关 键 代码 如 下 : 


<tr style="CURSOR: hand"> 
<td class="list title” id="list1" onmouseover="this.typename="list_title2';"” onclick="change(menu1,50.,list1);" 
onmouseout="this.typename='list_title':” background="images/title_ show.gif” height="25"> 
<span> 网 站 管理 </span> 
</td> 
<tr> 
<t> 


<td align="center" valign="middle"> 
<div class=sec_menu id=menu! style="DISPLAY: none; width: 158px; height: Opx"> 
<table cellSpacing="0" cellPadding="0" width="152" align="center” background="images/bg.gif” style="padding-left: 5px"> 
<tr><td height=”25"><a href=#" target="BoardList”> 更 改 初始 信息 </a></td></tr> 
<tr><td height=”25"><a hre 仁 #" target="BoardList”> 查 看 服务 器 信息 </a></td></tr> 
</table> 
</div></td> 


<tr> 
…/ 此 处 省 略 了 其 他 一 级 菜单 以 及 二 级 菜单 的 内 容 
(2) 编写 展开 菜单 项 的 自 定义 JavaScript 方法 show0， 关 键 代码 如 下 : 
function show(obj,maxg,obj2){ 
if(obj.style.pixelHeight<maxg){ 
obj.style.pixelHeight+=maxg/10; 
obj2.background="images/title_hide.gif': /改变 菜单 标题 的 背景 
if(obj.style.pixelHeight—maxg/10){ 
obj.style.display="block’; /设置 指定 菜单 项 显示 
四 
myObj=obj: 
mymaxg=maxg; 
myObj2=obj2: 
setTimeout(show(myObj.mymaxg.myObj2) "59: /每 隔 一 段 时 间 调用 一 次 show0 函 数 ， 用 于 实现 渐渐 展开 效果 
} 
} 
(3) 编写 收缩 菜单 项 的 自 定义 方法 hide0， 关 键 代码 如 下 : 
function hide(obj,maxg,0bj2){ 
if(obi.style pixelHeight>0){ 
if(obi.style pixelHeight—maxg/s){ 
obj.style.display='none’; /设置 指定 菜单 项 隐藏 
} 
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obj.style pixelHeight-=maxg/5; 

obj2.background="images/title_ show.gif"; /改变 菜单 标题 的 背景 

myObj=obj: 

mymaxg-maxg 

myObj2=obj2; 

setTimeout(hide(myObjmymaxgmyObj2) 57 // 每 隔 一 段 时 间 调用 一 次 hide0 函 数 ， 用 于 实现 渐渐 收缩 效果 
jelseifwhichContinue)f 

whichContinue clickO: 
} 


} 

(4) 编写 自 定义 方法 change0， 实 现 当 单 击 菜单 标题 时 ， 隐 藏 前 一 个 展开 的 菜单 项 ， 显 示 当 前 菜单 项 ， 关 
键 代码 如 下 : 

function change(obj.maxg,obj2){ 


if(obj.style.pixelHeight) { 
hide(obj.maxg,obj2); /收缩 菜单 项 


}else if(nopen){ /收缩 已 经 展开 的 菜单 项 


show(obj.maxg.obj2): /展开 菜单 项 
nopen=0bj2; 
whichContinue="; 
} 
} 


图 秘笈 心 法 


本 实例 主要 是 在 JavaScript 中 , 修改 二 级 菜单 <div> 标 签 style 样式 的 pixelHeight 属性 值 来 实现 菜单 的 收缩 与 
展开 效果 。 


去 高 级 
实例 468 实用 指数 : 让 坦 丰 | 
图 实例 说 明 


对 于 一 个 导航 文字 很 多 ， 并 且 可 以 对 导航 内 容 进行 分 类 的 网 站 来 说 ， 可 以 将 
页 面 中 的 导航 文字 以 树 状 图 的 形式 显示 。 树 状 图 的 导航 菜单 在 实际 开发 应 用 中 非 
常 多 ， 应 用 它 可 以 方便 用 户 查看 。 运 行 本 实例 ， 单 击 节点 名 称 前 的 加 号 “+” 可 以 
展开 指定 的 节点 ， 单 击 减 号 “-” 可 以 收缩 子 节点 ， 如 图 17.20 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 JavaScript 控 制 表 格 行 的 <tr> 标 签 的 显示 或 隐藏 来 实现 节点 
的 显示 和 隐藏 。 控 制 <tr> 标 签 的 显示 和 隐藏 ， 主 要 是 在 JavaScript 中 控制 <tr> 标 签 


阁 手 机 区 


对 象 的 display 属性 来 实现 的 。display 属性 前 面 已 经 介绍 过 ， 所 以 此 处 不 再 次 述 。 四 多 及 必 由 


TI 教 码 


图 设计 过 程 
(1) 利用 JavaScript 定义 一 个 函数 ShowTRO, 用 于 显示 或 隐藏 表格 中 指定 行 


的 内 容 ， 关 键 代 码 如 下 : 
function ShowTR(objImg.objTD{ 


17.20 ” 树 状 导 航 菜单 


if(obj Tr.style.display 一 ""){ 1/ 折 又 展开 的 节点 
objTrstyle.display = "none": 
‘objImg.src = "images/jia.gif': /改变 图 标 
objImg.alt = "展开 ": // 设 置 工具 提示 为 “展开 ” 


} 
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/展开 折叠 的 节点 
objTr.style.display = "": 
objImg.src = "imagesjjian_gif': /改变 图 标 
objImg.alt =" 折 受 "; 1/ 设置 工具 提示 为 “ 折 到 ” 


(2) 为 了 实现 在 默认 情况 下 第 一 个 节点 为 展开 状态 ， 可 以 在 该 函数 后 面 加 入 以 下 代码 ， 用 于 当 第 一 个 节点 
包括 子 节点 时 ， 设 置 第 一 个 节点 为 展开 状态 ， 关 键 代 码 如 下 : 
<96 
if(m>1) /设置 第 一 个 节点 为 展开 状态 


%> 


out.printin("<script language=javascript>ShowTR(img1,OpenRep1) // 设 置 第 一 个 节点 为 展开 状态 </script>"); 


(3) 从 视图 V_Type 中 查询 商品 的 分 类 信息 ， 关 键 代 码 如 下 : 
< 


ConnDB conn=new ConnDBO; 
ResultSet rs_superType=conn.executeQuery("select ID.,superType from V_Type group by ID.superType order by superType desc"); 


%> 


(4) 循环 显示 商品 分 类 信息 ， 并 查询 各 分 类 中 所 包括 的 子 类 名 称 ， 如 果 该 分 类 有 相对 应 的 子 类 ， 则 在 节点 


前 显示 加 号 “+”， 


调用 自 定义 的 JavaScript 函数 showTRO， 实 现 节 
<table width="10096" height="40” border="0" cellpadding=" 


<% 


否则 显示 减 号 “-”。 注 意 :需要 为 每 个 包含 子 节点 的 节点 设置 超 链接 ， 该 超 链接 执行 操作 时 
4 展开 与 折 登 。 关 键 代码 如 下 : 
cellspacine="0"> 


int ID_superType=0; 

String superType=""; 

int m=1; 
while(rs_superType.nextO){ 


ID_super Type=rs_superType.getInt(1); 
superType=rs_superType.getString(2); 

String sql="select * from V_Type where ID="+ID superType; 
ResultSet rs_subType=conn.executeQuery(sql); 

String subType=""; 

int subID=0: 

/获取 记录 总 数 

rs_subType.lastO; 

int subType_RC=rs_subType.getRowO; 

rs_subType.firstO; 


%> 
<t> 


<%if(subType_RC<=0){%> 
<img src="images/ian_null.gif” width="38" height="16" border="0"> 
<%=superType%> 
<%}else{%> 
<a href="Javascript:ShowTR(img<%=m96>, OpenRep<%=m96>)"> 
<img src="images/jia.gif” border="0" alt=" 展 Fr" id="img<%=m%> "> 
</a> 
<a href="Javascript:ShowTR(img<%=m%>, OpenRep<%=m%>)"><%=super Type%></a> 
<%6}96> 


</td> 
<%%if (subType_RC>0){%> 
<tr id="OpenRep<%=m%>" style="display:none; "> 


<td colspan="6"> 
<%do{ 
subType=rs_subType.getString(3); 
subID=rs_subType.getInt(4); 
%> 
<table width="10096” border="0" cellspacing="-2" cellpadding="-2”> 
<t> 
<td height="25" align="center "> 
<table width="9096” border="0" cellspacing="0" cellpadding="0"> 
<tr onMouseOver="this.style.background=#EEEEEE”™ 
onMouseOut="this.style background= "> 
<td width="159%">&nbsp:</td> 
<td width="1096" align="center”> 
<img src="images/folder. gif” width="16" height="16" border="0"> 
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<htd> 
<td width="7596"><a href=#"><9%=subType%></a></td> 


</table> 


}while(rs_subType.nextO); 


</table> 


图 秘笈 心 法 
HTML 元 素 中 的 <table>、<t>、<td>、<img>、<form>、<imput> 和 <button> 等 标签 都 具有 display 属性 ， 读 
者 可 以 根据 实际 情况 进行 设置 。 


高 级 


实例 469 | 
实例 实用 指数 : 全食 食 | 


图 实例 说 明 


自动 隐藏 式 菜单 简洁 易 用 ， 在 不 使 用 时 能 自动 隐藏 ， 使 页 面 更 具有 


灵活 性 ， 为 网 页 增添 了 不 少 亮丽 的 光彩 。 运 行 本 实例 ， 在 网 页 的 左 端 显 se || | 
示 一 个 自动 隐藏 的 弹出 式 菜单 ， 当 鼠标 移动 到 菜单 标题 上 时 ， 将 自动 弹 新 车 | 革 | 
出 导航 菜单 ， 单 击 其 中 的 菜单 项 ， 将 进入 相应 的 网 页 链接 地 址 ， 当 鼠标 Bi 
移出 菜单 时 ， 导 航 菜单 将 自动 隐藏 ， 如 图 17.21 所 示 。 其 发布 
关键 技术 i 
本 实例 主要 利用 JavaScript 来 控制 <div> 层 的 显示 和 隐藏 。 当 鼠标 经 Ei 
过 <div> 层 时 会 触发 onMouseOver 事件 ， 然 后 在 JavaScript 中 设置 <div> [dd 
的 display 属性 值 为 block (显示 层 )， 当 鼠标 移出 <div> 层 时 触发 
onMouseOut 事件 ， 设 置 display 属性 值 为 none( 隐 茂 层 ) 即 可 。 4 
| 设计 过 程 图 17.21 自动 隐藏 的 弹出 式 菜单 


(1) 创建 indexjsp 页 ， 在 页 面 中 编写 用 于 显示 导航 菜单 的 <div> 标 签 ， 在 该 标签 中 添加 一 个 表格 ， 然 后 用 
JavaScript 代码 向 表格 中 添加 每 个 菜单 项 ， 关 键 代 码 如 下 : 
<div style="position:absolute; float:left; z-index:100;top: 149px; “onMouseOver="mouseover('menu')" onMouseOut= "mouseout(menu)"> 
<div id="menu" style="float:left: text-align:center: width:70px: height:302px: padding-top:5px; display:none;background-image:url(images/menu_ 
bg-gD'> 


<table border="0" cellpadding="0" cellspacing="1" bgcolor="#666666" style="padding: 5px; "> 
<script language="JavaScript”> 
var sitems=[" 图 书 介绍 "" 新 书 预告 "." 图 书 销售 "." 勘 误 发 布 "." 资 料 下 载 "." 好 书 推荐 "." 技 术 支持 "." 联 系 我 们 "];// 菜 单 名 称 
Var sitemlinks=new Array(): /| 链接 地 址 
for(var i=0;i<8:iHH){ 
sitemlinks[i]="http://www.mingrisoft.com"; 
} 
for (i=0:i<sitems.length:i++){ // 通 过 循环 添加 各 菜单 项 
证 (document.alD) { 


document write(<tr><td © bgcolor\#EBFAFF\ style-Vcursorhand:\ onclick="window.location href-=\"+sitemlinks[ij+\" 
onmouseover="this.bgColor=\#FFFDCD\" onmouseout="this.bgColor=\#EBFAFF\">"+sitems[i]+"</td></tr>"): 
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jelseif(documentlayersjf 
write(<tr><td bgcolor—"white"><a href-"+sitemlinks[i]+">"+sitems[i]+"</a></td></tr>"); 
上 
| 
</script> 
</table> 
Adiv> 
<div> 
(2) 编写 自 定义 JavaScript 方法 mouseover0， 用 于 在 鼠标 经 过 时 显示 导航 菜单 ， 关 键 代 码 如 下 : 
function mouseover(divId) { 
document.getElementById(divId).style.display="block": // 显 示 菜单 
了 
(3) 编写 自 定 义 的 JavaScript 方法 mouseout()， 用 于 在 鼠标 移出 时 隐藏 导航 菜单 ， 关 键 代码 如 下 : 
function mouseout(divId){ 
document.getElementById(divId).style.display="none"; /隐藏 菜单 
} 


国 秘笈 心 法 


本 实例 是 应 用 JavaScript 添加 导航 菜单 的 每 一 个 菜单 项 。 在 JavaScript 中 ， 应 用 循环 数组 来 动态 添加 多 个 菜 
单项 ， 而 不 必 在 网 页 中 添加 大 量 导航 内 容 的 HTML 代码 ， 从 而 减少 了 HTML 代码 占用 的 行 数 。 
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文本 框 /编辑 框 /隐藏 域 组 件 
下 拉 列 表 与 菜单 的 应 用 
单 选 按钮 

复 选 杠 

密码 域 

表单 的 应 用 


第 18 章 表单 的 应 用 


18.1 文本 框 /编辑 框 /隐藏 域 组 件 


a 1 
实例 470 | 
实例 实用 指数 友 友 友 


国 实例 说 明 
用 户 在 浏览 网 页 时 ， 经 常 需 要 填写 动态 表单 。 例 如 ， 在 互联 网 上 发 表 自 己 的 文章 时 ， 需 要 填写 作者 名 称 、 
文章 标题 以 及 文章 内 容 。 当 用 户 提交 表单 时 ， 程 序 需要 获取 表单 内 容 ， 并 对 表单 内 容 进 行 验证 或 存储 。 本 实例 
将 介绍 如 何 获取 表单 中 的 文本 框 、 编 辑 框 以 及 隐藏 域 的 值 ， 程 序 运行 结果 如 图 18.1 所 示 。 
从 示 取 文本 想 | 纺 强硬 | 光环 域 的 值 - Windows Internet Explorer 一 | 回 | 2 
Os httpi//localhost *| B[ ++ |X | P sing Pr- 
请 km 夹 | 次 急 ] 建 议 网 站 > 人 纺 ] 网 页 快讯 库 ~ 


贴 子 内 容 : 明日 科技 ! 
回复 成 功 ! 


图 18.1 获取 到 的 文本 杠 、 编辑 框 、 隐 藏 域 的 值 


图 关键 技术 
本 实例 应 用 的 是 JavaScript 脚本 的 document 对 象 从 客户 端 获 取 相应 的 信息 ， 再 调用 windows 对 象 的 alert0 
方法 输出 动态 显示 获取 的 信息 。 如 表 18.1 所 示 为 document 对 象 常用 的 属性 和 方法 。 


表 18.1 document 对 象 常用 的 属性 和 方法 


表示 文档 中 所 有 表单 元 素 的 数组 ，[] 内 为 索引 值 指向 数组 
表示 使 用 <img> 标 记 插 入 到 文档 中 的 图 像 数 组 

表示 获取 网 页 的 标题 文本 

指定 字符 串 ， 写 入 到 一 个 或 多 个 jsp 表达 式 中 
在 输出 参数 之 后 附加 一 个 换行 符 


document.forms[] 


document.images[] 


document.title 


document.writel 


document.writeln! 


图 设计 过 程 
(1) 创建 index.jsp 文件 ， 在 页 面 编 写 回 复 表单 的 相关 元 素 和 隐藏 域 ， 关 键 代 码 如 下 : 
<body style="font-size:12px"> 
<table width="5096” border="0" align="center" cellpadding="0" cellspacing="0"> 
<t> 


<td align="efi" valign="top"><table width="9596” border="0" align="center”" cellpadding="0" cellspacing="0"> 
<t> 
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<tdheight="22"align="center> 回 复 帖子 </td> 
</tr> 
</table> 
<br> 
<table width="500" border="0" align="center” cellpadding="0" cellspacing="0" bgcolor="#d3d3d3"> 
<form name="form1" onSubmit="Mycheck()”> 
<t> 
<tdheight="28" align"ight”> 发 帖 名 称 :</td> 
<td height="28"><input name=" 发 府 霉 "type="tert" class="textbox" id=-" 发 府 者 ></td> 
<ltr> 
<t> 
<td height="28" align=ight> 发 帖 标题 :</td> 
<td height="28"><input name=" 发 裔 挛 六 "type="text" id=" 发 币 记 六 "class="textbox"></td> 
<t> 
<t> 
<td height="22"align=18jt 人 > 帖子 内 容 :</td> 
<td height="22 心 <textarea name=" 府 子 座 敌 " cols="4j"rows="6"id=" 内 天 内 从 "></textarea></td> 
<ltr> 
<u> 
<td height="28" colspan="2" align="center"><input name=" 雇 万 械 " type="hidden" id=" 态 岁 既 "value=" 避 复 成 区 1"> 
<input name="add" type="submit” class="button" id="add” value=" 右 起 > 
&nbsp; 
<input type= eset" name="Submit2" value=" 苗 稻 " class="button"></td> 
</t> 


</table> 


(2) 利用 JavaScript 获取 编辑 框 、 文 本 框 ， 以 及 文本 域 和 隐藏 域 的 值 ， 关 键 代 码 如 下 : 
<script type="text/javascript"> 
function MycheckO{ 
Var checkstr=" 获 取 内 容 如 下 :\n"; 
这 (document,forml. 发 帖 者 .value != ""){ 
checkstr+=" 发 帖 者 :"+document.form1l. 发 帖 者 .valuet"\n"; 


} 
这 (document.form1l. 发 帖 标题 .value !=""){ 
checkstr+=" 发 帖 标题 :"tdocument.form1l. 发 帖 标题 .valuet"\n"; 


} 
这 (document.forml. 帖 子 内 容 .value !=""){ 


checkstr+=" 帖 子 内 容 :"+document.form1. 帖 子 内 容 .valuet"\n"; 


} 
并 (document.forml. 隐 藏 域 .value !="){ 
checkstr+=document.forml. 隐 藏 域 .value; 


} 
证 (checkstr (= ""){ 
alert(checkstr); 
Teturn false: 
} 
else return 
Tetum true; 
} 
</script> 


图 秘笈 心 法 
对 象 的 一 个 最 重要 的 特性 是 write0 方 法 ， 应 用 它 可 以 从 JavaScript 程序 中 动态 生成 网 页 内 容 。 


实例 471 


图 实例 说 明 
在 实际 项 目 开发 中 , 为 了 快速 开发 程序 并 保证 计算 的 准确 性 ,可 以 利用 JavaScript 脚本 实现 自动 预算 。 运 行 
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本 实例 ， 在 表单 中 填写 “保险 金额 "、“ 保 险 日 期 ”和 “保险 年 限 ” 后 会 自动 计算 用 户 如 果 违 约 应 赔偿 的 金额 ， 
也 就 是 “违约 金 ” 如 图 18.2 所 示 。 


站 Sat 各 和 - Wndows ntemet Epolorr (5 
GO /en -lelolx)P ow 
EEC | 
立 愉 辐 ERHSES 大 
保险 合同 金额 预算 
保险 金额 200000 
保险 日 期 : 2010-320 
保险 年 恨 10 年 
违约 金 20000 
EL EEELS 
国 miemet| 人 异世 启用 而” 起 00% 


18.2 自动 预算 
图 关键 技术 


本 实例 主要 是 应 用 JavaScript 的 document 对 象 来 获取 文本 框 和 隐藏 域 的 值 而 进行 计算 的 ， 计 算出 结果 的 数 


值 赋值 给 相应 的 文本 框 ， 在 文本 框 中 立即 就 能 显示 出 违约 金额 。 
图 设计 过 程 
(1) 自 定义 JavaScript 函数 ， 首 先 获取 用 户 在 文本 框 中 的 值 ， 根 据 保险 年 限 和 隐藏 域 value 属性 的 值 相 乘 
计算 出 违约 金 ， 关 键 代码 如 下 : 
<script type="text/javascript"> 
function autocountO{ 
Yar amount.price,money: 
amount=document.forml .txt_year.value; 
Price=document.form!l .txt_by.value; 
mone; t*price; 
document.form]l .txt_bail.value=money: 
} 
‘</script> 
(2) 在 页 面 的 保险 年 限 使 用 onBlur0 事 件 中 调用 自 定义 的 JavaScript 函数 autocount0， 关 键 代 码 如 下 : 
<body style="font-size:12px"> 
<form name="form1"> 
<div align="center” style="font-size: large" > 保险 合同 金额 预算 </div> 
<table align="center" bgcolor="d3d3d3"> 
<t> 
<td height="22" align=”ight 吃 保险 金额 :</td> 
<td height="22" align="Ieft"><input name="hxt_money” type="text” id="xt_money2"></td> 
</t> 
<t> 
<td height="22"align="ight 吃 保险 日 期 :</td> 
<td height="22" align="Ieft"><input name=—"hxt_date” type="text” id="ixt_date"></td> 
</r> 
<t> 
<td height="22"align="ight 吃 保险 年 限 :</td> 
<td height="22" align="Ieft"><input name="txt_year” type="text” id="hxt_year”" size="10" onBlur="autocount) "> 


<input name="fxt_by" type="hidden" id="txt_by” value="2000"></td> 
</t> 
<t> 
<td height="22” align="ight"> 违 约 金 :</td> 
<td height="22" align="Ieft"><input name="txt_bail” type="text” id="kxt_bail” readonly="true"></td> 
</t> 
<t> 
<td height="32" align=—"7ight">é&nbsp:</td> 
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<tdheight=-"22"align="efi"colspan="2 必 <input type="submzit"name="Supmit3"value=" 侨 三 全 局 "~ 
<input type="reset” name="Submit4" value=" 生 新 硕 利 "></td> 
</> 


</table> 
</form> 


图 秘笈 心 法 


本 实例 用 到 了 onBlur 事件 ， 它 表示 在 文本 框 失 去 焦点 时 触发 的 事件 。 


初级 
实用 指数 ， 良友 友 


实例 472 


图 实例 说 明 

网 页 中 有 一 部 分 信息 是 不 允许 浏览 者 进行 任何 修改 的 , 即 用 户 只 0 
有 浏览 的 权限 ， 而 没有 修改 的 权限 。 这 可 以 通过 将 文本 字段 设置 为 只 乔丹 运动 装 商品 后 台 资 料 
读 必 性 来 实现 。 运行 本 实例 ,将 鼠标 或 键盘 放 在 “商品 名 称 ”处 就 会 Be 
弹出 提示 信息 ， 如 图 18.3 所 示 。 | 


来 自 网 页 的 消息 时 


| | 关键 技术 人 两 家 名 称 文本 框 为 只 读 属性 ! 
实现 本 实例 首先 需要 将 文本 字段 设置 为 只 读 属性 , 然后 通过 设置 
文本 字段 的 单 击 事件 来 实现 当 用 户 单 击 已 经 设置 为 只 读 属性 的 文本 
字段 时 ， 弹 出 一 个 提示 对 话 框 ， 提 示 用 户 不 能 进行 修改 。 
将 文本 字段 设置 为 只 读 属性 有 两 种 方法 , 一 种 是 应 用 文本 字段 的 图 18.3 设置 文本 框 为 只 读 属 性 
readonly 属性 实现 ， 另 一 种 是 应 用 文本 字段 的 disabled 属性 实现 。 
图 设计 过 程 


(1) 创建 main.jsp 页 面 文件 ， 在 “商品 名 称 ” 的 <input> 标 记 中 设置 文本 框 的 readonly 属性 值 为 tue， 并 在 
onKeyDown 事件 和 onMouseup 事件 中 调用 自 定 义 的 JavaScript 函数 Mycheck0， 关 键 代 码 如 下 : 
<Td> 


商品 名 称 : 
<Td> 


<td> 
<input type="text" name="mname" id="mname" value=" 承 籽 2010 二 动产 " 
Teadonly="hue”" onKeyDown="MycheckQ" onMouseup="MycheckO" /> 
<td> 
<Tr> 


{ 
if (document.forml.mname.readOnly){ 
alert(" 商 家 名 称 文本 框 为 只 读 属 性 !"):return false; 
else return 


return true: 
Se 
图 秘笈 心 法 
文本 框 的 readonly 属性 和 disabled 属性 很 相似 , 都 用 于 禁止 修改 文本 框 的 内 容 。 但 它们 是 有 区 别 的 , readonly 
属性 只 对 文本 框 和 文本 域 有 效 ; 而 disabled 属性 是 对 表单 的 所 有 元 素 有 效 ， 并 且 在 提交 表单 时 ， 设 置 为 disabled 
属性 的 表单 元 素 在 提交 后 无 法 获取 到 值 ， 而 设置 为 readonly 的 表单 元 素 是 可 以 获取 到 值 的 。 
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实例 473 


实用 指数 : 但 广 食 
国 实例 说 明 

在 网 站 的 论坛 或 留言 簿 中 ， 通 常 都 是 在 多 行文 本 域 中 输入 留言 的 内 容 ， 而 多 行文 本 域 不 具备 限制 用 户 输入 
最 多 字符 个 数 的 功能 ， 因 此 要 想 控制 多 行文 本 域 输入 的 字符 个 数 ， 必 须 由 程序 员 自己 编写 代码 。 运 行 本 实例 ， 
当 用 户 输入 的 字符 超过 限制 的 字符 个 数 时 ， 则 弹出 提示 信息 对 话 框 ， 如 图 18.4 所 示 。 


发 表 看 : 菜鸟 之 路 


18.4 限制 多 行文 本 域 输入 的 字符 个 数 
图 关键 技术 


实现 限制 多 行文 本 域 输入 的 字符 个 数 的 功能 ， 关 键 是 在 其 onKeyDown 事件 和 onKeyUp 事件 中 调用 自 定义 
的 JavaScript 函数 CountStrByte0 来 限制 输入 的 最 多 字符 数 并 计算 已 输入 字 节 数 与 剩余 字 节 数 。 下 面 介绍 
onKeyDown 事件 和 onKeyUp 事件 。 

口 onKeyDown 事件 : 访问 者 按 下 键盘 上 一 个 或 几 个 键 的 事件 。 

口 onKeyUp 事件 访问 者 按 下 键盘 上 一 个 或 几 个 键 后 释放 的 事件 。 


图 设计 过 程 
(1) 首先 创建 index.jsp 页 面 ， 在 文本 域 <textarea> 标 记 的 onKeyDown 事件 和 onKeyUp 事件 中 分 别 调用 自 


定义 JavaScript 脚本 函数 CountStrByte0， 关 键 代码 如 下 : 
<tdheight="22"align= "ef> 
<textarea name=" 序 论 认 千 " cols="45"rows="5"id=" 评 座 认 其" 
onKeyDown="CountStrByte(this form 评论 内 容 .this.form .totalthis.form.used.this form remain):" 
onKeyUp=CountStrByte(this.fomm .评论 内 容 . this.form total, this.form.used. 
this.form.remain);;></textarea> 


<input name="total” type="text” disabled class="textbox” 
id="total” value="100" size="3"> 
个 字 节 已 用 字 节 : 
<input name="used" type="text” disabled class="textbox” 
id="Wsed" value="0" size="3"> 
剩余 字 节 : 
<input name="remain" type="text" disabled class="textbpox” 
id="remain”" value="100" size="3"> 
</td> 
(2) 自 定义 JavaScript 函数 ,此 函数 首先 是 使 用 寺 …else 条 件 判 断 语句 和 for 循环 语句 判断 文本 域 输入 的 字 
符 个 数 是 否 超过 允许 的 最 多 字符 个 数 ， 如 果 输入 的 字符 个 数 超过 允许 字符 限制 ， 则 使 用 alert0 方 法 弹出 一 个 提 


示 对 话 框 ， 并 立即 退出 循环 ， 关 键 代 码 如 下 : 


Java Web 开发 实例 大 全 (基础 卷 ) 


<SCRIPT language=JavaScript> 
区 大 
var LastCount =0; 
function CountStrByte(Message, Total.Used.Remain){ // 字 节 统 计 
var ByteCount = 0; 
Var StrValue = Message.value; 
var StrLength = Message value length: 
var MaxValue = Total value: 


if(LastCount != StrLength) { /在 此 判断 ， 减 少 循环 次 数 
for (=0:i<StrLength:it+){ 
ByteCount = (StrValue.charCodeAt()<=256) ? ByteCount + 1 : ByteCount + 2; 
if (ByteCount>MaxValue) { 
Message value = StrValue.substring(0.i); 
alert(" 评 论 内 容 最 多 不 能 超过 “" HMaxValue+ " 个 字 节 ! \n 注意 ;一 个 汉字 为 两 个 字 节 。"); 
ByteCount = Max Value; 
break; 


Used.value = ByteCount; 
Remain.value = MaxValue - ByteCount: 
LastCount = StrLength; 

} 


} 
/> 


</SCRIPT> 
图 秘笈 心 法 

在 计算 字符 数 时 ， 需 要 判断 输入 的 字符 是 汉字 还 是 英文 字母 或 数字 ， 因 为 一 个 汉字 占 两 个 字 节 。 另 外 
onKeyDown 事件 和 onKeyUp 事件 只 适合 于 Internet Explorer 4.0 及 4.0 以 上 浏览 器 。 


实例 474 Ze 
实用 指数 : 食 食 食 
图 实例 说 明 


在 实际 开发 中 ， 经 常 要 对 大 量 的 文字 信息 进行 编辑 ， 尤 其 是 更 新 网 页 信息 时 ， 为 了 节省 对 文字 编辑 的 时 间 
或 者 引起 用 户 的 注意 ， 可 以 自动 选择 编辑 区 域内 的 文字 内 容 ， 以 方便 用 户 进行 操作 。 运 行 本 实例 ， 当 单 击 文本 
框 或 编辑 框 〈 即 文本 框 或 编辑 获得 焦点 ) 时 ， 文 本 框 和 编辑 框 中 的 内 容 将 自动 全 部 选中 ， 如 图 18.5 所 示 。 


EE 本 


图 18.5 自动 获取 文本 框 和 编辑 框 中 的 内 容 


图 关键 技术 


实现 本 实例 ， 首 先 在 自 定义 的 JavaScript 函数 中 ， 通 过 document 对 象 获 取 文 本 框 和 编辑 框 对 象 ， 然 后 应 用 
其 focus0 函 数 判断 文本 框 或 编辑 框 是 否 获得 焦点 ， 如 果 已 经 获得 焦点 ， 则 调用 其 select0 属 性 即 可 实现 文字 的 先 
中 状态 。 


图 设计 过 程 
(1) 首先 创建 indexjsp 页 面 , 编写 自动 选择 文本 框 和 编辑 框 内 容 的 JavaScript 自 定义 函数 ,关键 代码 如 下 : 
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‘<script type="text/javascript"> 
function select_txtO{ 


if (document form1 .title focus){ 
document forml .title.selectO:} 


} 
function select_txtareaO { 
if (document form1l .content focus){ 
document forml.content.selectO:} 
} 


</script> 
(2) 在 <input> 标 记 和 编辑 框 <textarea> 标 记 的 onClick 事件 中 调用 自 定义 的 JavaScript 函数 ,关键 代码 如 下 : 
<tr> 


<td><div align=ight><font color="#214994 必 世界 杯 标题 : </font></div></td> 
<td align="1eft"><input name="itie"type="text" size="50"value=" 今 月 多 条 新 前 "onClick="select_ txt0"><itd> 
<ft> 
<t> 
<td><div align="left"><font color="#214994 必 信息 内 容 : </font></div></td> 
<td rowspan="2”><textarea name="content” cols="50”rowWs="6” onClick="select txtarea0"> 今 日 ， 即 将 开始 此 次 世界 杯 决赛 西 荷 大 
战 …</textarea></td> 
<lt> 


图 秘笈 心 法 
在 本 实例 中 用 到 的 focus0 函 数 是 JavaScript 中 的 一 个 聚焦 函数 ， 一 般 在 表单 注册 时 ， 会 应 用 JavaScript 的 
focus0 函 数 使 表单 元 素 获 得 焦点 。 


实例 475 9 动 切换 焦点 


在 设置 表单 时 ， 为 了 方便 用 户 寺 
提交 表单 。 运 行 本 实例 ， 当 用 户 填 写 完 
结果 如 图 18.6 所 示 。 


表单 ,可 以 设置 按 下 Enter 键 自动 切换 到 下 一 行 控件 的 而 不 是 直接 
-项 信息 后 ， 按 下 Enter 键 时 焦点 自动 切换 到 下 一 个 文本 框 中 ,程序 运行 


18.6” 按 下 Enter 键 时 自动 切换 下 一 行 


图 关键 技术 


本 实例 主要 使 用 JavaScript 的 Event 对 象 的 keyCode 只 读 属性 。Event 对 象 的 确切 属性 依赖 于 发 生 的 事件 。 
下 面 给 出 Event 对 象 的 常用 属性 ， 如 表 18.2 所 示 。 


表 18.2 ”Event 对象 的 常用 属性 


属 性 描述 


keyCode | 表示 按 下 按键 的 数字 代号 

Type | 事件 的 名 称 

ctrlKey | 值 为 true 表示 按 下 Ctrl 键 ， 值 为 false 表示 没有 按 下 Ctrl 键 
对 于 特定 的 鼠标 事件 ， 表 示 按 下 的 鼠标 按钮 


值 为 true 表示 按 下 Alt 键 ， 值 为 false 表示 没有 按 下 Alt 键 


705 


Java Web 开发 实例 大 全 (基础 卷 ) 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 文件 ， 在 <input> 标 记 中 使 用 onKeyPress 事件 调用 自 定 义 的 JavaScript 的 enterO 函 
数 ， 关 键 代 码 如 下 : 


<form name="Jorm1 "> 
<tr bgcolor="#deab "><td height="27" colspan="2"align="iefi 过 会 员 注 册 </td></tr> 
<tr 
<td width="150" height="22" align=”ight”> 会 员 名 称 :</td> 
<td width="350" height="22”><input name=" 佐 贞 名 敌 "type= "text" class="textfiled" id=" 会 届 名 车" size="25" onKeyPress="enter(forml .密码 )" 
/></td> 
</tr> 
<tr> 
<td height="22" align=”7ight~ 密 &nbsp; 码 :</td> 
<td height="22”><input name=" 备 3" type="password" class="textfiled" id=" 备 23" size="26" onKeyPress="enter(form1l.QQ 号 码 )" /></td> 
</tr> 
<tr> 
<td height="22" align="7ight”>QQ 号 码 :</td> 
<td height="22”><input name="OO 呈 友 " type="text” class="textfiled" id="QQ 呈 友 "size="25" onKeyPress="enter(form1. 联 系 方式 )" /></td> 
</tr> 
(2) 按 下 Enter 键 时 自动 切换 焦点 ， 关 键 代码 如 下 : 
‘<script type="text/javascript"> 
function enter(str){ 
if (event.keyCode — 13){ 
strfocusO:} 
} 
‘</script> 


图 秘笈 心 法 
Event 代表 事件 的 状态 ， 它 表示 对 象 在 事件 发 生 过 程 中 才 有 效 ， 如 Event 对 象 的 元 素 、 鼠 标的 位 置 及 状态 、 
按 下 的 键 等 。 


18.2 下拉 列表 与 菜单 的 应 用 


在 开发 网 络 程序 时 ， 对 下 拉 列 表 的 应 用 非常 广泛 ， 通 过 下 拉 列 表 用 户 不 仅 可 以 查看 多 种 选项 ， 在 页 面 中 还 
可 以 使 用 多 个 下 拉 列 表 制作 多 级 菜单 ， 为 用 户 提供 更 多 信息 。 本 节 将 介绍 下 拉 列 表 的 应 用 。 


实 何 | 
实例 476 实用 指数 : 食 广 食 


图 实例 说 明 

在 设计 网 页 时 ， 可 以 使 用 下 拉 列 表 或 菜单 提供 多 个 选项 ， 不 仅 为 用 户 提供 方便 ， 程 序 人 员 还 可 以 根据 获取 
到 的 下 拉 列 表 或 菜单 将 用 户 提交 的 信息 进行 分 类 存储 ， 保 证 对 数据 库 信 息 的 有 效 维护 。 运 行 本 实例 ， 填 写 相应 
的 下 拉 列 表 和 文本 框 的 值 ， 单 击 “ 激 活 ” 按 钮 ， 在 弹出 的 窗口 中 将 显示 用 户 在 下 拉 列 表 选 择 的 选项 名 称 ， 如 
图 18.7 所 示 。 


图 关键 技术 


本 实例 主要 应 用 JavaScript 的 document 对 象 获取 下 拉 列 表 、 菜 单 的 值 ， 并 使 用 alert0 方 法 弹出 一 个 提示 对 
话 框 ， 显 示 获 取 的 相应 内 容 ， 语 法 格式 如 下 : 


vall=document forml.gameadd value: 


其 中 ， 参数 forml 为 表单 的 name 值 ，gameadd 为 下 拉 列 表 的 name 值 ，value 为 具体 输入 在 下 拉 列 表 或 文本 
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框 中 的 内 容 。 
2 到 TF 
A sss 
网 络 连接 ped 
汪 网 副 变 : 
游戏 帐号 a 游戏 生 号: 
角色 ID 
DT [ns 
18.7 获取 下 拉 列 表 、 菜 单 的 值 
图 设计 过 程 


(1) 创建 index.jsp 页 面 文件 ， 在 form 表单 中 添加 onSubmit 事件 并 调用 check0 方 法 ， 关 键 代码 如 下 : 
<form name="form1" onSubmit="check() "> 

(2) 编写 获取 下 拉 列 表 、 菜 单 值 的 JavaScript 脚本 的 check0 〇 0 函数， 关键 代 码 如 下 : 

type="text/javascript"> 

function checkO{ 

Var vall,val2,val3; 

vall=documentforml.gameadd.value: 

val2=document.forml line.value; 

val3=document.forml.linespeed.value: 

val4=document.forml.gamename.value: 


vals=document forml.gameid.value; 
alert(" 获 取 下 拉 列 表 值 :m 服务 器 :"+vall+" 线路 :"+val2+" 接 网 速度 :"+val3+" 游戏 账号 :"+val4+"n 角色 ID"+val5); 
图 秘笈 心 法 
onSubmitO 事 件 处 理 函 数 可 以 用 来 在 提交 过 程 前 验证 表单 ,这 仅 限于 使 用 提交 按钮 和 图 片 按钮 ， 如 果 使 用 的 
是 submit0 方 法 ， 不 会 触发 submit 事件 ， 所 以 所 有 的 验证 过 程 应 该 在 调用 它 之 前 完成 。 


实例 477 | 
实用 指数 : 会 依依 


国 实例 说 明 


在 使 用 下 拉 列 表 时 ， 用 户 并 不 局 限于 只 能 选择 一 个 选项 ， 还 可 以 在 下 拉 列表 中 选择 多 个 选项 。 运 行 本 实例 ， 
用 户 可 以 按 住 Ctrl 键 并 使 用 鼠标 左 键 单 击 所 要 的 选项 ， 或 者 按 住 Shift 键 再 单 击 鼠 标 左 键 选择 所 要 的 区 域 ， 实 现 
在 下 拉 列 表 中 选择 多 个 选项 ， 选 择 的 内 容 将 显示 在 编辑 框 中 ， 程 序 的 运行 结果 如 图 18.8 所 示 。 


请 选择 您 所 豆 爱 的 城市 (可 多 选 ] - 


FE 
证 

您 送 择 的 城市 有 : 

这 二 

于 


18.8 多 选 下 拉 列 表 的 选择 


Java Web 开发 实例 大 全 (基础 卷 ) 


图 关键 技术 


实现 本 实例 ,首先 设 置 下 拉 列 表 的 multiple 属性 ， 即 允许 用 户 选择 多 个 选项 ， 然 后 应 用 JavaScript 脚本 获取 
下 拉 列 表 的 length 属性 值 ， 再 使 用 for 循环 判断 select 元 素 对 象 的 selected 属性 值 ， 如 果 值 为 tue〈 即 此 选项 已 
被 选中 )， 则 将 此 选项 value 值 赋 给 一 个 指定 变量 ， 并 将 此 变量 值 赋 给 页 面 中 的 编辑 框 。 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 文件 ， 在 页 面 中 添加 下 拉 列 表 并 设置 multiple 属性 ， 并 在 下 拉 列 表 框 的 onChange 
事件 中 调用 自 定义 的 JavaScript 函数 ， 关 键 代 码 如 下 : 
< 


<td align="center" bgcolor="#FFFFFF"> 

‘<select name= icusep" size="4" multiple class="textfiled” onchange="moreselectO"> 
<option value=" 辰 大 "> 车 之 城 长 春 </option> 
<option value=" 洲 外 > 淄博 </option> 
<option value=" 花 云 典 > 连云港 </option> 
<option value=" 厌 差 > 大 连 </option> 
<option value=" 苛 多 吃 青岛 </option> 
<option value=" 订 MN/> 苏 州 </option> 

‘</select> 

<td> 

<tr> 


(2) 自 定义 JavaScript 脚本 函数 moreselect0， 关 键 代码 如 下 : 
<script language="javascript”> 
function onesie Me 
Var orderstring=' 
var n=document. forml: .meusep.length; 
for (i=0;i<n;++i){ 
if (document.forml.mcusep.options[i].selected){ 
orderstring+=document forml.mcusep.options[i].valuet"\n": 
} 


} 

‘document.forml .textarea.value=orderstring; 
} 
‘</script> 


图 秘笈 心 法 


在 自 定义 的 JavaScript 函数 中 ， 获 取 到 select 元 素 对 象 后 ， 调 用 其 options 属性 返回 的 是 下 拉 列 表 所 有 选项 
的 数组 ， 然 后 在 循环 中 应 用 options[j] 即 可 获取 下 拉 列 表 中 的 每 一 个 选项 。 


实 侈 | 
实例 478 ee 


图 实例 说 明 

在 开发 动态 网 站 程序 时 ， 经 常会 遇 到 将 下 拉 列 表 中 的 选项 进行 多 选 移 除 或 者 多 选 移入 。 运 行 本 实 列 ， 选 择 
喜欢 的 书籍 , 单 击 “》” 按 钮 ， 此 时 将 显示 在 选项 2 的 下 拉 列表 中 ,如 果 选 择 选 项 2 下 拉 列 表 的 选项 , 并 单 击 “《” 
按钮 ， 此 时 将 出 现在 选项 1 的 下 拉 列 表 中 ， 运 行 结果 如 图 18.9 所 示 。 


图 关键 技术 


本 实例 主要 应 用 JavaScript 的 while 循环 语句 ， 判 断 如 果 select 元 素 的 selectedIndex 属性 值 不 为 -1， 则 获取 
下 拉 列 表 中 选中 项 的 索引 值 和 对 应 的 文本 ， 然 后 使 用 select 元 素 对 象 的 add0 方 法 将 此 选项 添加 到 另 一 个 下 拉 列 
表 中 ， 并 应 用 select 元 素 对 象 的 remove0 方 法 移 除 当前 下 拉 列 表 中 的 此 选项 。 
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JsP 开 发 王 


18.9 下拉 列 表 中 进行 多 选 移动 


图 设计 过 程 
(1) 创建 index.jsp 页 面 ， 在 页 面 中 分 别 添加 两 个 下 拉 列 表 和 普通 按钮 ， 在 按钮 的 onClick 鼠标 单 击 事件 中 
调用 自 定义 的 JavaScript 脚本 函数 ， 关 键 代 码 如 下 : 


‘<select name="sel placel" size="6" multiple class="wenbenkuang" id="sel placel" style="width:100px " > 
<option value="sel1">JavaWeb 自学 手册 </option> 
<option value="sel2">java 编程 思想 </option> 
<option value="sel3 "> 深入浅出 hibernate</option> 
<option value="sel4">JSP 开发 王 </option> 
<option value="sel5">JavaWeb 范例 宝典 </option> 
‘</select> 
<input name="sure2" type="button" id="sure2" onClick="mulselect(document.forml .sel_placel.document.forml.sel_place2);" value=") "align="center"> 
genbsp: 


<input name="surel1" type="button" id="sure1” onClick="mulselect(document forml.sel_place2.document.forml.sel placel):" value=" (> 
(2) 自 定义 的 JavaScript 函数 ， 关 键 代码 如 下 : 
‘<script “javascript"> 
function mulselect(n1,n2){ 
while(nl.selectedIndex!=-1){ 
Var indx=nl.selectedIndex: 
var t=n1.options[indx].text; 
n2.0ptions.add(new Option(t)); 
nl.remove(indx); 
} 


人 
国 秘笈 心 法 


Select 下 拉 列 表 的 selectedIndex 属性 可 设置 或 返回 下 拉 列表 中 选项 的 索引 号 ， 如 果 所 选 的 内 容 为 空 则 返回 -1， 
和 否则 返回 索引 值 。 
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国 实例 说 明 
在 开发 动态 网 站 时 , 可 以 将 一 些 固定 不 变 的 数据 存储 在 数组 到 下 
中 ,然后 将 数组 中 的 书籍 显示 到 下 拉 菜 单 中 以 供用 户 选 择 , 这样 gam 
可 以 加 快 程序 的 运行 速度 ， 方便 用 户 浏览 网 页 。 运 行 本 实例 ， 单 EE 
击 下 拉 菜 单 的 控制 按钮 , 将 显示 出 该 下 拉 菜 单 中 的 全 部 选项 , 运 加 
行 结果 如 图 18.10 所 示 。 
图 关键 技术 
本 实例 主要 使 用 JavaScript 的 构造 函数 Amray0 和 Option0。 18.10 ”将 数组 中 的 数据 添加 到 下 拉 菜 单 中 
下 面 分 别 进行 介绍 。 
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(1) Array0 构 造 函数 和 运算 符 new 同样 可 以 创建 Array 数组 对 象 ， 并 且 可 以 使 用 多 种 方式 创建 数组 。 
(2) Option0 构 造 函 数 可 以 动态 地 创建 Option 对 象 ， 语 法 格式 如 下 : 
new Option(text,value.defaultSelected.selected) 
参数 说 明 
@ text: 表示 一 个 字符 串 ， 指 定 Option 对 象 的 text 属性 。 
@ value: 表示 一 个 字符 串 ， 指 定 Option 对 象 的 value 属性 。 
@ defaultSelected: 为 布尔 值 ， 指 定 Option 对 象 的 defaultSelected 属性 。 
@ selected: 为 布尔 值 ， 指 定 Option 对 象 的 selected 属性 。 
图 设计 过 程 
(1) 在 JavaScript 脚本 中 定义 一 个 数组 ， 并 为 数组 赋值 ， 然 后 自 定义 一 个 select0 函 数 ， 将 数组 中 的 数组 添 
加 到 表单 的 下 拉 菜 单 中 ， 关 键 代码 如 下 : 
站 
counts=0; 
amr= new Array(" 西 班 牙 "," 巴 西 "" 阿 根 廷 "," 意 大 利 "," 荷 兰 "," 美 国 "); 
counts=arrlength; 
naon selectO{ 
for (01 <counts: itt) { 
i document forml.sele.options[i] = new Option(arrfi],i): 
</script> 
(2) 在 下 拉 列 表 标 记 的 onFocus 事件 中 调用 自 定义 的 JavaScript 函数 select0， 关 键 代码 如 下 : 
<select name="sele" id="sel" onFocus="select() "></select> 
图 秘笈 心 法 
JavaScript 的 构造 函数 本 身 没有 类 的 概念 ， 只 有 函数 的 概念 ，JavaScript 的 类 实际 上 也 是 一 个 JavaScript 的 函 
数 ， 在 这 个 特殊 的 函数 中 可 以 包含 变量 和 其 他 JavaScript 函数 的 引用 。 
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图 实例 说 明 

在 进行 网 站 程序 设计 时 ， 大 多 数 网 站 都 设 有 友情 链接 这 一 版 块 ， 通 常情 况 下 ， 链 接 到 一 些 相关 及 热门 网 站 ， 
浏览 者 可 以 通过 单 击 网 站 名 称 或 地 址 的 超 链接 进入 所 要 访问 的 网 
站 。 有 时 为 了 节约 页 面 也 可 以 通过 下 拉 菜单 的 方法 来 实现 该 功能 。 百 新 记 司 训 
运行 本 实例 ， 当 用 户 选择 下 拉 菜 单 中 所 要 访问 的 网 站 后 , 单 击 “ 进 J 
入 ”按钮 可 以 立即 链接 到 指定 的 网 站 ， 程 序 的 运行 结果 如 图 18.11 
所 示 。 图 18.11 下 拉 菜 单 选择 所 要 联机 的 网 站 


图 关键 技术 


本 实例 将 下 拉 菜 单 中 各 选项 的 value 属性 设置 为 对 应 联机 网 站 的 访问 ,并 在 自 定义 JavaScript 函数 gotoURLO 
中 获取 用 户 选 择 的 下 拉 列 表 选 项 值 ， 然 后 使 用 window 对 象 的 location 属性 指定 链接 的 URL 地 址 。 


力 设计 过 程 
(1) 自 定义 JavaScript 函数 ， 此 函数 首先 判断 浏览 者 是 否 选择 了 “新 窗口 访问 站 点 ” 如 果 选 中 此 复 选 杠 ， 
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则 使 用 window 对 象 的 open0 方 法 打开 一 个 新 窗口 浏览 页 面 ， 否 则 在 本 窗口 中 打开 新 页 面 ， 关 键 代 码 如 下 : 


BE language="Javascript”> 
function gotoURLO{ 
Var thebox=documentforml 
if(thebox fig.checked){ 
if(!window.newwindow){ 
newwindow—window.open("") 
newwindow.location=thebox.example.options[thebox.example.selectedIndex].value 
| 
} 
else 
window.location=thebox.example.options[thebox.example.selectedIndex].value 
> 
‘</script> 
(2) 在 <input> 标 记 的 onClick 事件 中 调用 自 定义 的 JavaScript 函数 gotoURLO， 关 键 代 码 如 下 : 
<form name="form1"> 
<input type="checkbox”" name="fig" value="on "> 
<span > 新 窗口 访问 站 点 </span><br> 
<select name="example" onchange=""> 
<option value="http:/wwwsina.com"> 新 浪 </option> 
<option value="http:/www.sohu.com"> 搜 狐 </option> 
<option value=%htp://www.taipingyang.com"> 太 平 洋 电 脑 </option> 
<option value="ht 妇 ://www.tianya.com"> 天 涯 论坛 </option> 
<option value="http:/www.163.com > 网 易 </option> 
</select> 
<input name="button" type="button" onclick="gotoURL(O" value=" 次 和 > 
</form> 


图 秘笈 心 法 


本 实例 使 用 window 对 象 的 open() 方 法 打开 新 窗口 对 象 的 引用 ， 并 通过 它 来 操作 新 窗口 中 的 元 素 。 


图 实例 说 明 

在 开发 购物 网 站 时 , 经常 需 要 对 商品 或 物品 进行 分 类 , 分 类 可 
以 有 二 级 或 者 多 级 。 在 设置 页 面 时 ,可 以 使 用 多 个 下 拉 菜 单 分 别 显 的 
示 不 同 级 别 的 分 类 信息 ， 即 实现 多 级 级 联 菜单 。 运 行 本 实例 ,当先 人 
择 商 品 的 “第 一 级 分 类 ”下 拉 菜 单 时 ， 商 品 的 “第 二 级 分 类 ”下 拉 | | 机 本 


喜 直 宫 的 条 与 全 


菜单 的 内 容 会 随即 发 生变 化 ， 程 序 的 运行 结果 如 图 18.12 所 示 。 商品 简介 


图 关键 技术 


本 实例 首先 在 <scrip 忆 标记 中 定义 两 个 数组 ， 分 别 用 于 记录 商 
品 一 级 分 类 和 二 级 分 类 的 信息 ， 然 后 自 定义 一 个 Javascript 函数 ， 图 18.12 多 级 级 联 来 间 
此 函数 的 功能 是 当 触 发 “第 一 级 分 类 ”下 拉 菜 单 的 onChange 事件 
时 ， 先 清空 商品 的 “第 二 级 分 类 ”下 拉 菜单 的 选项 内 容 ， 然 后 再 将 对 应 的 信息 装载 到 商品 的 “第 二 级 分 类 ”下 
拉 菜 单 中 。 


图 设计 过 程 
(1) 创建 index.jsp 页 面 , 在 表单 中 添加 下 拉 菜 单 并 使 用 onChange 事件 调用 自 定义 的 JavaScript 函数 rinfo0 
和 Menu0， 关 键 代 码 如 下 : 
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<select name= "类别 "id- "类 别 ”onChange=-"Menu(arr2[document forml. 类 别 .options[documentforml. 类 别 .selectedIndex].text].documentforml. 分 
为 ?> 
<option selected> 水 果 </option> 
<option> 豆 制品 </option> 
<option> 厨 房 </option> 
</select> 
<select name= "分类 "id-" 耸 类 > 
<option> 苹 果 </option> 
<option> 西 瓜 </option> 
<option> 香 菩 </option> 
</select> 
(2) 编写 JavaScript 脚本 实现 多 级 级 联 菜单 ， 关 键 代码 如 下 : 
<script type="text/javascript"> 
Var arr2 = new Array(4); 
arr2[" 水 果 "] = new Array(" 茧 果 "," 西 瓜 "," 香 荡 "); 
arr2[" 豆 制品 "] = new Array(" 酸 奶 "," 鲜 奶 "); 
arr2[" 厨 房 "] = new Array(" 洗 洁 精 "," 厨 具 "); 
function rinfo(classMenu){ 
for (var i=0; i < classMenu.optionslength: i++){ 
classMenu.options[i]=null; 
} 
jc 
function Menu(classList,classMenu){ 
Tinfo(classMenu) 
for (var i=0; i < classList.length; i++){ 
classMenu[i]=new Option(classList[i],classList[i]); 


</scrcipt> 
图 秘笈 心 法 
在 JavaScript 中 清空 下 拉 列 表 的 所 有 选项 ， 可 以 通过 设置 下 拉 列 表 的 option 对 象 为 null 来 实现 。 
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实用 指数 : 依依 食 


图 实例 说 明 


在 制作 网 页 时 ， 如 果 信 息 分 类 的 内 容 很 多 ， 还 可 以 在 下 拉 列 表 中 将 其 分 
级 显示 ， 使 用 户 更 清晰 所 查看 的 选项 。 运 行 本 实例 ， 可 以 看 到 下 拉 列 表 的 选 


软件 工程 与 开发 


项 是 分 级 显示 的 ， 程 序 的 运行 结果 如 图 18.13 所 示 。 
图 关键 技术 


本 实例 主要 使 用 <optgroup> 标 记 ， 并 设置 其 为 label 属性 。<optgroup> 标 
记 主 要 用 于 对 select 元 素 中 的 选项 进行 逻辑 分 组 ， 在 <optgroup> 标 记 中 指定 
的 文本 是 非 可 选项 ， 一 般 通 过 蔡 换 文本 与 可 选项 来 区 分 。 
图 设计 过 程 

创建 index.jsp 页 面 ， 在 表单 处 添加 下 拉 列 表 的 <optgroup> 属 性 ， 实 现 分 
级 下 拉 列 表 ， 关 键 代码 如 下 : 

<select name="book_class" id="book_class”> 

<optgroup label=" 玫 作 专业 "> 
<option> 软 件 工程 与 开发 </option> 


<option> 信 息 工 程 业 </option> 
<option>Java 软件 工程 师 </option> 


图 18.13 分 级 下 拉 列 表 
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/opteroup> 

<optgroup label=" 记 由 一 化 "> 
<option> 机 械 工 程 </option> 
<option> 汽 修 维护 </option> 
<option> 模 具 维 修 </option> 

</optgroup> 

<optgroup label=" 奉 务 天 请 ~ 
<option> 专 业 英语 </option> 
<option> 企 业 英语 </option> 
<option> 旅 游 英语 </option> 

</optgroup> 

‘</select> 


国 秘笈 心 法 

<optgroup> 标 签 的 label 属性 值 会 作为 组 合 的 标题 (第 一 级 ) 显示 在 菜单 中 , 因此 此 项 一 定 要 指定 , 在 option 
标签 的 label 属性 值 中 ， 通 过 显示 组 合 名 称 ， 可 以 指定 能 够 省 略 部 分 的 次 选项 ， 如 果 省 略 了 这 个 属性 ， 在 option 
范围 内 指定 的 内 容 就 会 没有 改变 ， 直 接 使 用 原 有 的 选项 。 


18.3 单 选 按钮 


单 选 按钮 组 是 由 一 组 单 选 按钮 组 成 的 ， 并 且 在 一 个 单 选 按钮 组 中 ， 每 次 只 能 有 一 个 单 选 按钮 被 选中 ， 它 也 
是 HTML 页 面 中 常用 的 表单 元 素 之 一 。 下 面 通过 几 个 具体 实例 介绍 单 选 按钮 组 的 应 用 。 
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图 实例 说 明 

在 网 站 注册 时 , 需要 对 填写 的 内 容 进行 验证 , 如 用 户 名 是 否 被 占用 、 密 码 位 数 是 否 不 够 安全 、 身份 证 和 Email 
是 否 合法 等 。 判 断 用 户 输入 信息 的 合法 性 有 两 种 实现 方法 : 一 种 是 在 提交 表单 以 前 ， 应 用 JavaScript 实现 ; 另 一 
种 是 在 表单 提交 后 通过 VBScript 实现 ， 大 多 数 情况 下 都 采用 前 者 来 判断 。 运 行 本 实例 ， 判 断 用 户 输入 的 证 件 号 
码 是 否 正 确 ， 需 要 根据 前 面 选择 的 证 件 类 型 进行 判断 ， 因 为 不 同 证 件 的 号 码 位 数 也 不 同 ， 如 身份 证 需要 判断 15 
或 18 位， 而 军官 证 需要 判断 8 一 12 位 ， 程 序 的 运行 结果 如 图 18.14 所 示 。 


18.14 不 提交 表单 获取 单 选 按钮 的 值 


图 关键 技术 
本 实例 主要 是 通过 一 组 单 选 按钮 组 成 的 单 选 按钮 组 实现 的 ， 单 选 按钮 组 每 次 只 能 有 一 个 单 选 按钮 被 选中 。 
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单 选 按钮 的 属性 和 事件 如 表 18.3 所 示 。 
表 18.3 单 选 按钮 的 属性 和 事件 


属 性 说 明 说 明 
Checked 表示 单 选 按钮 被 选中 失去 焦点 时 的 动作 
Name 对 象 属性 访问 名 称 击 鼠 标 时 的 动作 
Type onFocus 获得 焦点 时 的 动作 
Value 
图 设计 过 程 
(1) 创建 index.jsp 页 面 ， 在 身份 证 和 军官 证 的 <input> 标 记 上 使 用 onBlur 事件 并 调用 自 定义 的 JavaScript 
函数 ， 关 键 代 码 如 下 : 
<t> 
<td height="28"align="center"> 证 件 类 型 :</td> 
<tdd> 


<input name="CorzTpe" type='yadio" class="noborder” value=" 秃 耸 证 " checked> 身 份 证 &nbsp: 
<input name="CardTpetype=yadioclass=moborder" value=" 壬 全 让 > 军官 证 
</td> 
</t> 
(2) 编写 实现 不 提交 获取 单 选 按 钮 的 值 ， 关 键 代码 如 下 : 
<script type="text/javascript"> 
function getValO{ 
Var CardTypeValue; 
for (i=0;i<form!1.CardType.length:i++){ 
if (form1 .CardType[i].checked){ 
CardTypeValue=forml.CardType[i].value; 
break; 
} 
if(CardTypeValue 一 "身份 证 "){ 
if(form!1 .pcard.value.length!=15 &é& form]1 .pcard.value.length!=18){ 
alert(" 您 输入 的 证 件 号 码 有 误 ! "):forml.CardType focusO:return: 


} 
Jelse{ 
if(CardTypeValue 一 "军官 证 "){ 
if(form!1.pcard.value.length!=8 &c&c forml.pcard.value.length!=12){ 
alert(" 您 输入 的 证 件 号 码 有 误 ! ");form1.CardType.focusO:return; 
} 


} 
} 
} 
</script> 


图 秘笈 心 法 
在 本 实例 中 , 验证 证 件 类 型 时 用 到 了 JavaSeript 脚本 ; 在 选取 用 户 输入 的 内 容 长 度 时 , 用 下 面 的 代码 来 获取 : 


Forml.pcard.value.lenght 
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图 实例 说 明 
在 设计 网 站 新 闻 信息 添加 页 面 时 ， 根 据 选 择 的 信息 类 型 的 不 同 ， 需 要 显示 不 同 表单 元 素 。 运 行 本 实例 ， 选 
中 “滚动 条 消息 ” 单 选 按钮 时 ， 其 下 方 显 示 “ 消 息 主题 ”文本 框 和 “消息 内 容 ” 编 辑 框 ， 如 图 18.15 所 示 ; 如 
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果 选 中 “浮动 条 消息 ” 单 选 按钮 ， 在 其 下 方 增添 一 个 “浮动 条 相关 图 片 ” 文 本 框 ， 如 图 18.16 所 示 。 


| 消息 类 型 | @ 滚动 条 消息 日 浮 动 条 消息 
消息 主题 -| 丁 王 牙 要 地 证 要 宗 于 至 


本 ET = 消息 内 容 | 和 7 “| 
1 ED 
18.15 ”选中 “滚动 条 消息 ” 单 选 按钮 18.16 选中 “浮动 条 消息 ” 单 选 按钮 
图 关键 技术 


本 实例 主要 应 用 JavaScript 来 设置 表格 的 display 样式 , 以 实现 表格 的 显示 和 隐藏 。 通 过 设置 表格 的 id 属性 ， 
可 以 实现 对 表格 的 整体 控制 。 通 过 将 表格 的 display 样式 设置 为 none， 可 以 控制 表格 的 隐藏 ， 将 表格 的 display 
样式 设置 为 block， 可 以 显示 表格 。 
图 设计 过 程 

(1) 创建 ndexjsp 页 面 ， 设 置 “ 浮 动 条 相关 图 片 ”的 表格 id 属性 值 ， 默 认 状 态 下 是 不 可 见 的 ， 关 键 代 码 
如 下 : 

<tr bgcolor="#FFFFFF" id="img" style="display:none”> 

(2) 在 选中 “滚动 条 消息 ” 单 选 按钮 时 ， 触 发 其 onClick 事件 ， 使 “浮动 条 相关 图 片 ”文本 框 不 可 见 ， 关 
键 代码 如 下 : 

<td height="28"><input name="info" type="radio” value="]" onClick="img.style.display='none';" checked> 滚 动 条 消息 

(3) 在 选中 “浮动 条 消息 ” 单 选 按钮 时 ， 触 发 其 onClick 事件， 使 “浮动 条 相关 图 片 ”文本 框 显示 可 见 
关键 代码 如 下 : 

<input type="7radio” name="info" value="2"” onClick="img.style.display='block';"> 浮 动 条 消息 
图 秘笈 心 法 

display 属性 用 来 确定 页 面 元 素 是 否 显示 和 显示 方式 ， 它 是 一 个 不 可 继承 的 属性 。display 属性 在 指定 元 素 的 
显示 类 型 时 ， 可 以 把 原本 内 联 属性 元 素 通过 display 指 为 块 元 素 。 
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图 实例 说 明 
在 开发 动态 网 站 时 ， 根 据 用 户 选择 的 选项 不 同 ， 可 以 设置 表单 中 的 元 素 是 否 可 用 ， 以 保证 提交 信息 的 准确 
性 。 运 行 本 实例 ， 选 中 “高 级 会 员 ” 单 选 按钮 时 ， 用 户 可 以 使 用 会 员 功能 中 的 “时 尚 音乐 平台 ”和 “选择 房间 ” 
下 拉 列 表 ， 如 图 18.17 所 示 ; 选中 “普通 会 员 ” 单 选 按钮 时 ， 会 员 功能 只 有 “昵称 ”一 项 可 修改 ， 其 他 两 项 均 
为 灰色 不 可 用 状态 ， 如 图 18.18 所 示 。 
[LEE 


时 尚 音 乐平 台 ] 昔 六 油 总 震 哮 > ( 限 ; 


益生 “《 艰 襄 级 会 员 ) 
昵称 | [3 限 称 明日 之 后 
挝 择 房间 | -更 多 网 ( 展 高 级 会 员 ) 卉 和 同 昼 可 1 及“ 的 | 候 言 级 会 员 ) 


18.17 选中 “高 级 会 员 ” 单 选 按钮 18.18 选中 “普通 会 员 ” 单 选 按钮 
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图 关键 技术 


本 实例 主要 应 用 JavaSeript 来 设置 下 拉 列 表 的 disabled 属性 ， 当 元 素 的 disabled 属性 为 tue 时 ， 表 示 该 元 素 
不 可 用 ， 并 且 此 元 素 呈 灰色 显示 状态 。 


力 设计 过 程 
(1) 创建 indexjsp 页 面 ， 设 置 “ 时 尚 音乐 平台 ”和 “选择 房间 ”默认 情况 下 是 可 用 的 ， 关 键 代码 如 下 : 
<t> 


<td height="22" align="”7ight”" bgcolor="#FFFFFF"> 时 尚 音乐 平台 :</td> 
<td bgcolor="#FFFFFF" ><select name="t_class” id="t class"> 
<option> 柴 米 油 盐 着 醋 </option> 
<option> 爱 你 一 万 年 </option> 
<option>... 更 多 </option> 
</select>〔 限 高 级 会 员 ) </td> 
</tr> 
<tr> 
<td align="ight” bgcolor="#FFFFFF" > 选择 房间 </td> 
<td bgcolor=#FFFFFF™" ><select name="t class1"id="t class1"> 
<option value="80 后 友 沿 KK 恬 ">80 后 时 尚 K 歌 </option> 
<option value=" 震 衣 焉 之 层 "> 爱 别离 之 屋 </option> 
<option value=" 衣 那 之 招 "> 闲 聊 之 吧 </option> 
</select><input type="button” value="go/” />( 限 高 级 会 员 )</td> 
</tr> 


(2) 当选 中 “高 级 会 员 ” 单 选 按钮 时 ， 触 发 其 onClick 事件 并 刷新 当前 页 面 ， 关 键 代 码 如 下 : 
<input name="t type” type="7adio”" value="] " onClick="window.location='index.jsp':" checked> 
(3) 如 果 当 前 选中 的 是 “普通 会 员 ” 单 选 按钮 ， 触 发 其 onClick 事件 ， 设 置 下 拉 列 表 的 disabled 属性 值 为 
true， 关 键 代码 如 下 : 
<input type="7adio" name="t_type” value="2" onClick="t_class.disabled="true':t_class1.disabled="true';"> 


国 秘笈 心 法 


disabled 属性 值 为 tue 时 ， 说 明 禁 用 了 这 个 元 素 ， 如 果 不 想 让 浏览 者 操作 这 个 元 素 ， 而 又 想 获取 到 其 值 ， 可 
以 设置 只 读 属 性 readonly 为 tue， 这 样 属 性 为 只 读 ， 后 台 又 能 获取 到 值 。 


18.4 复 选 框 


在 设置 网 页 时 ， 根 据 用 户 需求 ， 可 以 使 用 复 选 框 为 用 户 提供 多 个 选项 ， 这 样 用 户 针 对 某 一 问题 时 ， 可 以 选 
择 一 个 以 上 的 选项 。 复 选 框 显示 一 个 带 有 标识 的 小 方 格 ， 当 用 户 单 击 时 在 其 中 会 显示 一 个 选择 标志 ， 或 者 将 已 
有 标志 取消 。 本 节 将 介绍 复 选 框 的 应 用 。 


图 实例 说 明 
本 实例 将 实现 只 有 一 个 复 选 框 时 控制 复 选 框 的 全 选 或 反选 功能 ， 程 序 的 运行 结果 如 图 18.19 所 示 。 


选择 商品 分 类 
团 


家 居 
轿 给 选 反选 ] 


商品 标价 
19888 


图 18.19 只 有 一 个 复 选 框 时 控制 复 选 框 的 全 选 或 反选 
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转 关键 技术 
本 实例 主要 通过 JavaScript 的 站 条 件 判断 语句 确定 复 选 框 的 数量 是 否 大 于 0， 如 果 数 值 不 大 于 0， 说 明 需 要 
控制 的 复 选 框 只 有 一 个 ( 即 返回 的 length 属性 值 为 空 ), 则 可 以 直接 设置 复 选 框 的 checked 属性 值 为 true 或 false。 
设计 过 程 
创建 ndexjsp 页 面 ， 实 现 只 有 一 个 复 选 框 的 全 选 或 反选 的 关键 代码 如 下 : 


图 秘笈 心 法 
在 Javascript 中 ,获取 到 复 选 框 对 象 后 ， 判 断 其 checked 属性 为 tue 或 false, 就 可 以 知道 当前 这 个 复 选 框 是 
否 被 选中 。 


18.5 密 码 域 


在 开发 动态 网 站 时 ， 网 站 前 台 用 户 注册 的 页 面 、 登 录 页 面 或 者 网 站 后 台 管 理 员 登 录 的 页 面 都 要 用 到 密码 域 ， 
在 页 面 中 不 仪 可 以 获取 到 密码 域 的 值 , 还 可 以 对 密码 域 进行 设置 使 其 内 容 更 为 安全 。 本 节 将 介绍 密码 域 的 应 用 。 


初级 | 

实例 487 | 

“二 Li 
图 实例 说 明 

对 于 网 络 应 用 的 任何 程序 和 网 站 ， 安 全 最 为 重要 。 而 与 其 息息相关 的 便 是 密码 域 ， 虽 然 在 密码 域 中 已 经 将 

所 输入 的 字符 以 掩 码 形式 显示 了 ， 但 是 并 没有 真正 保密 ， 因 为 用 户 或 

浏览 者 可 以 通过 复制 该 密码 域 的 内 容 ， 并 把 复制 的 密码 粘贴 到 其 他 文 

档 上 即 可 查看 到 用 户 输入 的 密码 内 容 。 为 此 可 以 将 密码 域 的 复制 功能 

屏蔽 ， 同 时 改变 密码 域 的 掩 码 符 号 。 运 行 本 实例 ， 输 入 密码 并 选中 输 


入 的 密码 , 单 击 鼠 标 右键 时 会 看 到 复制 的 菜单 项 变 为 灰色 即 不 可 使 用 
状态 ， 复 制 和 剪 切 也 用 不 了 ， 运 行 结果 如 图 18.20 所 示 。 


图 关键 技术 


本 实例 主要 是 通过 控制 密码 域 的 oncopy、oncut、onpaste 事件 来 
实现 密码 域 的 内 容 禁 止 复制 的 功能 ， 并 通过 改变 其 style 样式 属性 来 实现 改变 密码 域 中 掩 码 的 样式 。 


力 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 添加 密码 域 ， 关 键 代码 如 下 : 


图 18.20 ”让 密码 域 更 安全 
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<input name="txt_passwd" type="password" class—"textbox" id="txt_passwd" size="12" maxlength="50" > 
(2) 在 页 面 添加 禁止 用 户 复制 、 粘 贴 、 剪 切 密码 操作 ， 关 键 代 码 如 下 : 


oncopy="return False" oncut="retun False" onpaste="retum False" 


(3) 改变 密码 域 的 掩 码 样 式 ， 将 其 font-family 设置 为 Wingdings， 关 键 代 码 如 下 : 


style="font-family: Wingdings;" 
国 秘笈 心 法 

需要 注意 的 是 ， 在 修改 掩 码 的 样式 时 一 定 要 选择 Windows 自 带 的 字体 样式 ， 如 果 设 置 的 字体 样式 不 存在 ， 
密码 会 以 原形 显示 。 


初级 | 
实用 指数 : 让 让 三 


实例 488 


国 实例 说 明 

在 制作 用 户 注 册页 面 时， 要求 用 户 输入 密码 处 都 有 “确认 密码 ”一 项 ， 以 确定 用 户 输入 密码 是 否 准确 。 运 
行 本 实例 ， 如 果 用 户 在 “确认 密码 ”文本 框 中 输入 的 内 容 和 “密码 ”文本 框 中 输入 的 内 容 不 同 ， 则 弹出 提示 框 ， 
要 求 用 户 再 次 确认 输入 的 密码 ， 运 行 结果 如 图 18.21 所 示 。 


RN 


局 rm 


加 固 | 


18.21 不 提交 表单 自动 检测 密码 域 是 否 相同 


图 关键 技术 
本 实例 主要 应 用 JavaScript 的 站 条 件 语句 来 判断 两 次 输入 的 密码 是 否 相 同 ， 如 果 不 同 ， 则 调用 alert0 方 法 弹 
出 一 个 警告 提示 框 。 
设计 过 程 
创建 index.jsp 页 面 文件 ， 在 确认 密码 域 中 的 <input> 标 记 实现 不 提交 表单 自动 检测 密码 是 否 相同 的 关键 代码 
如 下 : 
<input name="pwd2" type="password" class="stylel" id="pwd2” onBlur="if(this.value!=this.form.pwd1.value) alert(' 您 两 次 输入 的 密码 不 一 致 ! );" 
size="18"> 
国 秘笈 心 法 
在 本 实例 中 ， 在 “确认 密码 ”文本 框 中 应 用 了 onBlur 事件 ， 应 用 它 可 以 实现 当 输入 确认 密码 并 且 确 认 密 码 
的 文本 框 失去 焦点 时 ， 会 调用 JavaScript 自 定义 函数 来 验证 密码 与 确认 密码 是 否 一 致 。 


18.6 表单 的 应 用 


表单 是 实现 动态 网 页 的 一 种 主要 外 在 形式 ， 使 用 表单 可 以 收集 客户 端 提交 的 相关 信息 ， 是 实现 网 站 互动 功 
能 的 重要 组 成 部 分 。 下 面 通过 几 个 具体 的 实例 介绍 表单 的 应 用 。 
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实例 489 
实用 指数 : 食 但 食 


国 实例 说 明 


用 户 填 写 表单 时 ， 可 以 单 击 “ 提 交 ” 按 钮 提交 表单 ， 也 可 以 直接 按 Enter 键 提交 表单 ， 同 时 还 可 以 单 击 “ 重 
置 ”按钮 将 所 填 内 容 清空 。 为 了 防止 用 户 因 玻 忽而 按 错 键 ， 可 以 使 用 JavaScript 脚本 来 控制 表单 的 提交 与 重 置 ， 
程序 的 运行 结果 如 图 18.22 所 示 。 


图 片 信息 


图 片 来 源 : 与 阳 个 
图 片 名 称 .XZ 
图 片 相关 : 王 二 球 而 区 -前 


EE 


图 18.22 ”通过 JavaScript 实现 表单 的 提交 与 重 置 


图 关键 技术 


本 实例 主要 是 通过 JavaScript 脚本 来 调用 表单 的 submitO 提 交 方 法 和 reset0 重 置 方 法 。 页 面 中 的 按钮 为 普通 
按钮 ， 即 <input> 标 记 的 类 型 为 button 。 


图 设计 过 程 

创建 mdexjsp 页 面 文件 ， 在 “添加 ”和 “ 重 置 ”按钮 处 使 用 onClick 事件 ， 关 键 代码 如 下 : 

<td height="28" colspan="2" align="1eft > 

<input name="add" type="button” class="button" id="add" value=" 刻 :M1" onClick="document form1.submitO:"> 

<input type="button” name="Submit2" value=" 血 角 " class="button” onClick="document.forml resetO:"> 

<htd> 
图 秘笈 心 法 

重 置 表 单 在 Web 开发 中 已 不 再 受 追 返 了 ， 因 为 常常 会 有 用 户 不 小 心 单 击 “ 重 置 ”按钮 而 不 是 “提交 ”按钮 
(因为 “提交 ”和 “ 重 置 ”按钮 往往 靠 在 一 起 )。 如 果 表 单 第 一 次 载 入 时 ， 在 字段 中 己 包 含 一 些 默 认 信息 ， 那 么 
“ 重 置 ” 按 钮 还 有 些 作 用 ， 因 为 可 恢复 到 初始 值 ， 但 对 载 入 时 字段 中 没有 任何 信息 的 表单 ， 最 好 避免 使 用 “ 重 
置 ”按钮 。 


图 实例 说 明 

在 一 般 情 况 下 ， 用 户 提交 表单 后 ， 会 跳 转 到 另 一 个 页 面 ， 同 时 表单 中 的 内 容 也 会 清空 。 而 有 时 为 了 简化 操 
作 步 骤 ， 需 要 保留 历史 信息 ， 即 当 用 户 再 返回 原来 页 面 时 ， 还 可 以 看 到 刚才 所 填写 的 信息 。 运 行 本 实例 ， 当 用 
户 刷 新 或 者 提交 表单 后 再 退回 到 原来 页 面 时 ,“ 图 书 价格 ”和 “出 版 社 ” 文 本 框 中 的 内 容 将 保持 不 变 ， 运 行 结果 
如 图 18.23 所 示 。 


图 关键 技术 


本 实例 主要 通过 在 CSS 样式 定义 中 设置 behavior 确定 对 象 的 行为 ， 并 设置 <meta> 元 信息 标记 中 的 两 个 属性 
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name 和 content 来 实现 保留 历史 信息 的 功能 。<meta> 标 记 用 来 在 HIML 文件 中 模拟 HITP 协议 的 响应 头 报 文 ， 
是 实现 元 数据 的 主要 标记 ， 它 可 用 于 鉴别 标注 内 容 提 要 和 关键 字 、 设 定 页 面 字符 集 、 刷 新 页 面 等 。 


18.23 ” 带 记忆 功能 的 表单 


图 设计 过 程 
(1) 创建 index.jsp 页 面 ， 在 “图 书 价 格 ” 和 “出 版 社 ” 的 <input> 标 记 中 class 属性 调用 css 样式 ， 关 键 代 
码 如 下 : 


<td height="22" align="left" ><input type="text” name="txt unit” id="ht unit" class="saveHistory"/> 

<td height="22" colspan="3" align="Jeft"><input name="xt_co” type="text” class="saveHistory" id="ixt_co” size="35"> 
(2) 实现 带 记忆 功能 的 表单 ， 关 键 代 码 如 下 : 

<style type="text/css "> 


图 秘笈 心 法 
<meta> 用 来 模拟 HTTP 协议 的 响应 报 文 ， 是 指定 所 提供 信息 的 类 型 ， 应 用 于 网 页 的 <head> 与 </head> 之 间 ， 
属性 有 以 下 两 种 。 
口 name: 常用 的 选项 有 keywords (关键 字 )、description( 网 站 内 描述 )、author (作者 )、robots (机 器 人 ) 等 。 
口 。 content: 根据 name 项 的 定义 来 确定 此 项 写 什么 样 的 字符 串 。 


ee 初级 i 
Sl : 
实例 3 实用 指数 ， 友 去 育 


力 实例 说 明 
用 户 在 提交 表单 时 ， 如 果 单 击 “ 提 交 ” 按 钮 后 表单 没有 立即 提交 ， 用 户 则 会 多 次 单 击 “ 提 交 ” 按 钮 ， 这 样 


就 会 多 次 提交 表单 内 容 , 造 成 意 想不到 的 后 果 。 运 行 本 实例 ， 当 用 es 
户 单 击 “ 确 定 ”按钮 后 ,提交 表单 的 同时 该 按钮 将 被 禁用 ,防止 表 EE 


单 重复 提交 ， 程 序 的 运行 结果 如 图 18.24 所 示 。 人 
顶 付 金额 : i90000. 中 


本 实例 首先 设置 <input> 标 记 的 disabled 属性 值 ， 然 后 再 调用 
表单 的 submit0 提 交 方 法 。 页 面 中 的 按钮 为 普通 按钮 ， 即 <input> 
标记 的 类 型 为 button。 


EL 


图 18.24 提交 表单 后 禁用 “确定 ”按钮 
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图 设计 过 程 

创建 indexjsp 页 面 ， 在 <input> 添 加 提交 表单 后 禁用 此 按钮 的 方法 ， 关 键 代 码 如 下 : 

onclick="this.disabled=true: this forml.submitO:" 
国 秘笈 心 法 

在 onClick 单 击 鼠标 事件 中 ， 首 先 把 “确定 ”按钮 设置 为 可 用 ， 在 提交 表单 后 设置 其 disabled 值 为 tue， 即 
不 可 用 状态 。 


实例 492 we 


实用 指数 : 食 广 食 


图 实例 说 明 

在 开发 在 线 网 络 考试 系统 时 ， 当 考生 开始 填写 表单 的 时 间 到 达 时 限时 ， 程 序 会 自动 提交 表单 以 表示 考试 结 
束 。 运 行 本 实例 ， 在 考生 单 击 “ 开 始 考试 ” 超 链接 时 ， 表 示 考 试 开始 ， 当 剩余 时 间 为 0 时 ， 表 单 将 自动 提交 ， 
运行 结果 如 图 18.25 所 示 。 


这 择 题 30 分 利 会 时 间 3 秒 


、 单 选 题 (每 题 5 分 ) 
[0 明日 料 技 有 限 公司 成 立 名 年 ? 
1998 年 


图 18.25 ”自动 提交 表单 
图 关键 技术 


本 实例 主要 是 应 用 JavaScript 脚本 window 对 象 的 setTimeout0 方 法 。setTimeout0 方 法 的 作用 是 根据 设 定 的 
时 间 间 隔 执行 一 次 指定 的 表达 式 ， 语 法 如 下 : 

setTimeout( 表 达 式 , 延 时 时 间 [ 参 数 ]) 

延 时 时 间 是 以 毫秒 为 单位 的 〈 即 1000ms=ls) 。 
图 设计 过 程 

创建 index.jsp 页 面 ， 在 “开始 考试 ”添加 超 链接 的 onClick 鼠标 单 击 事件 并 调用 自 定义 的 JavaScript 函数 
Time res0， 关 键 代 码 如 下 : 

td height="28" align="1eft" valign="fop > 

选择 题 30 分 &nbsp:S&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 剩 余 时 间 : 

<font color="#FF0000" id="showtime"></font> 秒 <ltd> 

全 


function Time resO{ 


document.all.show.style.display="block": 
document all hidden.style.display—"none"; 


document forml sec_nums value=thistime-1: 
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var timer—window.setTimeout("Time res0"1000): 
ne 
</script> 
图 秘笈 心 法 
通过 循环 调用 setTimeout0 方 法 ， 可 以 实现 多 次 执行 指定 的 表达 式 ， 从 而 判断 用 户 的 用 时 是 否 已 经 达到 规定 
的 时 限 ， 如 果 达 到 指定 的 时 间 ， 则 调用 表单 的 submit0 方 法 来 提交 表单 内 容 。 


实例 493 


图 实例 说 明 

当 页 面 中 包含 很 多 表单 的 相关 元 素 时 ， 可 以 使 用 JavaScript 脚本 在 for 循环 语句 内 获取 表单 元 素 的 内 容 ， 并 
验证 表单 控件 元 素 是 否 为 空 值 。 运 行 本 实例 ， 当 用 户 提交 表单 时 ， 如 果 表 单 中 的 控件 元 素 为 空 字符 串 ， 则 弹出 
提示 对 话 框 ， 运 行 结 果 如 图 18.26 所 示 。 


明日 书籍 进货 系统 
目 籍 综 号 - NO1003440 
后 货 数量 - EE 
十 让 日 骨 人 a 


| 下 次 是 否 经 续 原 意 购买 明 | 
日 图 书 系列 


Ce 


18.26 通过 for 循环 获取 表单 中 元 素 的 值 


图 关键 技术 


本 实例 主要 是 通过 JavaScript 的 document 对 象 来 获取 表单 控件 元 素数 组 elements[] 的 值 ， 并 应 用 for 语句 来 
循环 元 素数 组 的 值 ， 再 应 用 证 条件 语 句 来 判断 各 表单 控件 元 素 的 值 是 否 为 空 ， 如 果 为 空 则 弹出 提示 对 话 框 。 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 文件 ， 在 页 面 添加 表单 并 设置 文本 框 的 属性 ， 关 键 代 码 如 下 : 


<tr align="1eft” bgcolor="#FFFFFF"> 
<td height="22" colspan="”4" align="center"> 明 日 书籍 退货 系统 </td> 
<t> 
<tr align="left" bgcolor="#FFFFFF"> 
<td width="183" height="22" align="1eft” > 书籍 编号 :</td> 
<td width="298" height="22" ><input name="fxt_snum" type="text” id="kxt_snum" title=" 才 状 笑 护 "></td> 
<tr> 
<tr align="left" bgcolor="#FFFFFF"> 
<td width="183" height="22" align="Ieft"> 退 货 数量 :</td> 
<td width="298" height="22" colspan="2" ><input name="txt_nums" type="text” id="txt_nmums" title=" 记 货 阁 鳃 "></td> 
<t> 
<tr align="1eft” bgcolor="#FFFFFF"> 
<td height="22" align="left'> 退 货 日 期 :</td> 
<td height="22" colspan="2” ><input name="hxt_date" type="text" id="txt_date” title=" 诅 货 归 秽 "></td> 
<t> 
<tr align="1eft” bgcolor="#FFFFFF"> 
<td height="22"align="left"> 下 次 是 否 继续 愿意 购买 明日 图 书 系列 :</td> 
<td height="22" colspan="2” ><input name="kxt_fig” type="radio” value="1” checked> 是 
<input type="7adio" name="txt fig" value="0"> 否 
<htd> 
<t> 
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(2) 编写 JavaScript 脚本 的 MycheckO 函 数 ， 用 于 实现 获取 表单 元 素 的 内 容 是 否 为 空 字符 串 ， 关 键 代码 


如 下 : 
<script language="javascript"> 
function Mycheck(form){ 
for(i=0;i<form length:i+ +){ 
if(form.elements[i].value—""){ 
alert(form elements[i] .title + "不 能 为 空 ");return false:} 
} 
} 
} 
</script> 


国 秘笈 心 法 
根据 本 实例 的 实现 ， 读 者 可 以 开发 物流 信息 网 站 中 的 货物 详细 信息 页 面 ， 还 可 以 开发 游戏 网 站 中 的 软件 下 
载 页 面 。 


实例 494 
实例 实用 指数 : 依依 食 


国 实例 说 明 
在 实际 应 用 中 ， 经 常会 遇 到 根据 用 户 填写 内 容 的 不 同 ， 将 表单 提交 到 不 同 的 处 理 页 。 运 行 本 实例 ， 根 据 在 
“提交 页 面 ”文本 框 中 输入 的 页 面 名 称 ， 将 表单 提交 到 相应 的 处 理 


页 ， 运 行 结果 如 图 18.27 所 示 。 二 
量 关键 技术 和 
本 实例 主要 通过 JavaSeript 来 设置 表单 的 action 属性 ， 然 后 调 全 全 
用 表单 的 submitO 提 交 方法 实现 自 定 义 提交 页 面 。 
| | 设计 过 程 18.27 ”可 以 提交 到 不 同 处 理 页 面 的 表单 


首先 创建 index.jsp 页 面 , 在 表单 “提交 页 面 ” 的 <inpuf> 标 记 中 使 用 onClick 事件 , 并 调用 自 定义 的 MyindexO 


函数 ， 关 键 代 码 如 下 : 
<script type="text/javascript"> 
function MyindexO{ 
Yar txt=document.form]1.txt_action.value; 
document.forml.action=txt 
document.forml.submitO: 
} 
</script> 
<input type="button” name="Submit” value=" 确 箔 "onClick="Myindex0:"> 


图 秘笈 心 法 
根据 本 实例 ， 读 者 可 以 开发 根据 文件 类 别 上 传 文件 的 页 面 ， 还 可 以 开发 根据 在 线 论坛 中 的 用 户 等 级 来 设置 
页 面 。 
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第 19 章 表格 的 操作 


19.1 应 用 JavaScript 操作 表格 


在 开发 网 页 时 经 常会 开发 动态 网 页 ， 有 些 数据 库 的 数据 是 常常 变动 的 ， 因 此 为 了 能 够 方便 对 表格 进行 随意 
修改 ， 就 需要 以 指定 的 行 数 和 列 数 动态 生成 或 删除 表格 。 本 节 将 介绍 如 何 应 用 JavaScript 操作 表格 。 


力 实例 说 明 

本 实例 是 在 页 面 中 的 行 数 和 列 数 文本 框 中 输入 指定 的 行 数 和 列 
数 ， 并 在 表 值 文本 框 中 输入 单元 格 中 的 内 容 ， 每 个 单元 格 中 的 内 容 是 
以 逗号 “, ” 隔 开 的 ， 单 击 “ 生 成 表格 ”按钮 ， 将 在 下 面 生 成 设计 好 的 
表格 。 当 预计 行 数 大 于 实际 行 数 时 ， 将 用 空 单元 格 补 位 ， 反 之 将 删除 
多 余 的 单元 格 ， 运 行 结果 如 图 19.1 所 示 。 


图 关键 技术 


本 实例 主要 是 把 表格 相关 属性 <table>、<tr>、<td> 标 记 所 生成 表 
格 的 代码 以 字符 串 的 形式 保存 起 来 , 并 用 层 的 innerHTML 属性 将 表格 
动态 生成 。 首 先 利用 自 定义 函数 table10 将 动态 生成 表格 的 首 行 设计 为 
表 头 ， 然 后 利用 自 定义 函数 tablevalue0 生 成 其 他 行 。 


使 用 parseInt0 方 法 返回 由 字符 串 转换 得 到 的 整数 ， 语 法 格式 如 下 : 


PparseInt(numString.[radix]) 
参数 说 明 
@ numString: 必 选 参数 ， 为 要 转换 数字 的 字符 串 。 


自 定义 表格 的 行列 
行 数 :5 列 数 ，4 


表 coLl,CoL2,COL3, COL4, RON1, RON2,RONS 上 
值 ,Row4,61,62,63,64,65,66,81,82， ~ 


COLL | GOD | COL3 | COL4 


ROW1 [ROW2 [ROW3 [ROW4 
Gl G2 G3 1G4 
G5 |66 HI En 
H3 


图 19.1 动态 制作 表格 


@ radix: 可 选 参数 。 在 2 一 36 之 间 的 表示 numString 所 保存 数字 的 进 制 的 值 。 如 果 没 有 提供 , 则 前 缀 为 '0x' 
的 字符 串 被 当 作 十 六 进 制 ， 前 缀 为 '0" 的 字符 串 被 当 作 八进制 。 所 有 其 他 字符 串 都 被 当 作 是 十 进 制 的 。 


图 设计 过 程 


(1) 创建 index.jsp 页 面 ， 在 页 面 中 添加 3 个 文本 框 并 设置 相应 的 属性 名 称 ， 关 键 代 码 如 下 : 


<form name="form]" method="Ppost” action=""> 
<table border="0" height="700" width="350" cellpadding="0" cell 


spacing="0” align="center"> 


<tr height="2096" align="center”" bgcolor="”><td colspan="3"> 自 定义 表格 的 行列 </td></tr> 


<tr bgcolor="bOc4de" height="596" ><Td colspan="3" >&nbsp:</Td></tr> 
<tr height="2096"> 


<td colspan="3" align="center > 行 数 :<input name="namel” type="text” style="width:40px” value="4">&nbsp;&nbsp;&nbsp:é&nbsp; 


列 数 ;<input name="name2" type="text” style="width:40px”" value="4"></td> 
</> 
<Tr height="2096"> 
<td style="font: bolder"> 表 值 : </td> 
<td> 
<textarea name="name3" wrap="VIRTUAL" style="width:300px "> 


COL1.COL2.COL3.COL4ROW1ROW2.ROW3.ROW4.G1.G2.G3.G4.G5.G6 


<ltextarea> 
</d> 
</T> 
<tr height="1596"> 
<Td colspan="3" align="center"> 
<input type="”button”" name"Submit3” value=" 竺 成 老 静 " 


‘onClick="tableclick(document.forml.namel.document.forml.name2.document.forml.name3)"> 
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</Td> 
</t> 
</table> 
<div id="aa" align="center" style="font-weight: bolder"></div> 
</form> 
(2) 利用 JavaScript 脚本 编写 用 于 实现 动态 制作 表格 的 关键 代码 如 下 : 
function tableclick(name1l,name2.name3){// 判 断 生 成 表格 的 条 件 是 否 正确 
Trow=namel.value: 
Teol=name2.value; 
Tv=name3.value; 
if (Tow—") | (Teo—=") | (Te—"){ 
alert(" 请 将 制作 表格 的 条 件 填写 完整 "); 


和 
else{// 将 输入 文本 框 中 的 行 和 列 数 转换 成 数字 
I=parseInt(Trow); 
c=parseInt(Teol); 
‘Tablel(r,c,TV); 
} 
} 
(3) 自 定义 tablevalue0 函 数 ， 用 于 生成 首 行 以 下 的 所 有 行 ， 关 键 代 码 如 下 : 
function tablevalue(a,ai,rows,col,str){ 
intl=alength: 
for (i=0;i<rows:++i){ 
for (=0j<col:++){ 


这 (G 一 0)&&(ai>=intD){ 
breaks 
1 
if (ai>=int]){ 
str=strt"<td scope='col’>&nbsp;</td>"; 
} 
else{ 
这 4 一 0){ 
Sstr=str+"<tr><th scope='col>&nbsp;"+(a[ait+])+"</th>"; 
Jelse{ 
if col-D{ 
str=str+"<td scope='col>&nbsp;"+(a[ait+])+"</td>"; 
} 
else{ 
str=str+"<td scope='col’>&nbsp;"+(a[ait+])+"</td>"; 
} 
} 
} 


. 
} 
(4) 自 定义 table10 函 数 ， 根 据 文 本 中 的 行 数 和 列 数 ， 生 成 表 的 首 行使 其 变 为 表 头 ， 关 键 代 码 如 下 : 
function tablel(row,col,Str){ 

Var str=""; 


a=new Array0; 
s=new String(Str1); 


ifcol<=intD){ 
str=str+"<table width-:300 border="4>"; 
for (i=0:i<col:++i){ 
if (=0){ 
str=str+"<tr><th scope=col>&enbsp:"+(a[ait+])+"</th>"; 


} 
elsef 
让 G 一 (coLD)f 
str=strt"<th scope='col>&nbsp:"+(a[ait+])+"</th></tr>"; 
Jelse{ 
str=str+"<th scope='col>&nbsp:"+(a[ait+])+"</th>"; 
} 
} 
} 
if (intl>coD{ 
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i ow>D{ 
str=tablevalue(a.ai.row-1,col,str); 
} 
} 
str=strt “</table>"; 
aa.innerHTML=str; 
} 
} 


国 秘笈 心 法 


在 判断 生成 表格 的 条 件 是 否 正确 时 ， 首 先 判断 在 行 数 、 列 数 和 表 值 3 个 文本 框 中 的 内 容 是 否 为 空 ， 如 果 为 
空 ， 则 用 alert0 方 法 弹出 提示 框 ， 然 后 再 用 parseInt0 方 法 将 文本 框 中 的 行 数 和 列 数 转 换 成 数字 。 在 表 值 中 是 以 
逗号 “, ”字符 来 分 隔 ， 自 动 生成 表格 中 的 内 容 使 用 了 split0 方 法 ， 它 是 将 一 个 字符 串 分 割 为 子 字符 串 ， 然 后 将 
结果 作为 字符 串 数组 返回 。 


9 实用 指数 ， 良 良友 


图 实例 说 明 

本 实例 主要 实现 了 在 表格 中 选中 一 个 单元 格 ， 在 单 击 “ 删 除 ” 按 钮 时 ， 将 删 
除 单元 格 所 在 的 行 ， 使 用 该 按钮 可 以 将 表格 中 的 行 全 部 删除 ,运行 结果 如 图 19.2 
所 示 。 


图 关键 技术 


本 实例 主要 应 用 单元 格 的 parentElement 属性 返回 到 表格 主体 ， 并 用 表格 主 过 中 更 出 了 的 行 ， 国 四 
体 的 removeChildGg) 方 法 删除 所 选中 单元 格 所 在 的 行 ， 参 数 表示 当前 单元 格 的 。 图 19.2 删除 表 中 的 生 
父 级 (TR)。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 和 一 个 “删除 ”按钮 并 设置 表格 的 i 名称， 关键 代码 如 下 : 
<t> 


<td id="txt_td13">Mr</td> 
<td id="txt_ td14">Mr</td> 
<td id="txt td15">Mr</td> 
<td id="txt_td16">Mr</td> 
<t> 
‘</table> 
<form name="form1" method="post" action=""> 
&nbspi&nbsp:&nbsp:&nbsp:&nbsp: 选 中 要 删除 的 行 ，<input name="Button1" type="button” id="Button1” value=" 山 翌 " onclick="removeRow0"> 
</form> 
(2) 利用 JavaScript 脚本 编写 自 定义 函数 select0， 用 于 实现 表 中 的 行 ， 关 键 代码 如 下 : 
‘<script language="javascript”> 
Var lastSelection = null 
/获取 选择 行 或 单元 格 的 参数 值 
function select(element) { 
Vare, Lc; 
if (element — nulD){ 
e= event.srcElement: 


} 
else { 
= element: 


} 
if (etagName — "TD"){ 


c=findCell(e): 
(c=nul) { 
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if (lastSelection (= null) { 


deselectRowOrCell(lastSelection): 
} 
selectRowOrCell(cj: 
lastSelection = c: 
} 
} 
window.event.cancelBubble = true: 


} 
tablel.onclick=select; 


(3) 编写 自 定义 findCell0 函 数 来 实现 查找 是 否 为 单元 格 ， 关 键 代码 如 下 : 
/查找 是 否 有 单元 格 
function findCell(e) { 
if (etagName —"TD") { 
Tetum e; 


} 
else if (e.tagName — "BODY") { 


Teturn null; 
ee 
return findCell(e.parentElement); 
} 
} 
(4) 编写 自 定义 selectRowOrCell0 函 数 ， 用 于 实现 改变 选 定 行 或 单元 格 的 背景 颜色 ， 关 键 代 码 如 下 : 
/选择 行 或 单元 格 


function selectRowOrCell(r) { 
rruntimeStyle.backgroundColor="darkblue"; 
rruntimeStyle.color="white"; 
} 
(5) 编写 自 定义 removeRow0 函 数 ， 用 于 实现 删除 单元 格 所 在 的 行 ， 关 键 代码 如 下 : 
/删除 表 中 的 行 
function removeRowO{ 
VarT, p, nr; 
if (lastSelection—null) 
Teturn false; 
r= lastSelection; 
if (rtagName—"TD") { 
r=r.parentElement: 
} 
p=r.parentElement; 
alert(p.tagName); 
Pp.removeChild(r); 
lastSelection=null: 
Tetumr; 
} 
</script> 


图 秘笈 心 法 

本 实例 中 用 到 的 parsentElement 属性 就 是 父 对 象 ， 如 td 的 parsentElement 就 是 tt，tr 的 parsentElement 就 是 
tbody， 而 这 种 方式 只 针对 正 。 如 果 要 在 其 他 浏览 器 上 使 用 就 要 使 用 parsentNode， 它 可 以 兼容 多 个 浏览 器 并 且 
可 以 代替 parentElement 的 所 有 功能 。 


实例 497 人 | 
实用 指数 : 福全 食 


国 实例 说 明 


本 实例 对 表格 中 的 每 一 行 每 一 列 都 使 用 “插入 行 ”和 “插入 列 ” 按 钮 来 完成 。 当 插入 多 行 以 后 ， 再 插入 列 
时 ， 每 一 列 中 的 行 数 与 插入 后 的 行 数 相同 ， 反 之 也 一 样 ， 程 序 的 运行 结果 如 图 19.3 所 示 。 
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本 [到 到 
[3] 
表格 内 容 团 日 科技 
用 日 ”用 晶 科技 用 日 科技 用 科技 阴 日 科 技 阴 旧 科 技 
明日 科技 轩 昌 科技 用 昌 科 技 用 日 科技 朋 日 科技 明日 科技 
用 日 科技 阴 晶 科技 用 日 科 技 朋 昌 科技 胃 日 科技 明日 科 技 
用 日 科技 阴 昌 科技 用 旧 科技 用 昌 科技 卫 日 科技 明日 科技 
用 日 科技 用 日 科技 有 日 科 技 用 日 科技 朋 日 科技 明日 科技 


19.3 动态 添加 行 或 列 


图 关键 技术 


本 实例 应 用 了 表格 的 insertRow(n) 方 法 ， 此 方法 是 在 表格 的 尾部 添加 行 ， 参数 n 表示 当前 表格 的 行 数 。 在 为 
表格 添加 列 时 , 实际 上 是 以 表格 的 行 数 为 最 大 值 , 用 表格 的 rows[] 的 insertCelln) 方 法 向 每 行 的 尾部 添加 单元 格 ， 


参数 i 表示 行 数 ，n 表示 当前 表格 的 最 大 列 数 ， 用 表格 的 rowi] 的 cellsm] 的 innerText 属性 来 动态 为 各 单元 格 中 
添加 指定 的 文本 ，i 表示 指定 的 行 ，n 表示 指定 行 中 的 第 几 个 单元 格 。 

insertRow() 方 法 的 语法 如 下 : 

tableobject.insertRow(index) 


返回 值 ， 是 一 个 tableRow， 表 示 插 入 的 行 。 
图 设计 过 程 


(1) 创建 index.jsp 页 面 ， 在 页 面 中 添加 4 个 相应 按钮 并 设置 其 相应 属性 ， 关 键 代码 如 下 : 
<table cellpadding="0" cellspacing="0" border="0" align="center” bgcolor="d3d3d3"> 
<Tr valign="bottom" ><td> 
<input type="button” value=" 谢 入 地 " onclick="insertrowO"> &nbsp; 
<input type="button” value=" 谢 入 7" onclick="insertcell0"> 
</td></Tr> 
<Tr><td> 
<input type="button” value=" 柚 愉 厅 ' onclick="deleterow0"> &nbsp; 
<input type="button” value=" 柚 除 烈 ' onclick="deletecell0"> 
</td></Tr> 
<tr bgcolor="#FFFFFF"> 
<td> 表 格 内 容 
<input name="text] "Width="40px" size="5" value="Mr_pro”> </td></tr> 
</table> 
<table id="tt" cellpadding=0 cellspacing=0 border="]" align="center”> 
<tr><td> 明 日 <td></tr> 
</table> 


(2) 利用 JavaScript 脚本 ， 编 写实 现 手动 插入 或 删除 表格 行 或 列 ， 自 定义 插入 行 insertrow0O 函 数 ， 应 用 于 
在 已 有 单元 格 的 后 面 插入 行 ， 关 键 代码 如 下 : 


<script language="JavaScript”> 


function insertrowO{ 

textl.value—""?str=" ":str=text1.value; 

var n=tt.rows.length:; 1/ 行 长 度 

tt.insertRow(n); /插入 一 行 

for (i=0;i<=tt.rows(0).cells.length-1;i++){ 
ttrows[n].insertCell(i); // 在 插入 的 行 中 插入 单元 格 
ttrows[n].cells[i].innerText=str; // 放 入 Text 

}} 

(3) 自 定义 插入 列 insertcell0 函 数 ， 应 用 于 在 已 有 单元 格 的 后 面 插入 列 ， 关 键 代 码 如 下 : 

function insertcellO{ 

textl value 一 ""?str=" ":str—textl.value; 

var n=tt.rows[0].cells.length; /0 行 的 单元 格 长 度 

for (i=0:i<=tt.rows.length-1:i++){ 
tt.rows[i].insertCell(n): /在 某 行 中 插入 单元 格 
tt.rows[i].cells[n].innerText=str; // 放 入 Text 

} 

} 


(4) 自 定义 删除 行 deleterow0 函 数 ， 应 用 于 从 表 的 下 边 开始 向 上 删除 行 ， 自 定义 删除 列 deletecell0 函 数 ， 
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从 表 的 右边 开始 向 左边 删除 列 ， 关 键 代码 如 下 : 


function deleterowO{ 
var n=tt.rows.length; /人 长度 
if 一 1) return: 
tt.deleteRow(n-1): /删除 某 一 行 
} 
function deletecellO{ 
var n=tt.rows[0].cells.length; 。 /0 行 的 单元 格 长 度 
in 一 1) return: 
for (=0:i<=ttrows.length-l:i+H){ 
ttrows[i].deleteCelln-1): V// 副 除 某 行 的 某 一 单元 格 
} 
} 
‘</script> 


国 秘笈 心 法 


本 实例 中 在 单元 格 插入 行 和 列 时 ， 都 用 到 一 个 innerText 方法 ， 它 是 从 起 始 位 置 到 终止 位 置 的 内 容 《〈 只 对 于 
正 浏览 器 )， 如 果 要 在 其 他 浏览 器 上 使 用 就 要 用 到 innerHTML，innerHTML 是 符合 W3C 的 标准 属性 。 


实 初级 
实例 4 实用 指数 : 友 友 去 
图 实例 说 明 


本 实例 是 把 指定 列 中 连续 相同 的 单元 格 进行 合并 , 这 样 可 以 使 表格 更 加 清晰 
明了 ， 方 便 用 户 浏览 阅读 ， 程 序 的 运行 结果 如 图 19.4 所 示 。 


图 关键 技术 


本 实例 主要 使 用 表格 中 的 rows 的 length 属性 来 获得 表格 的 总 行 数 ， 在 用 表 
格 中 的 rows[nrow] 数 组 的 cell[ncol] 数 组 的 innerText 属性 来 获取 表格 中 行 的 指定 
单元 格 的 内 容 ， 并 判断 纵向 单元 格 是 否 相 同 ， 如 果 相同 ， 则 使 用 表格 的 row 目的 
deleteCelltncol) 方 法 ， 将 连续 相同 的 列 中 的 单元 格 删除 。 


设计 过 程 图 19.4 合并 单元 格 效果 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 和 按钮 ， 关 键 代码 如 下 : 


<table id="tablel” width="1496" cellpadding="1” bordercolor="#000000" bgcolor="#000000"> 
<tr bgcolor="#FFFFFF"> 
<td width="40%">cellA</td> 
<td width="60%">1</td> 
</t> 
<tr bgcolor="#FFFFFF"> 
<td width="40%">cellA</td> 
<td width="60%">2</td> 
<t> 
<input type="button" value=" 耸 浊 漠 元 靛 " onclick="merge0"> 
(2) 使 用 JavaScript 编写 实现 合并 单元 格 ， 关 键 代 码 如 下 : 
<input type="button" value=" 耸 浊 漠 元 租 " onclick="merge0"> 
‘<script language="javascript”> 
function mergeO{ 
Var rows=tablel .rows; 
var nrow—0.nlastrow: 
Var ncol=0; 
while(nrow<rows.length){ 
nlastrow=nrow++: 
while(nrow<rows.length &-é&: rows[nlastrow].cells[ncol].innerText—rows[nrow].cells[ncol].innerText) 
Dow++; 
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if(nrow-nlastrow>1){ 
for(var i=nlastrow+1:;i<nrow:i++){rows[i]. > 3 
rows[nlastrow].cells[ncol] rowSpan=nrow-nlastror 
} 
} 
} 
/script> 


国 秘笈 心 法 


在 实现 合并 单元 格 时 ， 应 用 了 while0 语 句 来 具体 判断 将 后 一 个 单元 格 添加 到 要 合并 的 单元 格 中 ， 然 后 再 使 
用 for0 循 环 语句 把 添加 后 的 单元 格 使 用 自 定义 JavaScript 脚本 函数 deleteCell0 删 除 。 


ms 初级 
实例 499 初 
实用 指数 : 食 食 食 

实例 说 明 
在 表格 中 添加 行 ， 实 际 上 就 是 在 表格 的 下 面 动态 添加 单元 格 ， 并 在 刚 

添加 的 单元 格 处 添加 信息 ， 程 序 的 运行 结果 如 图 19.5 所 示 。 性 本 
关键 技术 弟 北 地 区 123W 家 97w 家 | 
本 实例 主要 使 用 document 对 象 的 createElement("tr") 方 法 创建 表格 的 | [CS 入 


行 的 节点 ， 再 应 用 document 对 象 的 createElement("td") 方 法 在 创建 行 中 创 19.5 “在 表格 中 添加 行 及 单元 格 
建 一 个 单元 格 节点 , 并 用 <td> 标 记 的 insertBefore(textnull) 方 法 向 已 创建 的 
单元 格 中 添加 信息 ， 用 <tr> 标 记 的 insertBefore(nc.c) 方 法 添加 单元 格 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 表格 及 两 个 按钮 ， 并 设置 表格 的 相关 属性 ， 关 键 代码 如 下 : 
<tr> 


<td id="cel17 必 华北 地 区 </td> 
<td id="cel18">12.3W 家 </td> 
<td id="cell9'>9.7W 家 </td> 
<tr> 
</table> 
<form name="form1” method="post" action=""> 
<input name="Button1" type="button” id="Button1" value=" 效 加 ff7" onclick="addRow0"> 
<input name="Button2" type="button" id="Button2” value=" 北 加 觉 元 静 " onclick="addCell0"> 
</form> 
(2) 使 用 JavaScript 脚本 编写 对 表格 添加 行 和 单元 格 ， 使 用 自 定义 函数 addRow0 为 表格 添加 行 ， 关 键 代码 
如 下 : 
// 为 表格 添加 行 
function addRowO { 
Varr p. nr; 
if (lastSelection—null) {r=null:p=tablel.children[0]:} 
else { 
r= lastSelection: 
if (rtagName—"TD") {r=r.parentElement:} 
p=r.parentElement: 


nr = document.createElement("TR"): 
PinsertBefore(nr, 1): 
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(3) 自 定义 函数 addCell0， 用 于 在 新 添加 行 的 位 置 插入 一 个 单元 格 ， 关 键 代码 如 下 : 


/在 添加 的 行 中 插入 一 个 单元 格 
function addCellO{ 

varr p, c nc, text; 

if (lastSelection — null) return false; 
r= lastSelection: 

if (rtagName 一 "TD") {r=r.parentElement:c = lastSelection:} 
else {c =null:} 

nc = document.createElement("TD"); 
text = document.createTextNode("t_t"): 
nc.insertBefore(text, null); 
LinsertBefore(nc, ¢); 

select(nc):; 

return nc; 


} 
本 实例 用 到 的 其 他 自 定义 函数 在 上 述 范例 中 都 有 详细 说 明 ， 为 了 节省 空间 这 里 不 再 重复 介绍 。 


图 秘笈 心 法 


在 实现 本 实例 时 ， 在 JavaScript 的 函数 中 用 到 了 tagName 属性 以 及 parentElement 属性 。tagName 属性 可 以 
返回 当前 对 象 的 类 型 字符 串 ， 如 当前 对 象 为 <TD> 标 签 ， 那 么 调用 tagName 返回 值 就 是 TD; parentElement 属性 
用 于 返回 当前 对 象 表示 的 标签 的 父 标签 ， 如 当前 对 象 为 <TD> 标 签 ， 那 么 调用 parentElement 属性 返回 的 就 是 表 


示 <TR> 标 签 的 对 象 。 
实例 500 


图 实例 说 明 


本 实例 是 用 鼠标 选中 表 中 的 单元 格 ， 然 后 单 击 “ 删 除 ” 按 钮 ， 将 删除 表 中 
的 单元 格 ， 后 面 的 单元 格 将 向 前 移 位 ， 移 到 刚刚 删除 的 单元 格 位 置 ， 运行 结 果 
如 图 19.6 所 示 。 


图 关键 技术 


本 实例 主要 使 用 <td> 标 记 的 parentElement 属性 来 获得 父 级 标记 <tr>, 再 使 
用 <tr> 标 记 的 removeChild(c) 方 法 将 选中 的 单元 格 删除 。 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 文件 ， 在 页 面 添加 表格 及 按钮 ， 关 键 代 码 如 下 : 


<tr> 
<td id="cel17 必 单元 格 7</td> 
<td id= "cel18 必 单元 格 8</td> 
<td id="cel19 吃 单元 格 9</td> 
<ltr> 
‘</table> 
<form name="form1" method="post”" action=""> 
<input name="Button1" type="button" id="Button1" value=" 德 翌 " onclick="removeCell0"> 
</form> 


单元 格 1 单元 格 2 单元 格 3 
单元 格 4 单元 格 5 单元 格 6 


单元 格 7 单元 格 9 


辆 J 
图 19.6 删除 表 中 的 单元 格 


(2) 使 用 JavaScript 脚本 编写 删除 表 中 的 单元 格 ， 自 定义 函数 removeCell0， 关 键 代码 如 下 : 


/删除 表 中 的 单元 格 
function removeCellO{ 


if (ctagName !="TD") { return null } 
p=c.parentElement: 
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PremoveChild(c): 
lastSelection = null; 
Tetum c: 

} 

</script> 


图 秘笈 心 法 


在 核心 JavaScript 中 有 一 个 操作 DOM 节点 的 方法 就 是 removeChild0， 简 单 地 说 是 实现 移 除 指定 的 子 节点 ， 
我 们 可 以 先 去 找到 要 删除 节点 的 父 节点 ， 然 后 在 父 节点 中 运用 removeChild0 方 法 移 除 子 节点 。 


实例 501 | 
实用 指数 : 去 丰 宙 


图 实例 说 明 
本 实例 实现 了 在 表格 中 以 由 下 向 上 的 顺序 依次 删除 单元 格 ， 当 单 击 “拆除 ”按钮 时 ， 表 格 的 最 底层 一 行将 
全 部 被 删除 ， 再 次 重复 单 击 “ 拆 除 ” 按 钮 ， 这 时 原来 倒数 第 二 行 的 单元 格 变 为 最 后 一 层 ， 则 被 删除 ， 程 序 的 运 


行 结 果 如 图 19.7 和 图 19.8 所 示 。 


19.7 单 击 “拆除 ”按钮 之 前 图 19.8 单 击 “ 拆 除 ” 按 钮 之 后 


图 关键 技术 

本 实例 主要 使 用 JavaScript 脚本 语言 ， 在 自 定 义 函 数 deleterow0 中 自 定义 了 一 个 变量 n， 并 用 行 长 度 值 赋值 
给 此 变量 ， 获 取 行 长 度 的 方法 如 下 : 

tt.rows.length 


其 中 ，tt 为 表格 的 id 名 称 ，rows.length 为 表格 的 行 长 度 。 
图 设计 过 程 
(1) 创建 index.jsp 页 面 文件 ， 在 页 面 中 添加 表格 并 设置 表格 的 id 名 称 及 其 属性 ， 关 键 代码 如 下 : 


<table id="tt" cellpadding="0" cellspacing="0" border="]" align="center” bgcolor="#8b4513"> 
<tr bgcolor="WN" > 
<Td> 楼 层 6</Td> 
<ltr> 
<trbgcolor=" 贡 > 
<Td> 楼 层 5</Td> 


<tr bgcolor="WIN "> 
<Td> 地 下 室 </Td> 
<Td> 停 车 场 </Td> 
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<Td> 空 地 </Td> 
<t> 
</table> 


<p align="center"><input type="button” value=" 原 翌 " onclick="deleterow0" /></p> 
(2) 使 用 JavaScript 脚本 编写 实现 由 下 向 上 依次 删除 表格 中 的 单元 格 效果 ， 自 定义 函数 deleterow0， 关 键 
代码 如 下 : 
‘<script type="text/javascript"> 
function deleterowO{ 


国 秘笈 心 法 


本 实例 中 ， 在 “拆除 ”按钮 的 <input> 标 记 中 使 用 了 onClick 鼠标 单 击 事件 ， 当 单 击 “ 拆 除 ” 按 钮 后 ， 调 用 
了 自 定义 函数 deleterow0 方 法 。 所谓 onClick 事件 ,就 是 在 用 户 单 击 鼠 标 左 键 时 发 生 (如 果 单 击 鼠 标 右键 则 不 会 
发 生 )， 当 用 户 的 焦点 在 按钮 上 ， 并 按 了 Enter 键 ， 同 样 会 触发 这 个 事件 。 


图 实例 说 明 


本 实例 将 介绍 如 何在 原 有 表格 基础 上 , 实现 在 表格 的 右 侧 动态 添加 列 。 运 
行 本 实例 ， 单 击 “ 添 加 ”按钮 时 ， 则 会 在 表格 单元 格 所 在 行 尾 自动 插入 一 个 单 
元 格 ， 程 序 的 运行 结果 如 图 19.9 所 示 。 


图 关键 技术 19.9 在 表格 的 右 侧 添加 列 


本 实例 主要 使 用 JavaScript 脚本 , 首先 获取 表格 行 的 单元 格 长 度 , 再 使 用 for 语句 来 循环 行 的 最 后 一 个 元 素 ， 
此 时 再 执行 insertCell(n) 方 法 。 

获取 表格 的 行 中 单元 格 个 数 的 语法 格式 如 下 : 

tt.rows[0].cells.length 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 文件 ， 在 此 页 面 中 添加 表格 并 设置 id 名 称 及 相关 属性 ， 关 键 代码 如 下 ; 


<Td><input type="button" value=" 话 加 " onclick="insertcell0" /></Td> 
<td><input value=" 浇 元 静 "name="text]" size="5" /></td> 
</Tr></table> 

‘<table id="tt" cellpadding="0" cellspacing="0" border="1 > 
<Tr> 


<td> 明 日 </td> 
</Tr> 
<I> 

<td> 科 技 </td> 


EE 
格 单 元 格 


明日 单元 
科技 单元 格 单元 格 单元 格 


</table> 
(2) 使 用 JavaScript 脚本 编写 实现 在 表格 内 的 单元 格 插入 列 的 函数 insertCel0， 用 于 在 单元 格 的 后 面 插入 


列 ， 关 键 代码 如 下 : 
<script type="textjavascript"> 
function insertcellO{ 
textl.value—""?str=" ":str—text1.value:; 
var n=ttrows[0].cells.length:; /0 行 的 单元 格 长 度 
for (i=0:i<=tt.rows length-L:i++){ 
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tt.rows[i].insertCell(n); /在 某 行 中 插入 单元 格 
tt.rows[i].cells[n].innerText=str; // 放 入 Text 

} 

} 

</script> 


国 秘笈 心 法 
在 JavaScript 中 ，innerText 属性 用 于 动态 修改 HTML 标签 的 内 容 ， 应 用 它 可 以 使 代码 更 加 简洁 。 另 外 ， 使 
用 innerText 会 自动 将 小 于 号 、 大 于 号 、 引 号 和 & 符 号 写 进 HTML 编码 。 


实例 503 


图 实例 说 明 
在 页 面 显 示 大 量 数据 时 ， 对 于 已 查 出 并 显示 在 页 面 上 的 信息 来 说 ， 删 除 一 列 或 所 有 列 的 功能 会 十 分 有 用 。 
运行 本 实例 ， 当 单 击 “ 删 除 列 ”按钮 时 ， 表 格 的 最 后 一 列 将 被 删除 ,程序 的 运行 结果 如 图 19.10 和 图 19.11 所 示 。 


JavaWeb 视 频 学 。 Java 自学 手册 。 JavaWeb 开 发 实战 宝 奥 Javat 往 程 思想 JavaSeqipt 开 发 技术 大 全 DavaWeb 视 频 学 。 [ava 自 学 手册 。 ”|JavaWeb 开 发 实战 宝典 java 六 程 思想 | 
0 入 术 开 发 大 全 “Ch 视频 学 。 ”Cs 典范 例 [CR 得 思想 5 所 床 系统 开发 C5 术 开 发 大 全 Ca 视频 学 C3 经 奥 范 例 各 思想 | 
Tenate 不 入 浅 出 stmto 的 吾 合 开发 明日 编程 词典 大 全 “Is Hbemats 宁 入 浅 吓 Struts 攻 9 全 开发 用 日 编程 洞山 天 全 
[2 [WT 
图 19.10 ”删除 表格 的 列 之 前 图 19.11 单 击 “删除 列 ” 按 钮 之 后 


本 实例 主要 应 用 JavaScript 自 定义 函数 deletecell0， 首 先 定义 一 个 变量 n， 然 后 把 行 的 单元 格 的 长 度 赋值 给 
此 变量 ,使 用 站 条 件 判断 语句 ， 如 果 变 量 n 等 于 1， 则 返回 。 最 后 使 用 for 语句 循环 输出 row[i 中 所 有 行 单元 格 
的 长 度 ， 再 调用 此 自 定义 函数 deletecell0 减 1， 每 执行 一 次 便 删除 行 尾 处 单元 格 的 列 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 文件 ， 在 页 面 添加 一 个 表格 并 设置 ad 名 称 及 其 相关 属性 ， 关 键 代码 如 下 : 


<table border="]" cellpadding="0" cellspacing="0"id="tt"align="center"bgcolor="#6495ed 

<tr bgcolor="#FFFFFF"> 
<td>JavaWeb 视频 学 </td> 
<td>Java 自学 手册 </td> 
<td>JavaWeb 开发 实战 宝典 </td> 
<td>java 编程 思想 </td> 
<td>JavaScript 开发 技术 大 全 </td> 

</tr> 
<tr bgcolor="#FFFFFF"> 
<td>C# 技 术 开发 大 全 </td> 
<td>C# 视 频 学 </td> 
<td>C# 经 典范 例 </td> 
<td>C# 编 程 思 想 </td> 
<td>C# 数 据 库 系统 开发 </td> 


<tr bgcolor="#FFFFFF"> 
<td>Hibemate 深入 浅 出 </td> 
<td>Stmuts2 的 整合 开发 </td> 
<td> 明 日 编程 词典 大 全 </td> 
</tr> 
</table> 
<p align="center"><input type="button” value=" 项 详 7" onclick="deletecell0" /></p> 
(2) 使 用 JavaScript 脚本 实现 删除 表格 一 列 的 效果 ， 并 在 <input> 标 记 中 调用 此 函数 ， 关 键 代码 如 下 : 
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<script type="text/javascript” > 

function deletecellO{ 
var n-ttrows[0].cells.length: 。“” //0 行 的 单元 格 长 度 
ifo 一 1) return: 
for (i=0:i<=tt rows.length-1:i++){ 

ttrows[i].deleteCelln-D): /删除 某 行 的 某 一 单元 格 

} 
</script> 


国 秘笈 心 法 


本 实例 使 用 了 row[0].cells.length， 它 表示 表格 的 行 的 单元 格 个 数 ， 再 进行 循环 条 件 ttrows.length-1， 就 是 要 
把 0 行 删除 ， 找 到 第 一 个 单元 格 ，length 默认 是 0 到 最 大 值 。 


初级 
实用 指数 : 走廊 页 
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国 实例 说 明 


在 开发 网 站 时 ， 要 求 表格 具有 灵活 性 ， 使 用 户 可 随意 添加 表格 行 是 十 分 常见 的 。 运 行 本 实例 ， 当 加 载 完 页 
面 时 ， 单 击 “ 添 加 ”按钮 ， 在 已 有 “明日 科技 ”单元 格 下 面 将 自动 插入 一 行 单 元 格 ， 程 序 的 运行 结果 如 图 19.12 
和 图 19.13 所 示 。 


明日 科技 
图 19.12 未 插入 行 之 前 图 19.13 单 击 “ 添 加 ”按钮 之 后 


图 关键 技术 

本 实例 主要 应 用 JavaScript 脚本 ， 首 先 获取 行 的 长 度 并 赋值 给 自 定义 变量 n， 然 后 调用 tt.insertRow(n) 插 
入 一 行 ， 使 用 for 语句 循环 输出 所 有 单元 格 的 行 ， 并 在 要 插入 行 的 位 置 插入 单元 格 ， 最 后 把 rows[n] 数 组 放 在 
innerText 中 。 
图 设计 过 程 


(1) 创建 index.jsp 页 面 文 件 ， 在 页 面 中 添加 表格 及 其 id 名 称 属性 ， 关 键 代码 如 下 : 
<div><input type="button" value=" 上 证 加 " onclick="insertrow0” /></div> 

<input type="text” id="text1” value=" 灌 元 7" size="5"/> 
<table border="]" cellpadding="0" cellspacing="0" id="tt"> 


<Td> 明 日 科技 </Td> 


</table> 


(2) 使 用 JavaScript 脚本 ， 自 定义 函数 insertrowO 实 现在 已 有 单元 格 的 下 面 插入 行 ， 关 键 代码 如 下 : 

<script language="JavaScript”> 

function insertrowO{ 

textl.value—""?str=" ":str=text].value; 

var n=ttrows.length; 1/ 行 长 度 

tt.insertRow(n); /插入 一 行 

for (i=0:i<=tt.rows(0).cells.length-1:i++){ 
ttrows[n].insertCell(i): /在 插入 的 行 中 插入 单元 格 
ttrows[n].cells[i].innerText=str: 。 // 放 入 Text 

} 

‘</script> 
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国 秘笈 心 法 
在 已 有 单元 格 下 面 插入 行 主要 是 把 单元 格 先 保存 在 一 个 数组 当中 ， 封 装 以 后 对 其 内 的 所 有 元 素 进行 循环 。 


19.2 ”对 单元 格 进行 控制 


图 实例 说 明 
在 页 面 上 浏览 表格 中 的 数据 时 ,有 时 会 忘记 看 到 了 哪 条 数据 , 这 时 就 应 该 _ 
用 鼠标 选中 已 读 取 到 的 数据 并 改变 表格 中 单元 格 的 背景 颜色 , 以 提示 浏览 者 数 En 


25W 尊 


据 的 位 置 ， 方 便 以 后 继续 读 取 ， 程 序 的 运行 结果 如 图 19.14 所 示 。 i 
图 关键 技术 19.14 已 被 单 击 单元 格 


本 实例 主要 应 用 了 在 表格 的 onClick 单 击 事件 的 event 对 象 中 的 srcElement 属性 来 获取 发 生 事件 的 文档 元 素 ， 
并 将 其 保存 在 自 定 义 变量 ee 中， 使 用 etagName0 来 判断 发 生 事件 的 文档 元 素 是 否 在 表格 的 单元 格 上 ， 并 用 变量 
e 中 的 runtimeStyle 样式 中 的 color 和 backgroundColor 属性 来 改变 当前 选中 单元 格 的 前 景色 和 背景 色 。window 
对 象 的 lastSelection 属性 用 于 获取 最 后 一 次 选中 的 单元 格 焦点 。 


轩 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 ， 关 键 代码 如 下 


<table id="table1" border="0" cellpadding="1" cellspacing="1" 
bordercolor="#000000" bgcolor="#000000" align="center”> 
<tr bgcolor="#FFFFFF"> 
<td> 年 份 <td> 
<td> 产 品名 称 </td> 
<td> 是 否 出 口 </td> 
<Td> 总 计 销量 </Td> 
<tr> 
<tr bgcolor="#FFFFFF"> 
<td>2000 年 </td> 
<td> 张 裕 葡 萄 酒 </td> 
<td> 已 出 口 </td> 
<td>25W 瓶 </td> 
<t> 
<tr bgcolor="#FFFFFF"> 
<td>2002 年 </td> 
<td> 通 化 葡萄 酒 </td> 


</table> 


(2) 利用 JavaScript 脚本 编写 实现 选中 单元 格 用 自 定义 函数 来 保存 发 生 事件 的 文档 元 素 信息 ， 关 键 代 码 

如 下 : 

‘<script language="javascript"> 

Var lastSelection = null 

function select(element) { 

(element 一 maul)fe 二 event rcielement;}/ 获 取 body 元 素 的 原始 记录 

lse { €=element: } 

if (etagName — "TD"){ 
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c=findCell(e); 
if(c =nul) { 
if (lastSelection 一 5 {deselectRowOrCell(window.lastSelection):} 


window.event.cancelBubble =true; 。 ”// 取 消 冒 泡 语 句 ， 用 于 防止 向 下 一 个 外 层 对 象 冒 泡 


上 

tablel.onclick=select: 

function findCell(e) { 

if(e.tagName — "TD") { 
return e; 


} 
else if (e.tagName — "BODY") { 


return null; 
} 
else{ 
return findCell(e.parentElement); 
} 
} 


function selectRowOrCell(r) { 
rruntimeStyle.backgroundColor="darkblue"; 
rruntimeStyle.color="white"; 

} 

function deselectRowOrCell(r) { 
rruntimeStyle.backgroundColor = ""; 
rruntimeStyle.color = ""; 

}</script> 


图 秘笈 心 法 
本 实例 应 用 了 冒 泡 语句 来 防止 向 下 一 个 外 层 对 象 冒 泡 ， 如 果 事件 是 起 泡 类 型 ， 想 停止 起 泡 只 有 调用 stop 
Propagation() 方 法 才能 停止 。 


实例 506 


实用 指 就: 支 去 走 ， 


图 实例 说 明 
本 实例 主要 在 单元 格 获得 焦点 后 ， 通 过 页 面 中 的 两 个 按钮 来 使 单元 格 的 信息 可 以 左右 移动 ， 在 信息 移动 到 
最 左边 或 最 右边 时 则 无 法 再 移动 ， 程 序 的 运行 结果 如 图 19.15 和 图 19.16 所 示 。 


单元 格 左 移 “|| 单元 格 右 移 


HTML 与 CSS 语 法 辞典 
深入 浅 出 xml 
重 构架 代码 环境 


图 19.15 单元 格 被 选中 时 图 19.16 移动 到 最 右边 的 效果 


图 关键 技术 


本 实例 主要 是 利用 event 对 象 的 srcElement 属性 获取 发 生 事件 的 文档 元 素 ， 并 将 其 数据 内 容 保存 在 变量 c 
中 ， 在 移动 单元 格 信息 之 前 ， 先 使 用 ctagName 来 判断 当前 焦点 的 标签 名 是 否 为 td (单元 格 的 标记 )， 当 为 td 
时 ,说 明 表格 中 的 单元 格 获得 了 焦点 ， 再 使 用 cpreviousSibling 或 c.nextSibling 来 获取 当前 单元 格 同一 行 的 前 一 
个 或 下 一 个 单元 格 的 位 置 ， 并 将 其 保存 在 ls 变量 中 ， 再 用 1s.parentElement 来 返回 当前 位 置 的 上 一 级 〈 即 tr)。 
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设计 过 程 
(1) 创建 index.jsp 页 面 ， 在 页 面 添加 一 个 表格 和 两 个 按钮 ， 并 在 自 定义 函数 中 调用 moveLeftO 和 


moveRight()， 关 键 代码 如 下 : 


<form name="form1”" method="post” action=""> 
<table align="center "><tr><td> 
<input name="Butfon1" type="button" id="Button1" value=" 沉 元 和 衣 左 瑚 " onclick="moveLeft0"> 
<input name="Button2” type="button”" id="Button2" value=" 党 元 静 厂 戎 " onclick="moveRight0 
> 
<td></tr></table> 
</form> 
<trbgcolor= "FFFFFF" align="center" > 
<td>HTML 与 CSS 语法 辞典 </td> 
<td>20000 册 </td> 
<td>30000 册 </td> 
</tr> 
<tr bgcolor="#FFFFFF" align="center”> 
<td> 深 入 浅 出 xml</td> 
<td>35000 册 </td> 
<td>40000 册 </td> 
<t> 
<tr bgcolor="#FFFFFF" align="center”> 
<td> 重 构架 代码 环境 </td> 
<td>55000 册 </td> 
<td>40000 册 </td> 
<tr> 
(2) 编写 JavaScript 脚本 自 定义 select0 函 数 用 来 保存 发 生 事件 的 文档 元 素 信 
<script language="javascript"> 
Var lastSelection = null; 
// 获 取 选 择 行 或 单元 格 的 参数 值 
function select(element) { 
Var e, I, ci 
if (element — null){e = window.event.srcElement:} 
else { e=element; } 
if(e.tagName — "TD") { 
c=findCell(e); 
if(c!=nulD) { 
if (lastSelection != null) {deselectRowOrCell(lastSelection):} 
selectRowOrCell(c); 
lastSelection = ¢; 


\， 关 键 代码 如 下 : 


} 
L 
window.event.cancelBubble = true;} 
tablel.onclick=select:; 


(3) 自 定义 moveLeft0 函 数 ， 用 于 将 当前 单元 格 的 内 容 向 左 移动 ， 关 键 代 码 如 下 : 
// 单 元 格 向 左 移 
function moveLeftO { 
Var c. p, 1s: 
if (lastSelection 一 nu) 
return false: 

c= lastSelection; 
if (c.tagName !="TD") { 

return null; 
} 
1s = c.previousSibling; 
ifds 一 nul) 

Tetum null: 
p=1s.parentElement: 
PinsertBefore(c. 1s); 
return c: 
} 

(4) 自 定义 moveRight0 函 数 ， 用 于 将 当前 单元 格 的 信息 向 右 移动 ， 关 键 代 码 如 下 : 

/| 单元 格 向 右 移 
function moveRightO { 
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c= lastSelection; 


return null; 


图 秘笈 心 法 
应 用 insetBefore( 方 法 可 以 将 当前 节点 插入 到 指定 节点 之 前 ， 使 单元 格 的 内 容 向 左 或 向 右 移动 。Previous 
Sibling 是 指 获取 前 一 个 对 象 ， 而 nextSibling 是 指 获得 下 一 个 对 象 。 


图 实例 说 明 
本 实例 将 介绍 如 何 实现 使 用 键盘 使 单元 格 焦点 随意 移动 ,运行 
本 实例 , 使 用 键盘 的 方向 键 来 获取 焦点 进行 上 下 左右 的 移动 , 当 持 


结果 如 图 19.17 所 示 。 图 19.17 使 用 键盘 使 单元 格 焦点 随意 移动 
图 关键 技术 


本 实例 主要 使 用 JavaScript 脚本 创建 一 个 ObjTable 对 象 ， 用 这 个 对 象 来 对 表格 中 的 焦点 移动 进行 控制 的 实 
现 过 程 如 下 : 

(1) 通过 当前 表格 的 rows 的 length 属性 来 获取 表格 的 所 有 行 数 ， 通 过 某 一 行 的 单元 格 个 数 来 获取 表格 的 
总 列 数 方法 为 (sTable.rows[0].cells.length)。 

(2) 创建 一 个 全 局 ObjTable 对 象 ， 并 将 表格 的 行 数 和 列 数 分 别 赋 给 ObjTable 对 象 的 rowCount 和 colCount 
属性 。 

(3) 通过 ObjTable 的 单 击 事件 onClick) 来 获得 表格 中 的 焦点 。 

(4) 通过 ObjTable 的 键盘 的 方向 键 向 下 事件 onKeyDown)， 对 键盘 的 操作 进行 监控 ， 其 中 “一 ” 键 的 键 
值 为 3,“ 一 ” 键 的 键 值 为 2,“ | ” 键 的 键 值 为 “1”,“ +1 ” 键 的 键 值 为 0，Enter 键 的 键 值 为 13， 通 过 键盘 上 移 
动 键 对 表格 中 单元 格 的 焦点 进行 移动 ， 用 Enter 键 来 实现 换行 的 操作 。 

(5) 通过 对 键盘 的 操作 ， 对 当前 单元 格 坐标 进行 修改 ， 并 用 ObjTable 对 象 的 getNode() 方 法 重新 获取 单元 
格 的 焦点 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 ， 并 设置 其 id 属性 为 table1， 关 键 代码 如 下 : 


<table id="table1” width="360" border="0" cellpadding="] " cellspacing="]" align="center” 
bordercolor="#000000”" bgcolor="#000000"> 
<tr bgcolor=H#FFFFFF"> 
<td width="120"></td> 
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<td width="72> 音 乐 频道 </td> 
<td width="71 > 体育 频道 </td> 
</tr> 


(2) 利用 JavaScript 脚本 编写 通过 键盘 方向 键 使 单元 格 焦点 进行 移动 ， 自 定义 一 个 ObjTable 对 象 ， 用 于 存 
放 页面 中 表格 的 相关 信息 ， 关 键 代码 如 下 : 
<script language="JavaScript"> 


var ObjTable = new Object0: 
var prevbool = true; 


ObjTable.colCount=0; /1/ 列 数 

ObjTable. rowCount=0; 1/ 行 数 

ObjTable Map = nall; //Table Map 

ObjTable prevRow /前 一 单元 格 的 行 号 ， 默 认为 -1 
‘Obj Table.prevCol /前 一 单元 格 的 列 号 ， 默 认为 -1 
ObjTable.curRow=—: // 当 前 行 号 ， 默 认为 -1 
ObjTable.curCol=—-1; // 当 前 列 号 ， 默 认为 -1 
ObjTable.Element="TD"; // 待 操作 元 素 的 Tag Name 


当 窗 体 载 入 时 ， 将 表格 的 相关 信息 保存 在 ObjTable 对 象 中 ， 关 键 代 码 如 下 : 
ObjTable.Load = function(a_sID,a_sTagName){// 载 入 table 
Var iRowCount=0, iColCount=0, i, j, m, n, iIndex=0, iCount; 
Var sTable = document.getElementById(a_sID): 
if (sTable!=null) { /1/ 设 置 table 属性 
var tableMap = []; 
iColCount=sTable.rows[0].cells.length; 
iRowCount = sTable.rows.length; /获取 总 行 数 
/监听 onclick 事件 
STable.getElementsByYTagNamel'tbody')[0].onclick=ObjTable_setFocus; 
/监听 onKeyDown 事件 
document.getElementsByTagName(body')[0]. 全 人 moveFocus; 
ObjTable.colCount = iColCount; // 列 数 
ObjTable.rowCount = iRowCount; // 行 数 
var aCols=null, iCell: 
for (i=0; i<iRowCount; Hi) { 
aCols = new Array(iColCount); 
tableMap.push(aCols); 
} 
for (i=0; Ee HD{ 
iIndex=0: 


for (j=0; j<iColCount: j+=iCell.colSpan) { 
if (tableMap[i][]=—nulD) { 
iCell = sTable.rows[i].cells[iIndex++]; 
for(m=i; m<itiCell.rowSpan; ++m) { 
for(n=j; n<j+iCellcolSpan: ++n) {tableMap[m][n] =i+",":} 


tableMap[i][j] = iCell: 


} 
} 
ObjTable.Map = tableMap: /ltable map 结束 
} 

下 
(3) 自 定义 鼠标 单 击 单元 格 函数 ObjTable_setFocus 〇 ， 当 鼠标 单 击 单元 格 时 ， 设 置 单元 格 的 前 景色 和 背景 
关键 代码 如 下 : 
/鼠标 单 击 设置 焦点 
variCurRowiCurCol: 
function ObjTable_setFocus(evenD{ 
Var e = event | window.event:; 
var obj = etarget | e.srcElement. oParent = obj.parentNode: 
var iCurRow = ObjTable.curRow. iCurCol = ObjTable.curCol: 
if (prevbool==true){ 

var iCurRow = ObjTable.curRow., iCurCol = ObjTable curCol: 
} 


else{ 


加 


Obij Table prevRow = iCurRow:ObjTable prevCol = iCurCol: 
} 
RecallFocus(Obj Table): 
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var oPrevNode = ObjTable .getNode(ObjTable prevRow:.ObjTable prevCoD: 
var iColCount = ObjTable.colCount: 
var aMaps = ObjTable Map: 
if (oParent.tagName.toUpperCase() !="TR") { 
return; 


} 
iCurRow = oParent .rowIndex:; 
for (var i=0; i<iColCount IH){ 
if (aMaps[iCurRow][i]=—o0bj) { 


iCurCol =i; 
break: 
} 
(4) 自 定义 函数 ObjTable moveFocus0， 当 用 键盘 的 方向 键 移动 单元 格 焦点 时 取消 上 一 次 的 单元 格 焦点 颜 
色 ， 使 当前 单元 格 获得 关键 代码 如 下 : 
/移动 焦点 
function ObjTable_moveFocus(event) { 
// 获 取 当 前 节点 


Var e = event | window.event; 
Var ONode = e.target || e.srcElement; 
Var oNext = null; 
switch (e.keyCode) { 
case 37:// 左 键 2 
oNext = CTable_getNextNode(2); 
break: 
case 38:// 上 键 0 
ONext = CTable_getNextNode(0); 
break: 
case 13://Enter 键 
case 39:// 右 键 3 
ONext = CTable_getNextNode(3); 
break: 
case 40:// 下 键 1 
ONext = CTable_getNextNode(1); 
break;} 
/改变 背景 色 
证 (oONext) { 
ONext.focus(); 
ONext.bgColor="#336699"; 
ONext.style.color="#FFFFFF";} 


(5) 自 定义 函数 CTable_getNextNode0， 用 于 获取 下 一 个 单元 格 节点 位 置 ， 关 键 代码 如 下 : 
/获取 下 一 个 节点 
function CTable_getNextNode(a_ key) { 
var oNode = null: 
Var iCol = Obj Table.curCol iRow=ObjTable.curRow; 
Var iRowCount = ObjTable.rowCount, iColCount=ObjTable.colCount; 
var aMaps = Obj Table.Map, aTemps=null; 
var iCurCol=iCol, iCurRow = iRow., iTemp: 
Var sTemp="", SStr=""; 
oNode = aMaps[iRow][iCol]; 
if (typeof(oNode)—"string") { 
aTemps = oNode.split(","): 
iCurRow = aTemps[0]: 


iCurCol = aTemps[1]; 
jwhile (rue) { 
switch(a_key) { 
Case 0: 
iRow--; 
break: 
Case ] 
iRow+t; 
break: 
Case 2: 
icCol--: 
证 (iCol<0) { 
iCol = iColCount-1; 
iRoW-; 
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} 
break: 
Case 3: 
iColt+; 
if (iCol>=iColCount) { 
Row++; 


iCol=0; 
} 
Dreak: 

} 
if (iRow<0) { 

iRow=iRowCount-1; 
} 
if (iRow>=iRowCount) { 

iRow=0; 


} 
if ((iCurRow — iRow) &é: (iCurCol — iCol)) { 
continue; 


} 
oNext = aMaps[iRow][iCol]: 
sTemp=typeof(oONext); 
证 (sTemp.toLowerCase0 一 "string") { 
aTemps=oNext.split(","); 
if ((iCurRow!=aTemps[0]) | (iCurCol!=aTemps[1])){break:} 
continue; 
} 


break; 
jswiteh(a_ key) { 
case 0:// 上 
case 1:// 下 
if (ONext.colSpan>1) { 
ObjTable.prevCol = CTable.curCol; 
ObjTable.prevRow = ObjTable.curRow: 
ObjTable.curRow = iRow; 
yelse { 
Obj Table.prevCol = ObjTable.curCol; 
Obj Table.prevRow = ObjTable.curRow: 
ObjTable.curCol = iCol; 
ObjTable.curRow = iRow;} 
break: 
case 2:// 左 
case 3:// 右 
if (oONext.rowSpan>1) { 
ObjTable.prevCol = ObjTable.curCol; 
Obj Table.curCol = iCol: 
iTemp = ObjTable.curRow:; 
Obj Table.curRow = iRow:; 
ObjTable.prevRow = iTemp: 
yelse { 
Obj Table.prevCol = ObjTable.curCol: 
ObjTable.prevRow = ObjTable.curRow; 
ObjTable.curCol = iCol; 
ObijTable.curRow = iRow;} 
break:} 
RecallFocus(Obj Table); 
Prevbool=false: 
iCurRow=ObjTable.curCol: 
iCurCol=Obj Table.curRow: 
return oNext; 


自 定义 函数 RecallFocus0， 在 单元 格 失去 焦点 时 使 用 单元 格 的 前 景色 和 背景 色 恢复 正常 ， 并 当 窗 体 载 入 时 
将 表格 的 相关 信息 保存 到 自 定义 对 象 ObjTable 中 ， 关 键 代码 如 下 : 


function RecallFocus(c){ 
var oPrev = ObjTable.getNode(c.prevRow.c.prevCol); 
if (oPrev) { 
oPrev.bgColor="#FFFFFF"; 
oPrev.style.color="#000000"; 
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// 窗 体 载 入 函数 

window.onload-function() {ObjTable Load("table1","TD"):}: 

</script> 
图 秘笈 心 法 

通过 控制 键盘 来 随意 移动 单元 格 焦点 时 ， 用 到 了 一 个 重要 的 属性 keycode 键盘 对 应 值 。 本 实例 在 JavaScript 
脚本 中 定义 了 ObiTable_ moveFocus0 函 数 ， 通 过 switch0 条 件 语句 来 设置 键盘 方向 键 的 上 、 下 、 左 、 右 以 及 Enter 
键 的 动作 。 

初级 
实用 指数 : 但 页 烛 


实例 508 


图 实例 说 明 

本 实例 主要 通过 对 指定 单元 格 的 隐藏 ， 可 以 对 表格 中 的 说 明 性 文字 实现 一 种 动态 的 显示 效果 。 当 鼠标 移动 
到 蓝 色 区域 时 ， 光 标 会 变 成 手 状 ， 单 击 此 处 左边 的 注册 帮助 将 进行 隐藏 和 显示 的 切换 效果 ， 程 序 的 运行 结果 如 
图 19.18 和 图 19.19 所 示 。 


洗 末 一 一 帮助 
注意 在 这 里 添 写 
的 一 定 要 是 真实 | 。 用 户 名 ， 
窗 码 ， 用 户 名 ， 
邮箱 ， 密码 ， 
ElES 旬 
ESI 
图 19.18 显示 单元 格 图 19.19 隐藏 单元 格 


图 关键 技术 

本 实例 主要 是 通过 单元 格 style 样式 中 的 display 属性 值 none 和 block 来 实现 当前 单元 格 的 隐藏 和 显示 。 

当 上 鼠标 移入 和 移出 页 面 的 “ 蓝 色 区 域 ” 时 ， 将 使 用 document 对 象 的 body 的 style 的 cursor 属性 值 来 改变 光 
标的 形状 。cursor 属性 值 如 表 19.1 所 示 。 


表 19.1 Style 的 cursor 属性 值 


I 形 光 标 
水 平 I 形 光标 
不 可 拖 动 的 光标 


Text 
Vertical-text 
No-drop 


anlto 
default 


help All-scroll 三 角 方 向 光标 
move Crosshair 十 字 光 标 
i Not-allowed 无 效 光标 


图 设计 过 程 


(1) 创建 index.jsp 页 面 文件 ， 在 页 面 中 添加 一 个 表格 及 相关 属性 ， 关 键 代 码 如 下 : 
<table id="table1” width="408" height="167" border="]" cellpadding="0" cellspacing="0"> 
<b> 
<td width="119" valign="top" id="tdhide"><p> 注 册 一 一 帮助 </p> 
<p> 注 意 在 这 里 填写 的 一 定 要 是 真实 资料 ， 以 免 在 丢失 后 可 以 方便 找 回 ， 如 果 有 与 色情 、 法 轮 功 等 有 违 国家 相关 规定 的 行为 后 果 自 负 。 
</p><hd> 
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<td width="1" bordercolor="#FFFFFF" bgcolor="#6495ed" id="idsize” onClick="hidecell)" 
onMouseMove="move0" onMouseOut="out|">&nbsp:</td> 
<td width="274" id="tdcen” align="center”> 
<table width="257" height="108" border="0" bordercolor="#000000” align="center”> 
<Tr> 
<Td align=”ight> 用 户 名 : </Td> 
<td align="left"><input type="text" name="iname" size="15"/></td> 


<Tr> 
(2) 使 用 JavaScript 脚本 自 定义 函数 move0， 当 鼠标 移动 到 蓝 色 区 域 时 ， 使 光标 变 成 手 形状 ， 关 键 代 码 
如 下 : 


function moveO{ 
document.body.style.cursor="hand"; 


} 
自 定义 函数 out0， 当 鼠标 移出 此 蓝 色 区 域 时 ， 使 光标 恢复 标准 形状 ， 关 键 代码 如 下 : 
人 


} 
自 定义 函数 hidecell0， 用 于 控制 单元 格 的 隐藏 及 显示 ， 同 时 改变 表格 的 大 小 ， 关 键 代 码 如 下 : 
Var bool=true; 
var td1=0; 
function hidecellO{ 
if (bool=—true){ 
tdhide.style.display="none"; 
td1=parseInt(tdhide.width); 
tablel.width=tablel.width-tdhide.width: 
bool=false; 


2 tdhide.style.display="block"; 
tablel .width=parseInt(tablel.width)+td1; 
bool=true; 
日 
</script> 
图 秘笈 心 法 
在 控制 单元 格 显示 与 隐藏 时 ， 首 先 定 义 了 一 个 布尔 类 型 变量 bool， 此 值 为 tue 时 则 显示 单元 格 ， 反 之 则 隐 
藏 。 使 单元 格 的 name 的 style.display 值 设置 为 none 显示 状态 ， 再 用 parseInt0 方 法 强制 转换 成 整数 ， 以 便 求 出 
整个 表格 的 新 宽度 。 


实例 509 


图 实例 说 明 


本 实例 是 在 表格 中 选择 指定 的 单元 格 ， 单 击 “ 修 改 ” 按 钮 ， 将 在 按钮 
的 下 面 显示 一 个 文本 框 ， 当 对 文本 框 中 的 信息 进行 修改 时 ， 所 选单 元 格 中 
的 文本 信息 也 随 之 改变 ， 运 行 结果 如 图 19.20 所 示 。 


图 关键 技术 


本 实例 主要 应 用 JavaScript 脚本 ,并 使 用 setExpression() 方 法 将 文本 框 
中 的 内 容 动 态 传递 给 已 选中 的 单元 格 ， 也 就 是 修改 表格 中 的 innerHTML 
属性 ， 并 在 修改 其 他 单元 格 之 前 用 removeExpression0 方 法 动态 删除 19.20 ”修改 后 的 单元 格 的 效果 
innerHTML 属性 。 

SetExpression() 方 法 的 语法 格式 如 下 : 


明日 Java 系 列 明日 cx 系列 
图片 库 图 片 库存 


383 


同 | 4 7 
人 书店 “|150 1 


745 


Java Web 开发 实例 大 全 (基础 卷 ) 
setExpression(attribute,value.language) 
参数 说 明 
@ attribute: 动态 属性 。 
@ value: 属性 值 。 
@ language: 可 选 参数 ， 语 言 ， 如 JavaScript。 
功能 : 用 于 设置 动态 及 相关 属性 。 
TemoveExpression() 方 法 的 语法 格式 如 下 : 
removeExpression(attribute) 
参数 说 明 
attribute: 动态 属性 。 


功能 :删除 动态 属性 。 
设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 及 文本 框 和 按钮 ， 并 设置 表格 的 属性 名 称 ， 关 键 代码 如 下 


<table width="270" cellspacing="1" bordercolor="#000000" bgcolor=#000000”" id="table1 "> 


1_2 心 明日 Java 系列 图 片 库 </td> 
<td id="cel1_ 3 史明 日 C# 系 列 图 片 库存 </td> 
</tr> 
<tr bgcolor="#FFFFFF"> 
<td id="cell_4 作 长 江 路 新 华 店 </td> 


<t> 
<tr bgcolor="#FFFFFF"> 
<td id="cell_7 吃 重庆 路 同仁 书店 </td> 
<td id="cel1_8">150</td> 
<td id="cel1 9">471</td> 
<tr> 
</table> 
“<script language="javascript"> 
(2) 使 用 JavaScript 脚本 实现 修改 单元 格 内 容 ， 自 定义 函数 select0， 用 来 保存 发 生 事件 的 文档 元 素 信息 ， 
关键 代码 如 下 : 
Var lastSelection = null; 
/获取 选择 行 或 单元 格 的 参数 值 
function select(element) { 
Vare C; 
if (element — null){e = window.event.srcElement:} 
else {e = element;} 
if(e.tagName — "TD"){ 
c=findCell(e); 
if(c!=nuD{ 
if (lastSelection != null) {deselectRowOrCell(lastSelection):} 
SelectRowOrCell(c): 
lastSelection = c: 


} 


: 
window.event.cancelBubble = true: 


} 

(3) 自 定义 可 修改 单元 格 内 容 的 editContents0 函 数 ， 关 键 代码 如 下 : 
/编辑 单元 格 中 的 文本 信息 

function editContentsO { 


Varc, p.nr: 
if (lastSelection — null) 
return false; 
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document.forml.celltext.style.display = "": 
document.forml .celltext.value = c.innerHTML: 
c.setExpression("innerHTML", "document form1 .celltext.value"): 
document forml .celltext.focusO; 
documentforml .celltext.onblur = unhookContentsExpression: 

} 

(4) 编写 自 定义 函数 clearContentsExpression0， 用 于 清空 文本 框 中 的 内 容 ， 关 键 代 码 如 下 : 

/对 文本 框 进行 清空 

function clearContentsExpressionO{ 
lastSelection.removeExpression("innerHTML"):; 
document.forml .celltext.value = "; 
document forml .celltext.style.display = "none"; 


ee 
国 秘笈 心 法 

本 实例 中 , 在 编辑 单元 格 中 的 文本 信息 时 ， 关 键 之 处 在 于 获取 单元 格 信息 。 本 实例 是 在 JavaScript 脚本 中 应 
-个 表单 ， 当 用 鼠标 单 击 或 双击 表单 中 的 文本 框 时 ， 它 可 以 触发 一 个 事件 ， 以 此 


宇 


用 了 focus0 函 数 获取 焦点 ， 
来 实现 编辑 单元 格 的 文本 信息 。 


实例 510 初级 
实用 指数 : 食 食 食 


图 实例 说 明 
本 实例 是 对 单元 格外 边框 的 粗细 进行 设置 ， 在 实际 开发 中 可 以 起 到 美观 和 突出 显示 相应 表格 的 作用 ， 程 序 
的 运行 结果 如 图 19.21 所 示 。 


body 子 对 象 | 属性 body 子 六 象 | 属性 
名 称 1jr 表格 行 名 称 1 康 格 行 | 
名 称 2ltd 表格 列 名 称 2ltd 表格 列 


图 19.21 单元 格外 边框 加 粗 效果 


图 关键 技术 


本 实例 主要 是 通过 设置 <table> 表 格 的 border 属性 来 改变 表格 的 外 边框 粗细 的 效果 。 修 改 表 格外 边框 宽度 ， 
首先 是 在 table 表格 中 添加 border 属性 然后 设置 其 值 为 大 于 1， 数 值 越 大 外 边框 就 越 粗 ， 相 反 则 越 细 。 


图 设计 过 程 


创建 index.jsp 页 面 ， 在 页 面 中 添加 一 个 表格 ， 并 设置 相应 的 id 名 称 ， 关 键 代码 如 下 : 
<table align="center" border="5" bordercolor="#6495ed"> 
<tr> 
<td id="Td1">&nbsp:</td> 
<td id="”Td2">body 子 对 象 </td> 
<td id-"Td3 必 属性 </td> 
</tr> 
<tr> 
<tdid-"“Td3 必 名称 1</td> 
<td id="Td5">tr</td> 
<td id="T4d6 吃 表格 行 <td> 
< 
<tr> 
<td id="Td7 守 名 称 2</td> 
<td id="Td8">td</td> 
<td id="Td9 中 表格 列 <Jtd> 
< 
</table> 
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国 秘笈 心 法 
对 于 外 边框 的 操作 在 实际 开发 中 多 数 用 于 突出 显示 某 个 重要 单元 格 信息 。 例 如 ， 在 用 户 注 册页 面 时 可 以 对 
验证 码 的 外 边框 进行 加 粗 并 给 予 颜色 变色 。 


19.3 表格 的 特殊 效果 


在 制作 网 页 时 ， 最 常用 到 的 就 是 表格 属性 ， 可 以 使 用 表格 来 设计 页 面 的 布局 ， 也 可 以 将 表格 设计 成 不 同 的 
风格 使 其 页 面 更 加 美观 。 


实例 511 初级 
实用 指数 : 食 食 食 


图 实例 说 明 
本 实例 是 将 表格 的 边框 设置 为 指定 的 宽度 , 然后 在 页 面 载 入 时 按 一 定 的 时 

间 间 隔 改变 表格 的 外 边框 颜色 ， 运 行 结果 如 图 19.22 所 示 。 
关键 技术 图 19.22 ”表格 边框 闪烁 的 效果 


本 实例 主要 在 JavaScript 脚 本 中 设置 一 个 颜色 的 array0 集 合 ,然后 使 用 for0 
语句 循环 这 个 集合 ， 并 设置 表格 边框 颜色 等 于 这 个 集合 的 顺序 排列 的 值 ， 最 后 应 用 setTimeout0 方 法 预 设 一 段 时 
间 修 改 表格 的 外 边框 颜色 。 修 改 表格 的 外 边框 颜色 是 用 表格 的 style 对 象 的 bordercolor 属性 来 实现 的 。 
图 设计 过 程 

(1) 创建 index.jsp 页 面 ， 并 在 页 面 中 添加 一 个 表格 ,设置 其 外 边框 的 宽度 为 5， 这 样 可 以 更 直观 地 看 到 表 
格 变 色 的 效果 ， 关 键 代 码 如 下 : 

<b 


ody> 
<table id="table1" border=5> 
<tr><td align=center><strong> 心 锐志 远 ， 明 日 词典 </strong></td> 
</t> 


(2) 利用 JavaScript 脚本 编写 实现 表格 边框 变色 的 关键 代码 如 下 : 
<script language="javascript”> 
Var i=0; 
Var Color= new Array("#1e90ff","#66cdaa","#d2691e","#c71585","#483d8b"); 
function ttO{ 
if (>Colorlength-1){ 
0 


} 
tablel.style borderColor=Colorfi]: 
iitl; 

. setTimeout("ttO",100); 

tt0; 

</script> 


国 秘笈 心 法 
在 HIML 语言 中 一 些 对 象 属性 中 间 是 带 “-” 字 符 的 ， 如 border-color， 要 想 在 脚本 中 进行 应 用 ， 应 将 “-” 
符号 删除 ， 并 将 “-” 字 符 后 的 首 字母 大 写 (borderColor)。 
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实用 指数 : 但 食 食 | 


力 实例 说 明 

本 实例 是 实现 当 鼠标 指 向 表格 中 的 任意 一 个 单元 格 时 ,将 该 单元 格 所 在 行 
的 背景 颜色 及 字体 颜色 进行 改变 ， 运 行 结果 如 图 19.23 所 示 。 -下 加 
| | 关键 技术 二 班 92 87.5 


图 19.23 选中 行 的 变色 效果 
实现 本 实例 ， 主 要 是 当 鼠 标 指向 表 中 的 单元 格 时 ， 将 通过 onMouseOver 事 


件 调 用 自 定义 函数 over0 来 改变 单元 格 所 在 行 的 前 景色 和 背景 色 , 当 鼠 标 纵向 离开 单元 格 时 将 通过 onMouseOut 事 
件 将 所 选 行 的 前 景色 和 背景 色 改 变 为 初始 状态 。 


设计 过 程 
(1) 创建 ndexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 并 设置 相应 的 id 名称， 关键 代码 如 下 : 
<table align="center” border="1”> 
<tr id="fr1" onMouseOver="over(this.id)" onMouseOut="out(this.id)"> 
<td>&nbsp:;</td> 
<td> 文 科 平 均 成 绩 </td> 
3 和 
<tr id="h2" onMouseOver="over(this.id)" onMouseOut="out(this.id)"> 
<td> 一 班 </td> 


<td>90</td> 
<td>88</td> 

<tr> 

<tr id="tr3" onMouseOver="over(this.id)" onMouseOut="out(this.id)"> 
<td> 二 班 </td> 


‘</table> 


eval(trmame).style.backgroundColor="Sf9ea0"; 
eval(tmame).style.color="FFFFFF": 

function out(trmmame){ 
eval(trname).style.backgroundColor="FFFFFF": 
eval(trname).style.color="000000"; 

} 

</script> 

图 秘笈 心 法 


本 实例 在 JavaScript 脚本 中 应 用 了 eval0 函 数 ， 当 鼠标 单 击 单元 格 时 变换 一 个 单元 格 行 的 背景 颜色 ， 而 当 焦 
点 离开 时 再 使 用 eval0 函 数 把 单元 格 行 的 颜色 恢复 为 初始 状态 。eval0 函 数 用 于 把 一 个 字符 串 当 作 一 个 JavaSeript 
表达 式 执行 。 

初级 
实用 指数 : 依依 食 


实例 513 


力 实例 说 明 
在 网 站 的 显示 数据 页 面 中 ， 往 往 因为 数据 过 多 而 在 显示 时 过 于 密集 ， 导 致 查询 者 眼花 练 乱 。 本 实例 介绍 如 
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何 改变 表格 中 表 元 内 部 的 空白 ， 使 表格 数据 看 起 来 更 加 清晰 ， 运 行 结果 如 图 19.24 和 图 19.25 所 示 。 


Food Drink Sweet 
Food Drink Sweet 


IA B c A B C 
19.24 未 设置 表 元 内 部 空白 的 效果 图 19.25 设置 表 元 内 部 空白 的 效果 
图 关键 技术 
本 实例 主要 是 设置 了 表格 的 cellpadding 属性 来 实现 表 元 间距 , cellpadding 属性 的 值 越 大 则 表 元 的 间隙 越 大 ， 
相反 则 越 小 ， 默 认为 0。cellpadding 属性 只 能 在 <table> 标 记 中 添加 ， 不 可 以 在 其 下 属性 中 添加 ， 如 <tr/> 和 <td/>。 
图 设计 过 程 


创建 indexjsp 页 面 ， 在 该 页 设置 表格 的 相关 元 素 ， 关 键 代码 如 下 : 
<table border="1"” cellpadding="5"> 


9 


<td> 用 户 名 :</td> 
<td><input type="tfext” name="iname" size="20"/></td> 


<td> 密 &nbsp; 码 :</td> 
<td><input type="password” name="pwd” size="21"/></td> 


和 人 


<td><input type="submit”" name="Submit” value=" 其 如"/></td> 
</table> 


国 秘笈 心 法 


cellpadding 属性 在 实际 开发 中 多 数 设 置 为 2 或 者 默认 ， 对 于 cellpadding 属性 也 可 以 在 CSS 样式 表 中 设置 ， 
然后 在 页 面 中 调用 即 可 。 


实例 514 


图 实例 说 明 
对 于 表格 与 表格 之 间 的 设置 实例 513 只 是 其 中 的 一 种 ， 还 有 一 种 是 对 于 表格 中 显示 大 量 数据 的 间 阶 设置 。 
本 实例 实现 对 表格 中 表 元 间隙 的 设置 ， 运 行 结果 如 图 19.26 和 图 19.27 所 示 。 
表 元 间 队 设置 ， 展 元 间 阶 设置 ， 
Food Drink Sweet cr 
A B c A B c 


19.26 未 设置 表 元 间隙 效果 19.27 ”设置 表 元 间隙 效果 
图 关键 技术 


本 实例 通过 设置 <table> 表 格 的 cellspacing 属性 来 改变 表 元 内 间隙 的 效果 ， 同 样 cellspacing 属性 的 值 越 大 ， 
其 表 元 间隙 间距 越 大 ， 相 反 其 值 越 小 间隙 越 小 ， 默 认为 1。 


图 设计 过 程 
创建 indexjsp 页 面 ， 在 该 页 面 中 添加 表格 的 相关 元 素 及 属性 ， 关 键 代码 如 下 : 
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<table border cellspacing- 坟 表 元 间隙 设置 : 


图 秘 笈 心 法 
本 实例 中 用 到 了 table 的 cellspacing 属性 ， 其 实 它 就 是 在 原 有 小 格 的 基础 上 加 上 10 个 单位 宽度 ， 也 就 是 把 
原来 的 小 格 变 大， 但 原来 写 的 内 容 占 的 大 小 范围 不 变 。 


图 实例 说 明 

在 网 站 中 显示 数据 时 , 为 了 整体 效果 的 统一 , 开发 者 会 对 其 设 
置 居中 、 左 对 齐 或 右 对 齐 。 本 实例 实现 的 就 是 把 表格 的 文字 分 别 设 
置 为 左 对 齐 、 居 中 、 右 对 齐 的 效果 ， 运 行 结果 如 图 19.28 所 示 。 apple banana orange 


图 关键 技术 -一 一 -一 


图 19.28 ”对 表格 内 文字 设置 不 同 的 对 齐 效果 
本 实例 主要 应 用 表格 的 align 属性 的 3 个 值 ， 分 别 是 left ( 左 
对 齐 )、center (居中 ) 和 right ( 右 对 齐 )。 这 3 个 值 可 以 任意 应 用 在 <table> 中 的 某 一 位 置 , 可 以 添加 在 <tr> 或 <td> 
中 。 通 常情 况 下 会 设置 为 居中 效果 使 整体 效果 更 加 醒目 。 


表格 内 文字 的 对 齐 


图 设计 过 程 
创建 indexjsp 页 面 ， 在 该 页 面 中 添加 表格 的 相关 元 素 及 属性 ， 关 键 代码 如 下 : 
<h3> 表 格 内 文字 的 对 齐 </h3> 
<table border width=160> 


<t> 
<th>apple</th><th>banana</th><th>orange</th> 
<tr> 
<Tr> 
<td align=lef>A<jtd> 
<td align=center>B</td> 
<td align=right>C</td> 
</Tr> 
</table> 


图 秘笈 心 法 


在 使 用 <table> 的 align 属性 时 要 小 心 , 不 是 所 有 的 浏览 器 都 能 识别 它 。 如 果 要 让 表格 显示 在 屏幕 中 央 , 使 用 
<center> 标 识 符 来 包含 表格 会 更 安全 些 。 


图 实例 说 明 

在 网 站 显示 信息 时 ， 也 有 相应 的 格式 布局 ， 在 实际 开发 中 ， 客 户 可 能 会 要 求 将 表格 内 的 文字 统一 向 上 或 居 
中 对 齐 。 本 实例 是 把 4 个 表格 的 内 容 分 别 设置 成 项 端 位 置 、 居 中 位 置 、 底 端 位 置 和 基线 位 置 , 运行 结果 如 图 19.29 
所 示 。 
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‘One Two Three Four 


AF[| Bp 
B 
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19.29 表格 内 布局 效果 


图 关键 技术 
本 实例 在 实现 表格 中 的 信息 布局 效果 时 ， 用 到 了 valign 属性 的 4 个 值 ， 语 法 格式 如 下 : 


tabledataObject.vAlign-toplmiddlelbottomlbaseline 

功能 : 设置 或 返回 单元 格 内 数据 的 垂直 排列 方式 。 

其 中 ，valign 的 值 ttp、middle、bottom、baseline， 分 别 表示 顶端 对 齐 、 居 中 对 齐 、 底 端 对 齐 、 基 线 对 齐 。 
图 设计 过 程 

创建 indexjsp 页 面 ， 在 该 页 面 添加 表格 的 相关 元 素 及 属性 ， 关 键 代码 如 下 : 


<table border height=100> 


图 秘笈 心 法 
在 本 实例 中 ， 设 置 表格 内 布局 用 到 了 valign 属性 ， 它 与 align 看 起 来 十 分 相似 ， 用 法 也 一 样 ， 它 们 的 区 别 在 
于 valign 是 垂直 位 置 的 操控 ，align 是 水 平 位 置 的 设置 。 


图 实例 说 明 

在 网 站 开发 中 ， 经 常会 遇 到 填写 数据 时 超出 表格 的 预 设 大 小 ， 这 时 就 需要 开发 者 对 可 输入 表格 的 大 小 进行 
设置 ， 预 设置 表格 的 最 大 宽度 和 最 大 高 度 。 本 实例 就 是 设置 两 个 预 设 大 小 表 
格 的 高 度 和 宽度 , 即 150x150 和 80x80 两 个 表格 , 运行 结果 如 图 19.30 所 示 。 


图 关键 技术 


本 实例 应 用 了 <table> 表 格 的 高 度 Cheight) 和 宽度 (width) 来 预 设 表格 
的 大 小 。 设 置 时 可 以 只 设 高 度 或 宽度 ， 如 果 设 置 高 度 为 130， 那 么 当 表格 中 
的 内 容 达到 最 大 时 将 自动 增加 表格 宽度 ; 相反 如 果 设置 宽度 为 150， 那 么 当 
表格 内 的 信息 达到 最 大 时 将 自动 增加 高 度 。 


图 设计 过 程 
创建 indexjsp 页 面 ， 并 设置 两 个 表格 大 小 分 别 为 150x150 和 80x80， 关 键 代码 如 下 : 


<table><tr><td> 
<table border="]" bgcolor="#6495ed" width="150" height="150"> 
<t> 


这 个 是 
ovs0 的 
表格 


19.30” 预 设 表格 的 高 度 和 宽度 
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<Td> 这 个 是 150+150 的 表格 </Td> 
</tr> 
</table> 
<table border="]" bgcolor="lightblue” width="80" height="80"> 
<t> 
<td> 这 个 是 80+80 的 表格 </td> 
</tr> 
</table> 
</td></tr> 
</table> 


国 秘笈 心 法 

设置 <table> 表 格 的 width 和 height 大 小 时 ， 除 了 可 输入 具体 的 数字 以 外 ， 还 可 以 以 百分比 的 形式 设置 ， 不 
过 这 种 情况 下 一 般 是 在 多 个 表格 中 应 用 ， 当 包含 在 里 面 的 表格 各 宽度 设置 为 50% 时 ， 是 按 被 包含 表格 的 百分比 
设置 的 。 


实例 518 


图 实例 说 明 
在 制作 网 页 时 ， 有 时 需要 将 表格 进行 透明 处 理 ， 以 更 加 突出 要 显示 的 部 分 。 本 实例 是 通过 设置 表格 滤 镜 中 
的 透明 度 来 实现 该 效果 的 ， 运 行 结果 如 图 19.31 所 示 。 sa 


图 关键 技术 


本 实例 主要 是 通过 设置 表格 的 style 的 filter 的 alpha 滤 镜 的 opacity 
值 (opacity 的 取 值 范围 为 0 一 100)， 来 实现 表格 的 透明 效果 的 。 


国 设计 过 程 图 1931 透明 效果 的 图 上 
(1) 创建 indexjsp 页 面 文件 ， 并 设置 表格 及 相应 的 i 名称， 关键 代码 如 下 : 


<table width="400" border=5 align=center cellpadding="4" cellspacing="4" bgcolor="#FFFFFF™" id="tablel" style="border-color:#FFCCFF;"> 

<t> 
<td id="btb" align=center> 学 校 编号 </td> 
<td id="btb" align=center> 班 级 学 号 </td> 
<td id="btp" align=center> 姓 名 </td> 
<td id="btp" align=center> 年 龄 </td> 

<t> 

<t> 
<td id="btb" align=center>01</td> 
<td id="btb" align=center>23</td> 
<td id= 史 她 "align=center> 王 小 虎 </td> 
<td id="btb”" align=center>18</td> 

</tr> 

<h> 
<td id="btb" align=center>02</td> 
<td id="btb” align=center>24</td> 
<td id= 史 她 "align=center> 李 通融 </td> 
<td id="btb" align=center>22</td> 

<ltr> 

<b> 
<td id="btb" align=center>03</td> 
<td id="btb" align=center>24</td> 
<td id="btp"align=center> 王 大 虎 </td> 
<td id="btb" align=center>26</td> 

<ltr> 

‘</table> 


(2) 使 用 JavaScript 脚本 实现 表格 透明 效果 ， 关 键 代码 如 下 : 
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<script language="javascript™> 
tablel.style.filter="alpha(opacity=40)"; 
‘</script> 


国 秘笈 心 法 


本 例 中 用 到 的 alpha 滤 镜 的 常用 属性 如 下 。 

口 enabled: 可 选 参数 ， 布 尔 类 型 ， 设 置 或 检索 滤 镜 是 否 激活 。 

口 style: 整数 值 ， 设 置 或 检索 透明 渐变 的 样式 ， 分 别 为 0、1、2、3。0: 默认 值 ， 整 体 透 明度 将 Opacity 
值 均 匀 作 用 于 对 象 。1: 线性 渐变 透明 度 ， 从 由 startX 和 startY 点 决定 的 透明 度 开始 ， 到 由 finishX 和 
finishY 决定 的 点 ， 由 FinishOpacity 点 结束 。2: 贺 形 放射 渐变 透明 度 。 圆 形 放 射 区 域 的 圆心 为 对 象 的 
中 心 ， 圆 周到 与 对 象 的 边 相 切 为 止 。 透 明 渐变 由 圆心 开始 ， 到 圆周 结束 。 开 始 透明 度 由 Opacity 决定 ， 
结束 透明 度 由 FinishOpacity 决定 。3: 矩形 放射 渐变 透明 度 。 由 对 象 的 边 开 始 ， 到 对 象 的 中 心 结束 。 开 
始 透明 度 由 Opacity 决定 ， 结 束 透明 度 由 FinishOpacity 决定 。 


力 实例 说 明 

在 向 表格 中 输入 信息 时 ， 当 信息 大 于 单元 格 设置 的 宽度 时 ， 单 元 格 的 宽度 将 
自动 向 右 扩展 ， 这 样 使 表格 看 上 去 极 不 美观 。 本 实例 将 限制 单元 格 的 宽度 ， 当 信 
息 超 出 单元 格 的 宽度 时 ， 单 元 格 的 高 度 将 增 大 ， 运 行 结果 如 图 19.32 所 示 。 


图 关键 技术 


本 实例 主要 应 用 表格 的 style 样式 的 tableLayout 属 性 的 fixed 值 来 控制 表格 的 
大 小 ,在 用 tableLayout 属性 之 前 ， 要 用 表格 的 width 和 height 属性 来 设置 表格 的 
宽度 和 高 度 。 下 面 对 style 样式 的 tableLayout 属性 进行 详细 说 明 。 

tableLayonut 属性 的 语法 格式 如 下 : 

tableLayout:autolfixed 

参数 说 明 

@ auto: 默认 的 自动 算法 (计算 速度 慢 ) 布局 将 基于 各 单元 格 的 内 容 ， 表 格 的 每 一 个 单元 格 读 取 计 算 之 后 
才 会 显示 出 来 。 

@ fixed: 固定 布局 的 算法 。 在 这 种 算法 中 ,水平 布局 是 仅 基于 表格 的 宽度 、 表 格 边框 的 宽度 、 单 元 格 间距 、 
列 的 宽度 ， 和 表格 内 容 无 关 。 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 并 设置 表格 的 id 名 称 ， 关 键 代码 如 下 : 


<table id-"iable1"border-"1px" cellpadding—"Opx" cellspacing="Opx” bordercolor="#000000” 
bordercolordark=—"#6495ed" bordercolorlight—"#666666”><tr> 
<td>JavaScript 是 一 种 轻型 的 、 解 释 型 的 程序 设计 语言 ， 而 且 具 备 面向 对 象 的 能 力 ， 该 语言 通过 核心 已 经 嵌入 到 了 Netscape、 
intemetExplorer 和 其 他 Web 浏览 器 中 ， 而 它 能 用 表示 Web 浏览 器 窗口 及 其 内 容 的 对 象 使 Web 程序 设计 增色 不 少 。</td> 
<tr> 
</table> 


(2) 利用 JavaScript 编写 用 于 固定 单元 格 宽度 的 关键 代码 如 下 : 


图 19.32 ”限制 表格 的 宽度 


tablel.align="Center"; 
tablel.style.width=w; 
tablel.style.height=h; 
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tablel.style.tableLayout="fixed": 
</script> 


图 秘笈 心 法 


在 本 实例 中 ， 在 JavaScript 中 用 表格 的 style 样式 来 获取 其 宽度 和 高 度 ， 并 把 自 定义 变量 w 和 4 分 别 赋值 给 
宽度 和 高 度 ， 再 使 用 tableLayout 的 fixed 属性 来 固定 表格 。 


sz | 一 国 


图 实例 说 明 
在 某 些 网 站 中 ， 当 对 某 些 图 片 或 数据 进行 操作 处 理 时 ， 由 于 页 面 过 


. i [B stn -Window miemet bplorer al hl | 
于 复杂 , 很 难 一 下 子 找到 要 操作 的 对 象 , 这 时 就 需要 使 用 一 个 标题 将 其 GE "TET 1 


括 起 来 ， 并 进行 文字 性 说 明 提 示 ， 本 实例 将 用 表格 来 实现 这 一 效果 ， 运 弃 全 | 
行 结果 如 图 19.33 所 示 。 


图 关键 技术 


本 实例 主要 应 用 <fieldset> 和 <legend> 标 记 将 表单 元 素 组 合 在 一 起 ， 
形成 一 个 表格 标题 ， 并 用 层 的 innerHTML 属性 将 设置 好 的 表 的 标题 以 
动态 形式 添加 到 层 中 。 下 面 对 <fieldset> 和 <legend> 标 记 进 行 说 明 。 有 ’ 

口 、<fieldset> 标 记 : 对 表单 中 的 元 素 进行 分 组 。 -| 


口 ”<legend> 标 记 : 用 来 标记 子 表单 。 [Le 
| | 设计 过 程 图 19.33 表格 的 标题 


(1) 创建 index.jsp 页 面 ， 在 页 面 中 添加 一 个 层 ， 并 设置 相关 的 属性 ， 关 键 代 码 如 下 : 
<div id="Tdiv" align="center” width="200px "></div> 
(2) 使 用 JavaScript 编写 用 于 显示 表格 标题 的 关键 代码 如 下 : 
<script language=" ipt”> 
function caption(name){ 
var c="<table width='260px' height='180' align='center>"; 
c=c+"<tr><td> 
c=c+"<fieldset><legend><font>"+name+"</font></legend>"; 
c=c+"<img sre='photo.jpg’ width 一 200' height="140'></fieldset>" 
c=ct"</td></tr></table>"; 
Tdiv.innerHTML=¢: 
} 
</script> 


国 秘笈 心 法 


本 实例 在 JavaScript 脚本 中 定义 了 一 个 变量 c, 然后 使 用 此 变量 输出 一 个 <table> 表 格 及 其 相关 的 表单 元 素 内 
容 ， 并 设置 表单 的 高 为 180px、 宽 为 260px， 并 且 使 用 align 属性 设置 居中 效果 。 
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力 实例 说 明 
本 实例 为 了 能 够 让 表格 呈现 立体 效果 ， 在 表格 的 外 边框 、 单 元 格 及 文本 的 后 面 都 加 了 阴影 效果 ， 实 例 运行 
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结果 如 图 19.34 所 示 。 


本 实例 主要 应 用 表格 的 style 样式 的 filter 和 shadow 属性 来 对 表格 进行 阴影 效 


果 设 置 。 下 面 对 shadow 属性 进行 详细 说 明 。 19.34 表格 的 外 阴影 
shadow 属性 的 语法 格式 如 下 : 
shadow(color.direction,strength) 
参数 说 明 


@ color: 阴影 的 颜色 设置 。 

@ direction: 设置 阴影 的 显示 角度 。 
人 @ strength: 设置 阴影 的 长 度 。 

功能 : 对 当前 组 件 进行 阴影 设置 。 


图 设计 过 程 
(1) 创建 ndexjsp 页 面 文件 ， 在 页 面 中 添加 一 个 表格 及 相关 的 属性 ， 关 键 代 码 如 下 : 
<table id= "tablel" style="border-color:#0000FF" border=5> 
i， 与 避 制 翔 </strong></td> 
0 align=center style="font-size: X-large"> 


<pre> 明 日 科技 </pre> 
</table> 


(2) 使 用 JavaScript 脚本 用 于 实现 表格 阴影 效果 ， 关 键 代 码 如 下 : 
‘<script langrige="javascript”> 
tablel.style.filter="progid:DXImageTransform.Microsoft. Shadow(Color=#6954ed,Direction=220.strength=10)"; 
</script> 


图 秘笈 心 法 
本 实例 在 JavaScript 脚本 中 应 用 了 table 表格 的 style 样式 和 filter 过 滤 样 式 , 在 JavaScript 中 主要 是 通过 对 表 
格 的 外 边框 进行 设置 来 改变 显示 效果 ， 并 且 对 所 有 的 表格 生效 ， 这 与 CSS 样式 的 设置 表格 效果 有 些 类 似 。 
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图 实例 说 明 
在 浏览 网 页 时 , 有 些 网 页 中 的 表格 行 标记 都 具有 立体 效果 , 本 实例 将 实现 这 一 效果 , 实例 运行 结果 如 图 19.35 


所 示 。 
JavaWeb| Ce | VB 


关键 技术 2010 年 | 5000 本 |4500 本 |3700 本 , 


2005 年 | 5800 本 |5500 本 |4000 本 | 

本 实例 主要 是 对 表格 的 borderColorLight( 边 框 的 灯光 颜色 )、borderColorDark 2008 年 | 6800 本 |6500 本 |5300 本 

(边缘 模糊 颜色 ) 和 bgColor 属性 进行 颜色 设置 ， 并 主要 设置 每 行 的 单元 格 的 图 19.35 立体 效果 表格 
bgColor 属性 ， 然 后 通过 for0 语 句 来 循环 设置 表 头 和 表 列 颜色 变换 的 效果 。 


力 设计 过 程 
(1) 创建 ndexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 并 设置 相应 的 标记 和 属性 ， 关 键 代 码 如 下 


<table id="table1"> 
<trid="D tr"> 
<td align=center >&nbsp:</td> 
<td align=center nowrap >JavaWeb</td> 
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<td align=center nowrap >C#</td> 

<td align=center nowrap >VB</td> 

<t> 

<t> 
<td align=center nowrap id="tb1”>2010 年 </td> 
<td align=center nowrap >5000 本 </td> 
<td align=center nowrap >4500 本 </td> 
<td align=center nowrap >3700 本 </td> 

<t> 

<t> 
<td align=center nowrap id="tb2">2009 年 </td> 
<td align=center nowrap >5800 本 </td> 
<td align=center nowrap >5500 本 </td> 
<td align=center nowrap >4000 本 </td> 

</tr> 

<tr> 
<td align=center nowrap id="tb3">2008 年 </tds> 
<td align=center nowrap >6800 本 </td> 
<td align=center nowrap >6500 本 </td> 
<td align=center nowrap >5300 本 </td> 

<t> 

</table> 


(2) 使 用 JavaScript 脚本 实现 立体 表格 效果 ， 关 键 代码 如 下 : 
“<script language="javascript"> 
tablel.border=1; 
tablel.cellSpacing=0; 
tablel.borderColorLight="#333333"; 
tablel.borderColorDark="#efefef"; 
b_tr.bgColor="#ccccee"; 
Var s=""; 
for (var i=1;i<4:iH){ 
s=eval("tb"+i) id; 
eval(s).bgColor="#cccece"; 
} 
‘</script> 


图 秘笈 心 法 

在 本 实例 中 ,设置 borderColorLight 和 borderColorDark 属性 在 窗 体 要 呈现 立体 感 时 ， 需 要 两 个 边框 为 亮色 ， 
剩 下 两 个 边框 为 暗色 。 此 例 中 还 用 到 eval 函数 ， 它 可 以 把 一 个 字符 串 当 作 一 个 JavaScript 表达 式 一 样 去 执行 ， 
简单 地 说 ，eval 函数 接收 一 个 参数 S， 如 果 S 不 是 字符 串 ， 则 直接 返回 S 语句 ， 如 果 S 语句 执行 的 结果 是 一 个 
值 ， 则 返回 此 值 ， 否 则 返回 underfined 。 
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图 实例 说 明 


在 用 表格 输出 数据 时 ， 可 以 对 表格 的 边框 及 单元 格 边框 的 样式 进行 四 四 
设置 ， 这 样 可 以 避免 表格 的 单调 性 ， 浏 览 起 来 不 会 乏味 。 本 实例 将 表格 可 车 渍 |- 人 6 员 | 过 | 


的 边框 设置 为 虚线 ， 运 行 结果 如 图 19.36 所 示 。 EZ | 纤 
03 全 晚 人 金 职 家 于 3 笠 
| | 关键 技术 19.36 ”虚线 边框 表格 


本 实例 主要 应 用 单元 格 的 style 样式 的 borderTop、borderBottom、 
borderLeft 和 borderRight 属性 来 设置 单元 格 的 上 、 下 、 左 、 右 4 条 边框 的 颜色 、 粗 细 及 样式 。 首 先 ， 把 表格 的 
外 边框 及 单元 格 边框 设置 为 0， 然后 再 使 用 单元 格 的 style 样式 中 的 borderTop 和 borderLeft 属性 , 将 所 有 单元 格 
的 上 边 和 左边 以 虚线 显示 ， 接 下 来 将 右边 最 后 一 列 的 单元 格 用 style 样式 中 的 borderRight 属性 将 右边 以 虚线 显 
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示 ， 最 后 把 最 后 一 行 的 单元 格 用 style 样式 中 的 borderBottom 属性 将 下 边 以 虚线 显示 。 
图 设计 过 程 


(1) 创建 ndexjsp 页 面 , 在 页 面 中 添加 一 个 表格 并 设置 表格 相应 的 属性 , 然后 将 表格 的 外 边框 宽度 设 为 0， 
关键 代码 如 下 : 


<table id="tablel" align=center width="300" border="0" cellspacine="0"> 
<t> 


<td id="bt" align=center>&nbsp;</td> 

<td id="bt" align=center> 名 字 </td> 
<td id="pt" align=center> 专 业 </td> 
<td id="bt" align=center> 工 作 年 龄 </td> 

<> 

<t> 
<td id="bt" align=center>01</td> 
<td id="bt" align=center> 王 小 虎 </td> 
<td id="bt" align=center> 信 息 科学 自动 化 </td> 
<td id="bt" align=center>4 年 </td> 

<ltr> 

<t> 
<td id="bt" align=center>02</td> 
<td id="b1" align=center> 李 小 虎 </td> 
<td id="bt" align=center> 电 汽 与 机 修 </td> 
<td id="bt" align=center>6 年 </td> 

<tr> 

<t> 
<td id="bt" align=center>03</td> 
<td id="bt" align=center> 钱 小 晓 </td> 
<td id="bt" align=center> 金 融 管 理 </td> 
<td id="bt" align=center>3 年 </td> 

</tr> 

</table> 


(2) 使 用 JavaScript 编写 实现 虚线 边框 表格 的 关键 代码 如 下 : 
“<script language="javascript"> 
Var i=0; 
var row=tablel.rows.length; 
var column=tablel.rows(1).cells.length; 
for (i=0;i<row*column;it+){ 
btli].style.borderTop="#000000 lpx dotted": 
btli].style.borderLeft="#000000 1px dotted": 
for (var j=1:j<=column:j++) 
bt[j*row-1].style.borderRight="#000000 1px = dotted"; 
if (i>=(row-1)*column) 
btlil.style.borderBottom="#000000 lpx dotted": 
} 


‘</script> 
图 秘笈 心 法 
本 实例 中 用 到 的 style 样式 的 borderTop 为 设置 对 象 上 边框 的 样式 。 例 如 ， 设 置 border-top:thin 等 于 设置 


border-top:thin none, 而 border-top-color 的 默认 值 将 采用 文本 颜色 .因此 此 前 的 任何 border-top-color 和 border-top- 
width 设置 都 会 被 清除 。 
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国 实例 说 明 


在 浏览 网 页 时 ， 经 常会 看 到 网 页 上 用 一 些 分 割 线 将 网 页 分 为 几 个 部 分 ， 使 用 户 浏览 页 面 时 更 容易 找到 相应 的 
信息 。 本 实例 将 用 表格 来 作为 页 面 的 分 割 线 ， 并 且 在 表格 中 以 渐变 颜色 进行 动态 显示 ， 和 运行 结 果 如 图 19.37 所 示 。 


7S8 


第 19 章 表格 的 操作 


明日 编 么 词 热 在 线 


19.37 ”表格 作为 分 割 线 


图 关键 技术 


本 实例 要 使 用 document 对 象 的 write() 方 法 在 页 面 中 动态 添加 一 个 1 行 40 列 的 表格 ， 并 将 表格 外 边框 及 单 
元 格 的 边框 设置 为 0， 最 后 使 用 setTimeout0 方 法 以 指定 时 间 动 态 修改 每 个 单元 格 的 背景 颜色 来 实现 表格 的 动态 
图 设计 过 程 
创建 indexjsp 页 面 ， 在 页 面 中 填写 “明日 编程 词典 在 线 ”， 然 后 在 其 下 面 使 用 JavaScript 脚本 实现 表格 作为 
分 割 线 的 效果 ， 关 键 代 码 如 下 : 
<p align="center"> 明 日 编程 词典 在 线 </p> 
‘<script language="Javascript"> 
changcol=Array(6.7,8,9,'a','b','b',e',d'e',f) 
t="<table height=4 width=100% cellspacing=0 cellpadding=0><tr>" 
for(x=0;x<40;x++){ 
t="<td id=td"+x+"></td>"; 
De 
function line(y){ 
forG=0:i<40:i+H){ 
c=(ity)%20; 
if(c>10){ 
c=20-c; 


| 
} 
yi 
setTimeout(line(+y+),1); 


line(1); 
</script> 


图 秘笈 心 法 


本 实例 中 使 用 document 对 象 的 write() 方 法 向 页 面 输出 一 个 表格 ， 其 中 的 cellspacing 属性 是 表 元 间隙 设置 ; 
cellpadding 是 表 元 内 部 空白 设置 。 再 创建 一 个 实例 属性 document.all[]， 用 于 表格 行 中 的 颜色 变换 。 
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图 实例 说 明 
本 实例 将 给 表格 赋予 一 种 动态 的 展开 效果 ， 当 鼠标 移动 到 表格 中 时 ， 表 格 将 自动 向 下 展开 ， 当 鼠标 移出 表 
格 时 ， 表 格 将 恢复 到 原来 的 样子 ， 运 行 结 果 如 图 19.38 和 图 19.39 所 示 。 


此 方 
网 址 是 -www mingriscft com 


19.38 ”表格 展开 之 前 的 效果 19.39 ”表格 展开 之 后 的 效果 


图 关键 技术 
本 实例 主要 是 用 setTimeout0 方 法 在 表格 的 onMouseOver (鼠标 移入 ) 和 onMouseOut (鼠标 移出 ) 事件 中 
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以 指定 的 时 间 动 态 增加 或 减 小 表格 的 高 度 (height)， 当 高 度 增加 或 减少 到 一 定 程度 时 ， 用 clearTimeout( 方 法 将 
setTimeoutO 的 值 进行 清除 。 


力 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 一 个 表格 ， 并 设置 表格 的 id 名 称 及 相关 属性 ， 关 键 代码 如 下 : 


<table width="200" height="30" border="2" celipadding="0" cellspacing="0" id="mytd” 
‘onMouseOver="over()" onMouseOut="out()" bordercolor="#6495ed"”> 
<tr> 
<td> 欢 迎 来 到 <br> 明 日 图 书 <br> 这 里 是 实现 您 程序 员 梦 想 的 地 方 
<br> 网 址 是 :wwwmingrisoft com<htd> 
<it> 
/table> 


(2) 使 用 JavaScript 编写 用 于 实现 表格 的 向 下 展开 效果 ， 自 定义 函数 over0， 表 示 将 表格 的 高 度 自动 增加 ， 
关键 代码 如 下 : 
ne 
Hee 


var h = parseInt(mytd.height); 
i (h<120){ 


act= setTimeout(overO)’, 10); 


(3) 自 定义 函数 out0， 表 示 将 增加 高 度 后 的 表格 恢复 到 原来 的 高 度 ， 关 键 代码 如 下 : 


D); 
act = setTimeout('outO'", 10); 
} 
} 
</script> 


图 秘笈 心 法 


本 实例 使 用 了 parseInt0 函 数 把 表格 的 高 度 转 换 成 整数 ， 如 果 高 度 小 于 120， 表 格 的 高 度 就 增加 2。parseIntO 
函数 用 于 返回 字符 串 转换 得 到 的 整数 ， 语 法 格式 如 下 : 

parseInt(numString,[radix]) 

其 中 ，numString 为 要 转换 的 字符 串 ，radix 为 可 选 参数 ， 在 2 一 36 之 间 的 表示 numString 所 保存 数字 进 制 
的 值 。 
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国 实例 说 明 


本 实例 是 实现 表格 一 种 动态 的 拉 伸 效果 ， 在 鼠标 光标 移动 到 表格 内 时 ， 表 格 将 自动 向 右 拉 伸 ， 而 当 光 标 移 
出 表格 时 ， 表 格 又 恢复 原来 的 样子 ， 运 行 结 果 如 图 19.40 和 图 19.41 所 示 。 


汪 让 是 一 个 秘 标 
移入 到 表格 内 
移入 到 表格 内 
全 二 并 的 便 公 长 表格 究 度 的 效果 
ns 评 细 请 豆 
录 -wwe mingriscft -om 录 www_mingrisoft com 
图 19.40 鼠标 未 移入 表格 内 时 图 19.41 鼠标 移入 到 表格 内 时 
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图 关键 技术 


本 实例 主要 应 用 setTimeout0 方 法 在 table 表格 的 属性 中 添加 鼠标 移入 事件 onMouseOver 和 鼠标 移出 事件 
onMouseOut， 并 以 指定 时 间 动 态 地 增 减 表 格 的 宽度 (width)， 当 宽度 增加 到 一 定 程度 时 ， 则 使 用 clearTimeout() 
方法 将 setTimeout0 方 法 的 值 清除 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 文件 ， 在 页 面 中 添加 一 个 表格 并 设置 相应 的 id 名 称 及 其 属性 ， 关 键 代码 如 下 : 


<table width="150" height="30" border="2" cellpadding="0" cellspacing="0" id="mytd” 
onMouseOver="over0" onMouseOut="outO" bordercolor="#dcdcdc"> 
<t> 
<td> 这 是 一 个 鼠标 <br> 移 入 到 表格 内 <br> 便 拉 长 表格 宽度 的 效果 
<br> 详 细 请 登录 :www.mingrisoft.com</td> 
<tr> 
</table> 
(2) 使 用 JavaScript 脚本 实现 表格 向 右 拉 伸 效果 ， 自 定义 函数 over0 和 out0， 用 于 实现 将 表格 宽度 自动 增 
加 和 把 增加 宽度 后 的 表格 恢复 到 原来 的 宽度 ， 关 键 代码 如 下 : 
<script language="JavaScript”> 
Var act; 
function overO{ 
var w = parseInt(mytd.width); 
i (w<180){ 
mytd.width = w+ 50; 


D; 

act = SetTimeout('over0'、 10); 
} 
} 
function outO{ 
var Ww = parseInt(mytd.width); 
Hf(w>150){ 

mytd.width = w - 50; 

clearTimeout(act); 

act = setTimeout('outO’, 10); 
} 
} 
‘</script> 


图 秘笈 心 法 
本 实例 中 用 到 了 clearTimeout0 方 法 ， 用 于 终止 setTimeout0 方 法 的 执行 ， 语 法 格式 如 下 : 


clearTimeout(ID_of settimeout) 
参数 说 明 
ID_of settimeout: 为 由 setTimeoutO 返 回 的 ID 值 ， 该 值 标识 要 取消 的 延迟 执行 代码 块 。 
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第 20 章 JSP 操作 Word 


20.1 应 用 JavaScript 导出 到 Word 
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力 实例 说 明 

在 开发 动态 网 站 时 ， 经 常会 遇 到 打印 页 面 中 指定 表格 的 情况 ， 这 时 可 以 将 要 打印 的 表格 导出 到 Word 中 ， 
然后 再 打印 。 本 实例 将 介绍 如 何 将 页 面 中 的 订单 列表 导出 到 Word 中 并 打印 。 运 行 本 实例 ， 在 页 面 中 将 显示 订 
单 信息 列表 ， 单 击 “ 打 印 ” 超 链接 后 ， 将 把 Web 页 中 的 数据 导出 到 Word 的 新 建文 档 中 ， 并 保存 在 Word 的 默 
认 文档 保存 路 径 中 ， 最 后 调用 打印 机 打印 该 文档 。 实 例 运 行 效果 如 图 20.1 和 图 20.2 所 示 。 


品 口 购 电子 商城 后台 管理 


届 订单 信息 列表 
订单 号 品种 数 . 改 款 方式 。 运送 方式 。 - 订货 日 其 。。 
党 到 付款 。 网 络 配送 2007-02-01 0 
fA 下 | 


党 到 付款 。 网 络 配 送 。 9。 2007-02-01,， 


aoaoltoy 3 六 儿 Sn » 评 儿 。 货 到 付 到。 网 络 配送 。 9.0- 2007.02-01.。 


人 pa 酒令 行 付款 。 网 络 配送 。 92。 200702-01 


10004, 


图 20.1 刚 加 载 页 面 之 后 图 20.2 保存 到 Word 中 


图 关键 技术 


本 实例 主要 应 用 JavaScript 的 ActiveXObjectO 构 造 函数 创建 一 个 OLE Automation(ActiveX) 对 象 的 实例 ， 并 
应 用 该 实例 的 相关 方法 实现 。 
ActiveXObject0 构 造 函数 的 一 般 语法 格式 如 下 : 


Var objectVar = new ActiveXObject(class[. servername]); 

参数 说 明 

@ objectVar: 用 于 指定 引用 对 象 的 变量 。 

@ class: 用 于 指定 应 用 程序 的 名 字 或 包含 对 象 的 库 ， 并 且 指 定 要 创建 的 对 象 的 类 型 。 采 用 library.object 的 
语法 格式 ， 如 Word.Application 表明 要 创建 的 是 Word 对 象 。 

日 servername: 可 选 参数 ， 用 于 指定 包含 对 象 的 网 络 服务 器 的 名 字 。 
图 设计 过 程 

(1) 将 显示 订单 信息 的 表格 的 id 设置 为 order， 因 为 要 打印 该 表格 中 的 数据 。 关 键 代 码 如 下 : 

<table id="order” width="10096" height="48” border="] " cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolordark="#CCCCCC" 

bordercolorlight—"HFFFFFF"> 


(2) 编写 自 定义 JavaScript 函数 outDoc0， 用 于 将 Web 页 面 中 的 订单 信息 导出 到 Word 中 ， 并 进行 自动 打 


Tow=table.rows.length: 
column=table.rows(1).cells.Jength: 
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var wdapp=new ActiveXObject(rWord Application"); 
wdapp.visible=true; 
wddoc=wdapp.Documents.Add0: /添加 新 的 文档 
thearray=new Array(); 
/将 页 面 中 表格 的 内 容 存放 在 数组 中 
for(=0:i<row:itH{ 
thearray[i-new ArrayO: 
TorG=0j<colamn:j+H{ 
thearray[i][j]=table. rows(D.cells().innerHTMI: 
} 


} 
var range = wddoc.Range(0,0); 
range.Text=" 订 单 信息 列表 "+"\n"; 


wdapp. Application. Activedocument. Paragraphs. Add(range): 
wdapp.Application.Activedocument Paragraphs.Add0: 


megcurrent=wdapp.Application.Activedocument.Paragraphs(3).Range; 


var objTable=wddoc.Tables.Add(mgcurrentrow:column) /插入 表格 
forGi=0:i<row:i++){ 
for(j=0j<column:j++){ 
‘objTable.Cell(i+1j+1).Range.Text = thearray[i][j] replace("&nbsp;",""); 
} 
} 
wdapp. Application. ActiveDocument.SaveAs("orderInfo.doc",0,false."",true,"" ,false,false.false,false.false): 
wdapp.Application PrintoutO; 
wdapp=null: 
} 
</script> 
(3) 通过 单 击 “ 打 印 ” 超 链接 调用 自 定义 的 JavaScript 函数 outDoc0， 关 键 代码 如 下 : 
<a href=#" onClick="outDocO;"> 打 印 &nbsp;</a> 


图 秘笈 心 法 
在 Word 中 查看 并 修改 默认 文档 保存 路 径 的 方法 如 下 : 选择 “工具 ”一 “选项 ”命令 ， 在 弹出 的 对 话 框 中 


选择 “文件 位 置 ”选项 卡 ， 然 后 选中 “文档 ”列表 项 ， 单 击 “ 更 改 ” 按 钮 ， 在 弹出 的 对 话 框 中 选择 默认 文档 保 
存 路 径 ， 连 续 单 击 “ 确 定 ” 按 钮 即 可 。 


20.2 ”应 用 响应 流 导 出 到 Word 


高 级 
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实用 指数 ， 友 去 要 去 ， 


图 实例 说 明 
在 网 页 中 寻找 需要 的 资料 或 信息 时 ， 有 时 想 把 页 面 中 的 内 容 复制 下 来 ， 然 后 再 存放 到 文档 中 进行 修改 和 纺 


辑 ， 无 形 之 中 就 多 了 一 个 程序 复制 过 程 ， 本 实例 将 网 页 中 表单 元 素 提交 的 数据 输出 到 Word 文档 中 ， 单 击 “ 提 
交 ” 按 钮 ， 即 可 将 表单 中 的 数据 输出 到 Word 中 ， 运 行 结果 如 图 20.3 和 图 20.4 所 示 。 


20.3 在 页 面 中 输入 的 信息 20.4 将 网 站 的 表单 元 素 输入 到 Word 中 
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图 关键 技术 


本 实例 把 页 面 中 表单 method 属性 设置 为 post 提交 方式 ， 而 在 相应 的 ReferServletWord.java 中 将 Post0 方 法 
提交 的 数据 转换 到 get0 方 法 中 执行 。 ReferServetWord 类 继承 了 HttpServlet 类 , 使 用 setContentType( 方 法 来 设置 
以 Word 文档 为 表现 形式 , 然后 声明 一 个 打印 文本 输出 流 out, 使 用 out.printin0 方 法 和 request.getParameter0 方 法 


来 获取 表单 中 相关 的 元 素 信息 并 打印 在 文档 中 。 
国 设计 过 程 
(1) 创建 添加 用 户 信息 的 index.jsp 页 面 ， 将 表单 中 的 数据 提交 到 Servlet 类 的 ReferServletWord 中 ， 关 键 
代码 如 下 : 
<form name="form" method="post" action="ReferServietWord" onSubmit="refun checkEmpty(form)"> 
<table width="276" border="1" cellpadding="0" cellspacing="0"> 
<tr align="center"> 
<td width="67" height="30 守 姓名 </td> 
<td width="203 心 <input type="tfext” name="name”></td> 
</t> 
<tr align="center”> 
<td height="30 必 性 别 </td> 
<td><input type="text” name="sex"></td> 
</t> 
<tr align="center’> 
<td height="30 必 年 龄 </td> 
<td><input type="text" name="age"></td> 
</t> 
<tr align="center”> 
<td height="30 守 出 生 </td> 
<td><input type="text” name="born"></td> 
</t> 
<tr align="center”> 
<td height="30 史 职业 </td> 
<td><input type="text” name="profession"></td> 


<inpCut type="submit” name="Submit" value=" 存 区 "> 
</form> 


(2) 创建 ReferServletWord.java 类 ， 该 类 继承 HttpServlet 类 ， 在 Form 表单 中 主要 触发 ReferServletWord 
类 ， 自 动 执行 doPost0 和 doGet0 方 法 ， 关 键 代码 如 下 : 


public void doGet(HttpServletRequest request, HttpServletResponse response) throws 
ServletException. IOException { 

response.setContentType("application/msword"); /设置 为 Word 格式 
PrintWriter out = response.getWriter(); /声明 out 打印 实例 
‘out.printin(request.getParameter("name")); /获取 表单 中 的 name 
out.printin(request.getParameter("sex")); 
‘out.printin(request.getParameter("age”)): 
‘out.printin(request.getParameter("born")); 
out.printin(request.getParameter("profession")); 


} 
public void doPost(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException { 
doGet(request, response); 
} 
} 
(3) 在 web.xml 文件 中 配置 ReferServletWord 类 的 代码 如 下 : 
<servlet> 
<servlet-name>ReferServletWord</servlet-name> 
<servlet-class>com.pkh.servlet.ReferServletWord</servlet-class> 
</servlet> 
<servlet-mapping> 
<servlet-name>ReferServletWord</servlet-name> 
<url-pattem>/ReferServletWord</url-pattern> 
</servlet-mapping> 
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图 秘笈 心 法 
本 实例 主要 应 用 HttpServletResponse 对 象 的 setContentType0 方 法 设置 文件 的 表现 形式 ， 其 关键 代码 如 下 : 


response.setContentIype("application/msword"): 
SetContentType 头 提 供 了 响应 文档 的 MIME (Multipupose Intermet Mail Extension， 多 用 途 Internet 邮件 扩展 ) 
类 型 。 通 过 Response.setContentTypeO 语 句 来 设置 HTTP 的 响应 头 ， 返 回 固定 格式 的 页 面 。 


实例 529 


图 实例 说 明 

网 站 上 提供 的 信息 很 全 面 ， 如 果 能 将 需要 的 内 容 直接 保存 到 Word 中 ， 将 会 为 浏览 者 提供 极 大 的 方便 。 本 
实例 便 实现 了 这 样 的 功能 ， 运 行程 序 ， 如 图 20.5 所 示 ， 选 择 要 查询 的 专业 名 称 ， 单 击 “ 查 询 ” 按 钮 ， 查 询 结果 
将 自动 以 Word 文档 显示 到 JSP 页 面 上 ， 如 图 20.6 所 示 。 


% 3 Es -| 喘 | 罗 | 三 | | 坊 
Ky 7 
按 专业 查询 
网 页 设计 师 ~ 查询 
图 20.5 查询 页 面 信息 图 20.6 将 查询 结果 保存 到 word 中 


图 关键 技术 


本 实例 主要 应 用 HttpServletResponse 类 的 setContentType() 方 法 设置 文件 的 表现 形式 ， 因 本 例 是 从 数据 库 中 
查询 出 信息 并 将 查询 结果 显示 到 Word 中 , 所 以 将 index.jsp 页 面 中 的 下 拉 列 表 框 的 name 属性 设置 为 profession， 
在 ServerWord 类 中 获取 到 查询 条 件 ， 代 码 如 下 : 


String profession = request.getParameter("profession"); 


然后 实例 化 数据 库 类 的 操作 并 执行 executeQuery(sqD) 方 法 ， 最 后 使 用 while0 语 句 循环 输出 结果 集 。 


图 设计 过 程 
(1) 创建 indexjsp 页 面 ， 在 页 面 中 添加 Form 表单 ， 在 下 拉 列 表 框 中 输出 查询 条 件 ， 关 键 代码 如 下 
<% 


UserDao connection = new UserDao(); 
ResultSet rs = connection.executeQuery("select distinct profession from tb_word"); 
%> 


<body> 
<div align="center > 
<br> 


<table width="222" height="225" border="0" cellpadding="0" cellspacing="0"> 
<t> 
<td background="iefisearchgiPp><div align="center"> 按 专业 查询 

<div> 

<form name="form" method="post”" action="Server Word"> 
<table width="222" height="34" border="0" cellpadding="0" cellspacing="0"> 

<tr align="center > 

<td width="174" height="32"> 
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<select name="profession"> 
<% 
try{ 
while (rs.nextO) { 
%> 
<option value="<%=rs.getString("profession")%> "><%=rs.getString("profession")%> </option> 
<%}} catch (SQLException e) {} 
connection.closeConnectionO: 
%> 
</select> 
</itd> 
<td width="148”> 
<input type="submit” name="Submit2" value=" 昔 询 
</td> 
(2) 创建 UserDao 类 ， 定 义 数据 库 的 连接 查询 和 关闭 的 方法 ， 关 键 代码 如 下 : 
public class UserDao { 
private final String url = "jdbc:mysql://localhost:3306/db_database16"; 
Private final String userName = "root"; 
Private final String password = "111"; 
Private Connection con = null; 
Private Statement stmt = null: 
Private ResultSet rs = null; 
public UserDao0 { /通过 构造 方法 加 载 数据 库 驱动 
try{ 
ClassforName("com.mysql.jdbc.Driver").newInstance(); 
} catch (Exception ex) { 
System.out.printIn(" 数 据 库 加 载 失败 "); 
} 


} 
/创建 数据 库 连接 
public boolean creatConnection0 { 
try{ 
con = DriverManager.getConnection(url, userName, password): 
con.setAutoCommit(true); 
} catch (SQLException e) { 
System.out.printin(e.getMessage()); 
System.out.println("creatConnectionError!"); 
} 


return true; 


/对 数据 库 的 查询 操作 
public ResultSet executeQuery(String sqD { 
ResultSet rs; 
try{ 
这 (con 一 mu) { 
creatConnection(); 


Statement stmt = con.createStatementO: 

try{ 
rs= stmt.executeQuery(sql): 

} catch (SQLException e) { 
System.out.printin(e.getMessageO); 
return null: 


} 

} cateh (SQLException e) { 
System.out.printin(e.getMessageO): 
System.out.printin("executeQueryError!"): 
return null; 

} 

return rs: 

} 
} 


(3) 创建 ServerWord.java 类 ， 该 类 继承 HttpServlet 类 ， 主 要 执行 doPost0 和 doGet0 方 法 ， 在 Form 表单 中 
触发 ServerWord 类 中 的 方法 ， 关 键 代码 如 下 : 
publie void doGet(HttpServletRequest request, HttpServietResponse response) throws 


ServletException, IOException { 
response.setContentType("application/msword"): 
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String profession = request.getParameter("profession"): 

了 PrintWiiter out = response.get WriterO; 

String sql = "select * from tb_word where profession=" + profession +"": 

UserDao connection = new UserDao0: 

ResultSet rs = connection.executeQuery(sq]); 

try{ 

while (rs.nextO) { 

out.print(rs.getString("name")); 
outprint(” "); 
Out.print(rs.getString("sex")); 
outprint(” "); 
out.print(rs.getString("age”)); 
outprint(” "); 
out.print(rs.getString("profession")); 
out.printin(); 


} 
} catch (SQLException ex) { 
connection.closeConnection(); 
} 
国 秘笈 心 法 
本 实例 比 实例 528 复杂 的 是 从 数据 库 中 读 取 信息 并 显示 在 页 面 中 ， 然 后 再 保存 到 Word 文档 ， 多 了 一 个 查 
询 语句 的 方法 ， 所 以 在 页 面 中 设置 下 拉 列 表 框 的 name 属性 来 标记 ， 从 而 实现 从 数据 库 中 取 读 信息 ， 代 码 如 下 : 


<select name="profession ”> 
<%try {while (rs.next)) {%> 
<option value="<9%=rs.getString("profession")%>"><%-1s.getString("profession")%> </option> 
<%}} catch (SQLException e) {} 
connection.closeConnection0: 


<jselect> 


其 中 在 while0 语 句 中 使 用 rs.next 来 循环 数据 库 中 所 有 的 下 拉 列 表 信 息 ， 并 使 用 rs.getString0 方 法 获取 。 


实例 530 


图 实例 说 明 

在 浏览 网 站 时 有 时 想 保存 其 中 一 个 页 面 ， 但 又 不 想 打开 Word 文档 ， 本 实例 的 操作 就 是 为 这 个 特点 编写 的 ， 
运行 本 实例 。 在 加 载 后 有 一 个 学 生 表 信 息 在 页 面 中 ， 单 击 “ 导 出 文档 ”按钮 ， 弹 出 相应 的 保存 界面 ， 效 果 如 
图 20.7 所 示 。 


GO-F » HE ， | 好 | 人 上 ET 万 


+ 再 可 移动 存储 的 设备 (1) 


到 闻 ” 曾 womasw 


20.7 以 Word 文档 保存 的 界面 
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图 关键 技术 


本 实例 在 实现 以 Word 文档 保存 时 应 用 了 contentType 属性 ,设置 为 application/msword 即 为 Word 文档 格式 ， 
并 用 StringBuffer 语句 把 要 导入 的 信息 保存 在 内 存 中 ， 页 面 的 信息 头 设置 代码 如 下 : 


Tesponse.setHeader("Content-Disposition", "attachment: filename=" + recommendedName + "\""); 


最 后 应 用 输出 流 ServletOutputStream 输出 保存 在 内 存 中 的 信息 。 
图 设计 过 程 

(1) 创建 index.jsp 页 面 ， 在 该 页 面 中 添加 一 个 学 生 表 的 表格 以 及 相关 元 素 ， 并 将 form 表单 中 的 method 
属性 使 用 post0 方 法 提交 ， 其 关键 代码 如 下 : 


<form action="ExportWordServiet” method="post"> 

<span id="iable”> 

<table bgcolor="#EEECF2" bordercolor="#43B2CC" border="1" cellspacing="0"> 
<tr><th> 学 号 </ 了 h><th> 姓 名 </ 耻 ><th> 科 目 </ 耻 ><th> 分 数 </th></tr> 
<tr><td>10001</td><td> 赵 二 </td><td> 高 数 </td><td>82</td></tr> 
<tr><td>10002</td><td> 张 三 </td><td> 高 数 </td><td>94</td></tr> 
<tr><td>10003</td><td> 李 四 </td><td> 高 数 </td><td>69</td></tr> 
<tr><td>10001</td><td> 赵 二 <jtd><td> 线 数 </td><td>77</td></tr> 
<tr><td>10002</td><td> 张 三 </td><td> 线 数 </td><td>61</td></tr> 
<tr><td>10003</td><td> 李 四 </td><td> 线 数 <jtd><td>87</td></tr> 

</table> 

</span><br/> 

<input type="submit” name="Ford”" value=" 学 内 区 档 "onclick="test0"/> 

<input type="hidden” id="tableInfo” name="tableInfo” value=""/> 
</form> 
(2) 编写 ExportWordServlet 类 ， 在 其 中 的 doPost0 方 法 中 实现 导出 文档 的 方法 ， 设 置 contentType 为 
application/msword， 即 以 Word 文档 格式 导出 ， 并 利用 输入 /输出 流 导出 文件 ， 其 关键 代码 如 下 : 

String fileName =" 导 出 数据 ": 1/ 设置 导出 的 文件 名 称 
StringBuffer sb=null: 
sb = new StringBuffer(request.getParameter("tableInfo")); 。 “// 将 表格 信息 放 入 内 存 
String contentType = "application/mswrod"; /设置 导出 文件 的 格式 
String recommendedName = new String(fileName.getBytes|."utf-8"); 
Tesponse.setContentType(contentType); 
Tesponse.setHeader("Content-Disposition", "attachment; filename=" + recommendedName + \""); 
Tesponse.resetBuffer(); 
/利用 输入 /输出 流 导出 文件 
ServletOutputStream sos = response.getOutputStream(); 
sos.write(sb.toString().getBytesO): 
sos.flushO; 
sos.close(O; 


(3) 在 web.xml 中 配置 ExportWordServlet 类 ， 关 键 代码 如 下 : 


<servlet> 

<servlet-name>ExportWordServlet</servlet-name> 
<servlet-class>ExportWordServlet</servlet-class> 

</servle> 

<servlet-mapping> 
<servlet-name>ExportWordServlet</servlet-name> 
<url-pattern>/ExportWordServlet</url-pattern> 

</servlet-mapping> 


图 秘笈 心 法 
在 JSP 中 应 用 Word 操作 时 , 由 于 微软 对 Word 的 源 代码 没有 公开 , 所 以 在 操作 Word 时 多 数 情况 会 使 用 POI 
或 JACOB 组 件 ， 前 者 应 用 Excel 多 一 些 ， 相 对 来 说 JACOB 组 件 应 用 Word 更 灵活 一 些 ， 只 是 它 只 能 运行 在 


Windows 平台 下 。 
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20.3 ”应 用 POI 组 件 导出 到 Word 
实用 指数 : 会 食 食 
图 实例 说 明 
数据 库 表 的 生成 方式 有 很 多 ， 有 使 用 饼 形 图 、 折 线 图 、 柱 形 图 等 比较 直观 方式 的 ， 也 有 使 用 各 种 表格 的 ， 
但 是 考虑 报表 的 修改 与 其 他 需要 调整 的 因素 ,最 好 为 报表 实现 导出 到 Excel 或 Word 文档 的 功能 ， 这 样 可 以 把 数 
据 保 存 成 工作 文档 ， 更 加 方便 用 户 的 使 用 。 本 实例 使 用 POI 开源 组 件 实现 将 数据 库 导出 到 Word 文档 中 ， 程 序 
运行 结果 如 图 20.8 所 示 ， 页 面 中 表格 的 数据 是 从 数据 库 读 取 的 图 书信 息 ， 单 击 表单 下 方 的 “导出 到 Word 文件 ” 


超 链接 ， 后 台 程序 会 重新 读 取 数 据 库 中 的 数据 ， 并 生成 Word 文档 ， 如 图 20.9 所 示 。 
EE 
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将 数据 库 中 的 数据 写 入 到 Word 文 档 
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图 20.8 程序 运行 页 面前 20.9 生成 的 Word 文档 


图 关键 技术 

本 实例 的 技术 要 点 都 来 自 于 POI 组 件 ， 它 是 本 实例 的 核心 组 件 ， 所 有 与 Word 文档 相关 的 操作 都 是 由 POI 
组 件 完 成 的 ， 下 面 介绍 实例 中 使 用 POI 组 件 的 关键 方法 。 

(1) 获取 DirectoryEntry 目录 对 象 。POIFSFileSystem 是 POI 文件 系统 ， 它 的 实例 对 象 的 getRoot0 方 法 可 

以 获取 DirectoryEntry 目录 对 象 ， 该 对 象 用 于 管理 POI 文件 系统 ， 其 语法 格式 如 下 : 

Public DirectoryNode getRootO 

该 方法 返回 值 的 类 型 是 DirectoryNode， 它 是 DirectoryEntry 接口 的 实现 类 。 

本 实例 的 实例 代码 首先 创建 了 POIFSFileSystem 类 的 实例 对 象 ， 然 后 通过 该 对 象 获取 DirectoryEntry 对 象 ， 


关键 代码 如 下 : 
POIFSFileSystem fs = new POIFSFileSystem(); /创建 POI 的 文件 系统 对 象 
DirectoryEntry directory = fs.getRoot|; 1/ 获取 目录 对 象 


(2) 创建 文档 对 象 。 要 读 写 Word 文档 ， 就 必须 创建 相应 的 DocumentEntry 文档 对 象 ，DocumentEntry 只 
是 一 个 文档 接口 ，DocumentNode 是 它 的 一 个 实现 类 ，createDocument0 方 法 可 以 创建 该 实现 类 的 实例 对 象 ， 其 
语法 格式 如 下 : 

Public DocumentEntry createDocument(String namejinputstream stream throws java.io JOException) 

参数 说 明 

@ name: 该 参数 是 文档 的 名 称 。 

@ stream: 该 输入 流 用 于 创建 文档 内 容 。 


第 20 章 JSP 操作 Word 


图 设计 过 程 

(1) 编写 BooksToWordService 类 ， 此 类 是 本 实例 的 业务 处 理 层 ， 它 实现 数据 读 取 和 保存 Word 文档 的 业 
务 ， 该 类 的 构造 方法 用 于 实例 化 BookDao 类 的 实例 对 象 ， 并 在 该 类 中 定义 getBooks0 方 法 ， 用 于 获取 用 户 所 有 
图 书信 息 的 数据 ， 其 关键 代码 如 下 : 


public class BooksToWordService { 
Private BookDao dao; 
public BooksToWordServiceO { 
dao =new BookDao0: 
} 


public List getBooksO { 
List books = new ArrayList|; 
try{ 
books = dao.getBooks|; 
} catch (Exception ex) { 
ex.printStackTrace(); 


1 
return books; 


} 
(2) 在 BooksToWordService 类 中 定义 downloadWordDoc0 方 法 ， 该 方法 首先 获取 所 有 图 书信 息 的 数据 集 
合 ， 然 后 遍历 数据 集合 ， 将 所 有 图 书信 息 添加 到 一 个 StringBuilder 类 的 实例 对 象 中 ， 该 对 象 是 字符 串 生成 器 ， 
最 后 该 字符 串 生成 器 中 的 字符 串 将 传递 给 writeWordDoc0 方 法 生成 Word 文档 ， 其 关键 代码 如 下 : 
Ppublic void downloadWordDoc(OutputStream out) { 


List books = getBooksO; // 获 取 所 有 图 书信 息 
StringBuilder sb = new StringBuilder(); // 创 建 字符 串 生成 器 
for (Object obj : books) { /遍历 图 书 数据 集合 

BookBean book = (BookBean) obj; 

sb.append(" 书 号 : "); // 添 加 图 书信 息 到 字符 串 生成 器 

sb.append(book.getISBNO + "\n"); 

sb.append(" 书 名 : "); 

sb.append(book.getBookNameQ + "\n"); 

sb.append(" 作 者 : "); 

sb.append(book.getWiiterO + "\n"); 

sb.append(" 出 版 社 :"); 

sb.append(book.getPublishingO + "\n"); 

sb.append(" 单 价 :"); 

sb.append(book.getPriceO + "\n"); 

sb.append(" 出 版 时 间 : "); 

Date date = book.getDate(); 

/创建 日 期 格式 化 对 象 

DateFormat df = DateFormat.getDateInstance(DateFormat.LONG):; 

sb.append(df format(date) + "\n"): 

sb.append("\n"): 


writeWordDoc(sb.toString().out): // 将 图 书信 息 写 入 到 输出 流 
} catch (Exception ex) { 
Logger.getLogger(getClass().getNameO).log(Level.SEVERE. null_ ex: 
} 
(3) 在 BooksToWordService 类 中 定义 writeWordDoc0 方 法 ， 它 用 于 创建 Word 文档 并 将 content 参数 中 的 
字符 串 保 存 为 Word 文档 ， 然 后 输出 到 ostream 参数 指定 的 输出 流 中 ， 其 关键 代码 如 下 : 


Private void writeWordDoc(String content,OutputStream ostream) { 


ByteArrayInputStream bais = null: // 创 建 字 节 输入 流 对 象 
try{ 
byte[] b = content.getBytesO: // 获 取 字 符 串 的 字 节 数组 
bais = new ByteAmrayInputStream(b); // 初 始 化 字 节 输入 流 对 象 
POIFSFileSystem fs = new POIFSFileSystem():; /创建 POI 的 文件 系统 对 象 
DirectoryEntry directory = 全 .getRootO: /获取 目录 对 象 
// 创 建文 档 对 象 
DocumentEntry de = directory createDocument("WordDocument". bais): 
fs.writeFilesystem(ostream): // 把 数据 写 入 到 输出 流 
} cateh (IOException 加 { 
eprintstackTrace0: 
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}finally { /释放 资源 
try{ 
if (bais = null) { 
bais closeO: 
if (ostream ‘= null) { 
ostream.close(); 


} catch (IOException ex) { 
Logger.getLogger(BooksToWordService.class.getName()).log(Level.SEVERE, null, ex); 


} 
(4) 创建 index.jsp 页 面 ,在 该 页 面 中 创建 BooksToWordService 业务 类 的 实例 对 象 , 调用 该 对 象 的 getBooks0 


方法 获取 所 有 图 书信 息 的 数据 集合 ， 然 后 遍历 该 数据 集合 , 在 表格 中 显示 所 有 图 书信 息 , 并 在 表格 下 方 添加 “ 导 
出 到 Word 文件 ” 超 链接 ， 其 关键 代码 如 下 : 


<table border= "> 
<thead style="backeround-color:#B5E1E2"> 
<t> 


<% 
for (inti= 0; i < list. ty 计 +H) { 
BookBean book = (BookBean) list.get(D); 
%> 

<b> 
<td><%=book.getISBNO%></td> 
<td><%=book.getBookNameO%></td> 
<td><%=book.getWrit 
<td><%=book.getPublishingO%></td> 
<td><%=book.getDate0%></td> 
<td><%=book.getPriceO%></td> 


<td colspan="6" align="center"> 
<a href="downjsp”> 导 出 到 Word 文件 </a> 
<td> 
<t> 


< 
</table> 
(5) 创建 downjsp 文件 ， 设 置 应 答对 象 的 内 容 类 型 为 application/octet-stream， 设 置 头 信息 Content-Disposition 
的 值 为 attachment:filename=download.xls, 然后 创建 BooksToWordService 的 实例 对 象 , 调用 该 对 象 的 downloadWord 
Doc0 方 法 ， 这 样 就 会 在 客户 端 出 现下 载 窗口 ， 其 关键 代码 如 下 : 
<body> 


<% 

out.clear(); 

out = pageContext.pushBodyO: 
response.setContentType("application/octet-stream"); 
response.setHeader("Content-Disposition", "attachment:filename=Books.doc"): 
OutputStream outs = response.getOutputStream(); 

BooksToWordService service = new BooksToWordServiceO: 
service.downloadWordDoc(outs): 

%> 


</body> 
图 秘笈 心 法 
本 实例 首先 创建 了 字 节 输入 流 , 该 输入 流 包 含 了 所 有 图 书信 息 , 然后 依次 创建 POIFSFileSystem、 DirectoryEntry 


和 DocumentEntry 对 象 。POI 组 件 是 本 实例 的 核心 组 件 ， 使 用 POI 下 的 POIFSFileSystem 来 创建 文件 系统 对 象 ， 
并 用 DirectoryEntry 来 获取 目录 对 象 ， 最 后 将 文档 内 容 写 入 指定 的 输出 流 。 
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”应 用 JXL 组 件 操 作 Excel 
WI 应 用 POI 组件 操作 Excel 
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21.1 应 用 JXL 组 件 操作 Excel 


在 软件 开发 过 程 中 ， 应 用 程序 对 办 公 软 件 的 操作 越 来 越 多 ， 尤 其 是 操作 微软 的 Excel 电子 表格 ， 经 常 需要 
将 一 些 数 据 库 数据 导出 Excel 文件 中 , 或 者 将 一 个 Excel 文件 数据 读 取 到 数据 库 中 。 本 节 将 介绍 如 何 应 用 开源 的 
JXL (Java Excel API) 组 件 来 操作 Excel， 下 面 通过 一 些 实例 介绍 JXL 组 件 的 用 法 。 


图 实例 说 明 
JXL 是 一 个 韩国 程序 员 开发 的 操作 Excel 的 Java 类 库 ， 应 用 JXL 可 以 方便 地 操作 Excel 电子 表格 。JXL 支 


持 Excel 95 到 Excel 2000 的 所 有 版 本 ， 能 够 生成 Excel 2000 标准 格式 ， 支 持 字体 、 数 字 、 日 期 操作 ， 能 够 修饰 
单元 格 属性 。 本 实例 首先 介绍 如 何 应 用 JXL 创建 Excel 工作 表 ， 程 序 运行 结果 如 图 21.1 所 示 。 


初级 
实用 指数 : 诅 评 全 


5 
| 应用 Ji| 建 ExoaT 作 条 EFT 7 | 


me mig WV AO WO 


诡 件 路 往 : EVest 


实 件 名 称 : 尖 斌 xs 
Eve 


一 


图 21.1 创建 Excel 工作 表 


图 关键 技术 


应 用 JXL 组 件 创建 Excel 工作 表 之 前 ， 需 要 应 用 jxl.Workbook 类 的 createWorkbook() 方 法 来 创建 一 个 Excel 

工作 夭 ， 然 后 再 由 工作 德 对 象 的 createSheet0 方 法 创建 工作 表 。 下 面 分 别 介绍 本 实例 用 到 的 类 和 方法 。 
(1) Workbook 类 

该 类 是 一 个 抽象 类 ， 创 建 该 类 的 实例 ， 表 示 创 建 一 个 Excel 工作 短 。 该 类 包含 一 个 用 于 创建 工作 敌 的 静态 
方法 createWorkbook0， 语 法 结构 如 下 : 

public static WritableWorkbook createWorkbook(java.io.File file) throws IJOException 

参数 说 明 

file: 表示 将 要 创建 的 Excel 文件 对 象 。 

功能 : 

创建 Excel 工作 短 。 

(2) WritableWorkbook 类 

该 类 是 一 个 抽象 类 ,该 类 的 实例 表示 工作 敌对 象 。 在 向 Excel 文件 中 写 入 数据 或 修改 Excel 样式 时 ， 都 是 由 
该 类 来 实现 的 。 该 类 中 包含 一 个 createSheet0 的 抽象 方法 ， 用 于 创建 工作 表 ， 语 法 结构 如 下 : 

public abstract WritableSheet createSheet(String name, int index); 

参数 说 明 

@ name: 表示 工作 表 的 名 称 。 

@ index: 表示 创建 的 是 第 几 个 工作 表 。 

功能 : 

创建 工作 表 。createSheet0 抽 象 方法 的 具体 实现 是 在 jxLwrite biff WritableWorkbookImpl 类 中 实现 的 ， 
WiritableWorkbookImpl 类 是 WritableWorkbook 的 派生 类 。 
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各 说明: JXL 组 件 的 jar 包 以 及 源码 文件 ， 可 以 到 http://www.andykhan.com/jexcelapi/ldownload .html 网 站 进行 
下 载 ， 下 载 之 后 将 ilLjar 文件 直接 复制 到 Web 工程 的 WEB-INF/lib 目录 下 即 可 。 


图 设计 过 程 
(1) 创建 操作 Excel 的 工具 类 ExcelOperationUtil.java， 首 先 在 该 类 中 导入 jxl 包 ， 然 后 编写 创建 Excel 工作 


簿 的 方法 createExcelFile0， 参 数 filePath 表示 文件 的 路 径 ， 参 数 fileName 表示 文件 名 。 其 关键 代码 如 下 : 
import jxl.*; 
import jxl.write. WritableSheet: 
import jxl.write. WritableWorkbook; 
public class ExcelOperationUtil { 
public boolean createExcelFile(String filePath.String fileName){ 
try{ 
WritableWorkbook book = Workbook.createWorkbook(new File(filePath,fileName)): /根据 File 文件 对 象 创建 工作 短 
WiritableSheet sheet = book.createSheet(" 第 一 页 ", 0); 1/ 创建 工作 表 ， 设 置 名 称 为 “第 一 页 ” 
book.write|); // 写 入 数据 
book.closeO; /关闭 文件 
return true; 
} catch (Exception e) { 
System.out] intiaC 腊 第 信 息 : "+e.getMessage()); 


(2) 创建 ndexjsp 页 面 ， 在 该 页 面 中 获取 表单 输入 的 文件 路 径 和 文件 名 ， 然 后 调用 ExcelOperationUtil 类 
的 createExcelFile0 方 法 创建 Excel 文件 。index.jsp 页 面 的 关键 代码 如 下 : 
< 


request.setCharacterEncoding("UTF-8"); 


String filePath = request. getParameter("filePath"); // 文 件 路 径 

String fileName = request.getParameter("fileName"); /文件 名 

iffilePath'=null&&filePath.equals("")S&c&fleName!-null&c&IfleName .equals("")){ // 判 断 文件 路 径 和 文件 名 是 否 为 空 
if(fileName.lastIndexOf(".")—-1){ 1/ 判断 是 否 包含 文件 名 后 缀 


fileName = fileNamet".xls"; 


i extendStr = fileName.substring(fileName.lastIndexOf(™".")); 
if(!extendStr.equals(".xls"){ 1/ 判断 文件 名 后 缀 是 否 为 Excel 文件 类 型 
out.printin("<script>alert( 文 件 错误 ， 文 件 类 型 为 .xls! ;</script>"); 
jelsef /文件 为 Excel 文件 类 型 时 ， 调 用 方法 进行 创建 
ExcelOperationUtil excelUtil= new ExcelOperationUtil(); 
boolean res = excelUtil.createExcelFile(filePath,fileName); 
if(res) 
outprintin("<script>alert( 创 建成 功 ! ");</script>"); 


» 
%> 
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在 获取 表单 输入 的 数据 之 后 ， 一 定 要 对 数据 的 正确 性 进行 合理 判断 ， 否 则 直接 将 表单 数据 提交 ， 可 能 会 产 
生 异 常 ， 这 也 是 程序 开发 必 不 可 少 的 步骤 之 一 。 


实例 533 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 将 JSP 表单 数据 导出 Excel 工作 表 中 。 运 行 本 实例 ， 如 图 21.2 所 示 ， 输 
入 员工 信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 员 工 信 息 将 被 导出 Excel 工作 表 中 。 
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【将 夫 单 信息 导出 潭 Exca] 
员工 性 别 : 避 男 局 女 
员工 年 肯 : 25 
医 系 电话 : 13377773999 


| 


Pa 


图 21.2 将 表单 信息 添加 到 Excel 工作 表 中 


图 关键 技术 


本 实例 主要 应 用 jxlwrite.WritableSheet 接口 的 addCell0 方 法 向 Excel 工作 表 的 单元 格 中 添加 数据 。 
WritableSheet 对 象 是 由 WritableWorkbook 对 象 创建 的 。WritableSheet 是 一 个 接口 ， 该 接口 的 所 有 方法 是 在 其 派 
生 类 jxl.write.biff.WritableSheetImpl 中 实现 的 。addCell0 方 法 的 语法 结构 如 下 : 

public void addCell(jxl.write. WritableCell arg0) throws jxl.write. WriteException, jxl.write.biff.RowsExceededException: 

参数 说 明 

jxl.write.WritableCell: 表示 一 个 单元 格 对 象 。 在 调用 addCell0 方 法 之 前 ， 首 先 需要 创建 单元 格 对 象 
WritableCell。 

WiritableCell 也 是 一 个 接口 , 具体 实现 是 由 它 的 子 类 完成 的 。 本 实例 创建 单元 格 对 象 时 , 用 的 是 WritableCell 
接口 的 Label 类 。Label 类 的 构造 方法 如 下 : 


Label label = new Label(int coLint row,String cont) 

参数 说 明 

@ col: 表示 Excel 工作 表 的 单元 格 所 在 列 的 索引 。 索 引 从 0 开始 。 
@ row: 表示 Excel 工作 表 的 单元 格 所 在 行 的 索引 。 索 引 从 0 开始 。 
@ cont: 表示 添加 到 Excel 单元 格 中 的 字符 串 内 容 。 


图 设计 过 程 
(1) 创建 用 于 封装 表单 信息 的 JavaBean 类 Employee， 其 关键 代码 如 下 : 


public class Employee { 
Private String name; 
Private String sex; 
Private int age: 
Private String telephone: 
过 二 // 此 处 省 略 了 属性 的 getXXX0 方 法 和 setXXXO0 方 法 


(2) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 信息 的 方 
法 addInfoToExcel0， 其 关键 代码 如 下 : 


public boolean addInfoToExcel(Employee emp){ 


try{ 
WritableWorkbook book = Workbook.createForkbook(new File("E:\\test\ 测 试 .xls")); 。“// 创 建 工作 簿 
WiritableSheet sheet = book.createSheet(" 第 一 页 ", 0); 1/ 创建 工作 表 
Label name = new Label(0. 0. "员工 姓名 "); 1/ 创建 单元 格 
Label sex = new Label(1.0," 员 工 性 别 "); 1/ 创建 单元 格 
Label age = new Label(2,0," 员 工 年 龄 "); /创建 单元 格 
Label telephone = new Label(3.0." 联 系 电话 "); 1/ 创建 单元 格 
Label name_value = new Label(0.1.emp.getNameO): /创建 单元 格 
Label sex_value = new Label(1.1.emp.getSexO): /创建 单元 格 
Label age_value = new Label(2.1.emp.getAgeO+""): /创建 单元 格 
Label tele_ value = new Label(3.1.emp.getTelephoneO): /创建 单元 格 
sheetaddCellname): /向 工作 表单 元 格 中 添加 内 容 
sheetaddCell(sex): /向 工作 表单 元 格 中 添加 内 容 
sheet.addCell(age): /向 工作 表单 元 格 中 添加 内 容 
sheet.addCell(telephone): // 向 工作 表单 元 格 中 添加 内 容 
sheet.addCell(name_value): // 向 工作 表单 元 格 中 添加 内 容 
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sheetaddCell(sex_value): 
sheet.addCell(age_value):; 
sheet.addCell(tele_value): 
book write0: 
book.closeO; 
return true; 

} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessageO): 
e.printStackTraceO; 
return false; 

} 


(3) 创建 indexjsp 页 面 , 获取 用 户 输入 的 表单 信息 


// 向 工作 表单 元 格 中 添加 内 容 
// 向 工作 表单 元 格 中 添加 内 容 
/向 工作 表单 元 格 中 添加 内 容 
1/ 将 所 有 内 容 写 入 Excel 
/关闭 


并 封装 在 Employee 对 象 中 , 然后 调用 ExcelOperationUtil 


类 的 addInfoToExcel0 方 法 ， 将 表单 信息 导出 Excel 工作 表 中 ， 其 关键 代码 如 下 : 
<% 


String submit = request.getParameter("submit"); 
if(submit!=nulD){ 
String name = new String(request.getParameter("name")); 
String sex= new String( request.getParameter("sex")); 
String age = request.getParameter("age"); 
String telephone = request.getParameter("telephone"); 
Employee emp = new Employee(); 
emp.setName(name); 
emp.setSex(sex); 
emp.setAge(Integer.parseInt(age)); 
‘emp.setTelephone(telephone); 
ExcelOperationUtil excelUtil = new ExcelOperationUtilO: 
boolean res = excelUtil.addInfoToExcel(emp); 
if(res) 
out.printin("<script>alert(' 信 息 导 出 成 功 ! ");</script>"); 
} 
%> 


图 秘笈 心 法 


在 Excel 单元 格 中 添加 完 信息 之 后 , 千 万 不 要 忘记 调用 Excel 工作 短 WritableWorkbook 对 象 的 write0 方 法 执 
调用 write0 方 法 的 日 的 是 将 缓存 中 的 数据 


行 写 入 操作 ， 因 为 在 调用 write0 方 法 之 前 ， 数 据 是 存储 在 缓存 中 的 ， 
写 到 文件 中 。 


实例 534 


图 实例 说 明 


实例 533 介绍 了 如 何 向 Excel 工作 表 中 添加 数据 ， 其 所 有 信息 都 是 以 字符 串 的 格式 添加 的 。 本 实例 将 介绍 
如 何 应 用 JXL 组 件 ， 将 数值 信息 添加 到 Excel 工作 表 中 。 运 行 本 实例 ， 如 图 21.3 所 示 ， 输 入 商品 名 称 、 商 品 数 


量 以 及 商品 单价 ， 当 单 击 “ 导 出 ”按钮 后 ， 商 品 信息 将 被 添加 到 Excel 
以 数值 的 格式 添加 的 。 


工作 表 中 ， 其 中 商品 数量 和 商品 单价 是 


21.3 ”向 Excel 工作 表 中 添加 数值 
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图 关键 技术 


向 Excel 工作 表 的 单元 格 中 添加 数值 类 型 的 数据 ， 主 要 是 应 用 jxLwrite Number 类 。 该 类 是 WritableCell 抽 
象 接口 的 实现 类 。 因 此 ， 创 建 的 Number 对 象 也 是 一 个 单元 格 对 象 ， 也 可 以 作为 工作 表 WritableSheet 对 象 的 
addCell0 方 法 的 参数 直接 添加 。Number 类 的 构造 方法 语法 如 下 : 


public Number(int ¢, intr double val) 
参数 说 明 


@c: 
四 1: 


表示 Excel 工作 表 的 单元 格 所 在 列 的 索引 。 索 引 从 0 开始 。 
表示 Excel 工作 表 的 单元 格 所 在 行 的 索引 。 索 引 从 0 开始 。 


目 val: 表示 添加 到 Excel 单元 格 中 的 double 类 型 的 数值 。 
图 设计 过 程 
(1) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 数值 信息 
的 方法 addInfoToExcel0， 其 关键 代码 如 下 : 


Public boolean addInfoToExcel(String name,String count, String price){ 


try{ 


WritableWorkbook book = Workbook.createForkbook(new File("E:\\test\\ 商 品 .xls")); 
WritableSheet sheet = book.createSheet(" 商 品 ", 0); 

Label label_name = new Label(0.0." 商 品名 称 "); 

Label label_count = new Label(1,0," 商 品 数量 "); 

Label label_price = new Label(2,0," 商 品 单价 "); 

Label name_value = new Label(0,1,name); 

/创建 数值 类 型 的 单元 格 对 象 

jxl.write.Number count_ Value = new jxl.write.Number(1,1,Double.parseDouble(count)); 
/创建 数值 类 型 的 单元 格 对 象 

jxLwrite .Number price_value = new jxl.write.Number(2,1,Double.parseDouble(price)); 
sheet.addCell(label_name); 

sheet.addCell(label_count); 

sheet.addCell(label_price): 

sheet.addCell(name_value); 

sheet.addCell(price_value); 

sheet.addCell(count_value); 

book.writeO; 

book.closeO; 

return true; 


} catch (Exception e) { 


} 
} 


System.out.printin(" 异 常 信息 : “+e.getMessageO): 
eprintStackTraceO: 
return false; 


(2) 创建 savejsp 页 面 ， 获 取 用 户 输入 的 表单 信息 ， 然 后 调用 ExcelOperationUtil 类 的 addInfoToExcel0 方 
法 ， 将 包含 数值 的 表单 信息 导出 Excel 工作 表 中 ， 其 关键 代码 如 下 : 


<%@ page language="java” import="java.util.*" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> 
<%@ page import="com.lh.util.ExcelOperationUtil” 9%> 
<% 


String submit = request.getParameter("submit"): 
if(submit!=nulD) { 


780 


String name = new String(request.getParameter("name").getBytes("ISO-8859-1")."UTF-8"): 
String count= new String( request.getParameter("count")); 
String price = Tequest getParameter("price"): 
ExcelOperationUtil excelUtil = new ExcelOperationUtil0: 
boolean res = excelUtil.addInfoToExcel(name.count.price): 
if(res) 
out.printin("<script>alert(' 信 息 导出 成 功 ! ):windowlocation href = 'index.jsp':</script>"): 
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图 秘笈 心 法 
在 实例 应 用 中 ， 由 于 需要 根据 数值 类 型 的 数据 进行 汇总 ， 因 此 需要 应 用 jxl.write.Number 对 象 向 Excel 工作 
表 中 添加 数值 类 型 的 数据 。 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 将 格式 化 的 数值 信息 添加 到 Excel 工作 表 中 。 运 行 本 实例 ， 如 图 21.4 所 
示 ， 输 入 蔬菜 名 称 和 全 国平 均 售 价 ， 当 单 击 “ 导 出 ”按钮 后 ， 蔬 菜 信息 将 被 添加 到 Excel 工作 表 中 ， 其 中 蔬菜 
的 全 国平 均 售 价值 的 小 数 点 后 保留 两 位 。 
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图 21.4 向 Excel 工作 表 中 添加 格式 化 数值 


图 关键 技术 

向 Excel 工作 表 中 添加 格式 化 数值 ， 主 要 应 用 的 是 jxLwrite NumberFormat 类 和 jxl.write.WritableCellFormat 
类 。 下 面 对 这 两 个 类 进行 详细 介绍 。 

(1) NumberFormat 类 

该 类 表示 数值 格式 化 模板 ， 构 造 方法 如 下 : 

public NumberFormat(String format) 

参数 说 明 

format: 表示 格式 化 字符 串 。 通 常用 “#” 表 示 格 式 化 字符 串 ， 如 设置 数值 的 小 数 点 后 保留 两 位 ， 那 么 格式 
化 字符 串 为 “# 需 ”。 

(2) WritableCellFormat 类 

该 类 表示 单元 格 的 格式 化 模板 ， 创 建 该 模板 对 象 后 ， 可 以 设置 单元 格 的 样式 以 及 单元 格 内 容 的 样式 。 该 类 
的 其 中 一 个 构造 方法 如 下 : 

public WritableCellFormat(DisplayFormat format) 

参数 说 明 

format: 该 参数 为 jxl.biff.DisplayFormat 接口 类 型 ， 而 NumberFormat 为 这 个 接口 的 其 中 一 个 实现 类 ， 所 以 
可 以 将 NumberFormat 对 象 作为 WritableCellFormat 类 的 构造 方法 参数 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 格式 化 数值 信息 


的 方法 addInfoToExcel0， 其 关键 代码 如 下 : 
public boolean addInfoToExcel(String name.String price){ 
try{ 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\\ 蔬 菜 xls”)); 
WritableSheet sheet = book.createSheet(" 蔬 菜 ". 0): 
Label label name = new Label(0.0." 蔬 菜 名 称 "): 
Label label_price = new Label(1.0." 全 国平 均 售 价 "); 
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Label name value = new Label(0.1Lnamej: 
NumberFormat format = new NumberFormat("###"):// 数 值 格式 化 模板 
WritableCellFormat cellFormat = new WritableCellFormat(format): 


// 创 建 数 值 类 型 的 单元 格 对 象 ， 并 且 应 用 指定 格式 
jxl.write. Number price_value = new jxl.write- Number(1,1.Double parseDouble(price).cellFormat); 


sheet.addCell(price_value); 
book write0: 
book.close0; 
return true; 
} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessageO): 
e.printStack TraceO; 
return false; 
} 
} 


图 秘笈 心 法 


在 实际 应 用 中 ， 有 时 需要 对 Excel 工作 表 中 添加 的 数值 信息 进行 格式 化 ， 如 要 求 数值 的 小 数 点 后 只 保留 两 
位 有 效 数字 。 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 将 表示 true 或 false 的 布尔 值 添 加 到 Excel 工作 表 中 。 运 行 本 实例 ， 如 
图 21.5 所 示 ， 输 入 蔬菜 名 称 和 市 场 平均 售 价 ， 然 后 选择 是 否 涨 价 ， 当 单 击 “ 导 出 ”按钮 后 ， 蔬 菜 信息 将 被 添加 
到 Excel 工作 表 中 ， 其 中 预测 是 否 涨 价 的 值 为 TRUE 或 FALSE。 
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图 21.5 向 Excel 工作 表 中 添加 boolean 值 
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图 关键 技术 


向 Excel 工作 表 中 添加 boolean 值 ， 主 要 应 用 的 是 jxl.write.Boolean 类 ， 该 类 实现 了 单元 格 抽 象 接口 
WiritableCell， 创 建 该 类 的 对 象 ， 表 示 一 个 boolean 值 的 单元 格 对 象 。jxl.write.Boolean 类 的 构造 方法 如 下 : 


public Boolean(int col, int row. boolean val) 

参数 说 明 

@ col: 表示 Excel 工作 表 的 单元 格 所 在 列 的 索引 。 索 引 从 0 开始 。 

@ row: 表示 Excel 工作 表 的 单元 格 所 在 行 的 索引 。 索 引 从 0 开始 。 
@ val: 表示 添加 到 Excel 单元 格 中 的 boolean 类 型 的 值 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 boolean 值 的 方 
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法 addInfoToExcel0， 其 关键 代码 如 下 : 

public boolean addInfoToExcel(String name.String price.String isUp){ 

try{ 
WritableWorkbook book = Workbook.createForkbook(new File("E:\\test\\ 蔬 菜 .xls")): 
WiritableSheet sheet = book.createSheet(" 蔬 菜 ", 0): 
Label label_name = new Label(0,0," 蔬 菜 名 称 "); 
Label label_price = new Label(1.0," 市 场 平均 售 价 "); 
Label label is = new Label(2.0." 预 测 是 否 涨 价 "); 
Label name_value = new Label(0,1.name); 


jxl.write. Boolean b: 

if(isUp.equals("yes"){ // 根 据 用 户 选择 的 值 ， 创 建 jxl.write.Boolean 对 象 
b= mewjxlwrite Boolean(2.1.true): 

jelsef /| 根据 用 户 选择 的 值 ， 创 建 jxLwrite Boolean 对 象 


b = new jxl.write.Boolean(2.1,false): 

} 

NumberFormat format = new NumberFormat("#.##"); /数值 格式 化 模板 
WritableCellFormat cellFormat = new WritableCellFormat(format):; 

/创建 数值 类 型 的 单元 格 对 象 ， 并 且 应 用 指定 格式 

jxl.write.Number price_value = new jxl.write.Number(1,1,Double.parseDouble(price).cellFormat): 
sheet.addCell(label_ name); 

sheet.addCell(label_price); 

sheet.addCell(name_value); 

sheet.addCell(price_value); 

sheet.addCell(label is); 

sheet.addCell(b); // 将 boolean 值 添加 到 指定 的 单元 格 


return true; 
} catch (Exception e) { 
System.out.printin(" 异 常 信息 : “+e.getMessageO); 
e.printStack Trace(); 
return false; 
} 
} 


图 秘笈 心 法 


在 实例 应 用 中 ， 有 时 需要 向 Excel 工作 表 的 某 一 列 中 添加 boolean 值 ， 此 时 就 需要 应 用 jxl.write.Boolean 类 
进行 处 理 。 


中 添加 日 期 时 间 初级 


实例 537 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 向 Excel 工作 表 中 添加 日 期 时 间 类 型 的 数据 。 运 行 本 实例 ， 如 图 21.6 所 
示 ， 输 入 用 户 信 息 ， 当 单 击 “导出 ”按钮 后 ， 用 户 信息 将 被 添加 到 Excel 工作 表 中 ， 其 中 生日 信息 为 日 期 时 间 
类 型 。 


图 关键 技术 


向 Excel 工作 表 中 添加 日 期 时 间 值 ， 主 要 应 用 的 是 jxl.write.DateTime 类 ， 该 类 实现 了 单元 格 抽象 接口 
WaitableCell， 创 建 该 类 的 对 象 ， 表 示 一 个 日 期 时 间 类 型 的 单元 格 对 象 。jxLwrite DateTime 类 的 构造 方法 如 下 : 


Public DateTime(int col, int row java.util. Date date) 

参数 说 明 

@ col: 表示 Excel 工作 表 的 单元 格 所 在 列 的 索引 。 索 引 从 0 开始 。 
@ row: 表示 Excel 工作 表 的 单元 格 所 在 行 的 索引 。 索 引 从 0 开始 。 
@ date: java.util.Date 类 型 的 参数 。 
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21.6 ”向 Excel 工作 表 中 添加 日 期 时 间 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 用 户 信息 的 方法 


addInfoToExcel0， 其 中 添加 的 用 户 生日 为 日 期 时 间 类 型 ， 其 关键 代码 如 下 : 

public boolean addInfoToExcel(String name,String sex,String age.String birthday){ 

try{ 
WritableWorkbook book = Workbook.createFForkbook(new File("E:\\test\ 用 户 信息 .xls")); 
WiritableSheet sheet = book.createSheet(" 用 户 信息 ", 0); 
Label label_name = new Label(0,0." 姓 名 "); 
Label label_sex = new Label(1,0," 性 别 "); 
Label label age= new Label(2,0," 年 龄 "); 
Label label_birthday = new Label(3.0." 生 日 9): 
Label name_value = new Label(0,1,name); 
Label sex_value = new Label(], 
Label age > value = new Label(2,1,age); 
String[] dateStr = birthday.split(" 1/ 分割 生日 字符 串 
Calendar c = Calendar.getInstanceO); // 创 建 Calendar 对 象 
/将 用 户 生日 的 年 月 日 设置 为 Calendar 对 象 的 年 月 日 
cset(Integer.parseInt(dateStr{0]), (Integer.parseInt(dateStr[1])-1). Integer.parseInt(dateStr[2])): 
1/ 创建 日 期 时 间 类 型 的 单元 格 对 象 ， 并 将 表示 用 户 生日 的 Calendar 对 象 添加 到 该 对 象 中 
jxl.write.DateTime date_value = new jxl.write.DateTime(3,1,c.getTime(); 
sheet.addCell(label_name); 


sheet.addCell(label_sex); 
sheet.addCell(label age); 
sheet.addCell(label birthday); 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value); 
sheet.addCell(date_value); 
book writeO: 

book close0: 

return true; 

} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessageO 〇 ); 
eprintStackTraceO; 
return false; 

} 

} 


图 秘笈 心 法 


在 实例 应 用 中 ， 经 常 需要 向 Excel 工作 表 中 添加 日 期 时 间 类 型 的 数据 ， 因 此 需要 应 用 jxl.write.DateTime 类 
进行 处 理 。 需 要 注意 的 是 ，Calendar 对 象 表示 的 月 份 范围 在 0 一 11 之 间 ， 所 以 在 为 Calendar 对 象 的 月 份 设置 值 
时 ， 必 须 将 月 份 值 减 1。 


实例 538 添加 格式 化 日 期 时 间 


图 实例 说 明 
实例 537 已 经 介绍 了 如 何 向 Excel 工作 表 中 添加 日 期 时 间 ， 其 格式 为 默认 类 型 。 有 时 根据 实际 需求 ， 需 要 
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添加 不 同 格式 的 日 期 时 间 值 。 本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 向 Excel 工作 表 中 添加 格式 化 的 日 期 时 间 类 型 
的 数据 。 运 行 本 实例 ， 如 图 21.7 所 示 ， 输 入 用 户 信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 用 户 信 息 将 被 添加 到 Excel 工 
作 表 中 ， 其 中 生日 类 型 为 yyyy-mm-dd。 


【 辣 Escd 工 作 表 中 添加 榈 式 化 日 区 间 ] 
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21.7 向 Excel 工作 表 中 添加 格式 化 日 期 时 间 


关键 技术 


向 Excel 工作 表 中 添加 格式 化 的 日 期 时 间 值 , 主要 应 用 的 是 jxLwrite DateFormat 类 ,该 类 表示 日 期 时 间 格 式 
器 。jxlLwrite .DateFormat 类 的 构造 方法 如 下 : 

public DateFormat(java.lang.String format) 

参数 说 明 

format: 表示 日 期 时 间 的 格式 化 字符 串 。 如 yyyy-mm-dd、yyyy mm dd、dd mm yyyy、yyyy MM dd hh:mmss 等 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 用 户 信 息 的 方法 
addInfoToExcel0， 其 中 添加 的 用 户 生日 格式 为 yyyy-mm-dd， 其 关键 代码 如 下 : 


public boolean addInfoToExcel(String name,String sex,String age,String birthday){ 
try{ 
WritableWorkbook book = Workbook.createForkbook(new File("E:\\test\ 用 户 信息 .xls")); 
WritableSheet sheet = book.createSheet(" 用 户 信息 ", 0); 
Label label_name = new Label(0,0," 姓 名 "); 
Label label_sex = new Label(1,0," 性 别 "); 
Label label_age = new Label(2.0." 年 龄 "): 
Label label_birthday = new Label(3,.0," 生 日 "); 
Label name_value = new Label(0.1.name): 
Label sex_value = new Label(1.1.sex); 
Label age_value = new Label(2.1.age); 
String[] dateStr = birthday.split("-"); 。 “”// 分 割 生日 字符 串 
Calendar c = Calendar'getJrstance0: 。“ // 创 建 Calendar 对 象 
/将 用 户 生日 的 年 月 日 设置 为 Calendar 对 象 的 年 月 日 
C.set(Integer.parseInt(dateStr[0]). (Integer.parseInt(dateStr{1))-1). Integer.parseInt(dateStr[2])): 
jxl.write.DateFormat format = new jxl.write.DateFormat("yyyy-mm-dd"): 
jxl.write. WritableCellFormat cellFormat = new jxl.write. WritableCellFormat(format): 
/创建 日 期 时 间 类 型 的 单元 格 对 象 ， 并 将 表示 用 户 生 日 的 Calendar 对 象 添加 到 该 对 象 中 
jxl.write.DateTime date_value = new jxl.write.DateTime(3,1.c.getTime().cellFormat); 
sheet.addCell(label_name); 
sheet.addCell(label_sex); 
sheet.addCell(label age): 
sheet.addCell(label_birthday): 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value): 
sheet.addCell(date_ value): 
bookwrite0: 
book.closeO; 
return true; 
} cateh (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessageO);: 
eprintStackTraceO: 
return false; 
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图 秘笈 心 法 
在 创建 jxlwrite DateFormat 对 象 时 ， 其 构造 方法 的 格式 化 参数 中 表示 年 份 的 字符 串 必须 为 小 写 英文 字母 
yyyy， 如 果 是 大 写 的 YYYY， 将 抛 出 异常。 


实例 539 
实用 指数 : 但 食 食 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JXL 组 件 设置 Excel 工作 表 字 体 样式 。 运行 本 实例 , 如 图 21.8 所 示 , 输入 用 户 信 息 ， 
当 单 击 “ 导 出 ”按钮 后 ， 用 户 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设 置 了 用 户 姓名 的 字体 样式 。 
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图 21.8 设置 Excel 工作 表 字 体 样式 


图 关键 技术 


设置 Excel 工作 表 的 字体 样式 ， 主 要 应 用 的 是 jxl.write.WritableFont 类 ， 该 类 主要 用 于 设置 字体 的 样式 ， 如 
字体 大 小 、 字 体 颜 色 、 是 否 带 有 下 划 线 等 。jxLwrite.WritableFont 类 的 构造 方法 如 下 : 


public WritableFont(WritableFont.FontName fn, int ps, WritableFont.BoldStyle bs, boolean it, jxl.format.UnderlineStyle us, jxl.format.Colour ¢) 

参数 说 明 

@ fn: 设置 字体 的 样式 名 称 。 例如 TIMES (Times New Roman)、ARIAL (Arial)、COURIER (Courier New)、 
TAHOMA (Tahoma) 等 。 

四 ps: 设置 字体 的 大 小 。 

@ bs: 设置 字体 是 否 加 粗 。 取 值 为 NO_BOLD (不 加 粗 ) 和 BOLD (加 粗 )。 

@it; 设置 字体 是 否 倾斜 。 取 值 为 tue〈 倾 斜 ) 和 false (不 倾斜 )。 

@ us: 设置 字体 是 否 带 有 下 划 线 。 取 值 包括 NO_UNDERLINE (无 下 划 线 )、SINGLE ( 单 下 划 线 )、 
SINGLE_ ACCOUNTING (会 计 用 单 下 划 线 )、DOUBLE ( 双 下 划 线 ) 和 DOUBLE _ACCOUNTING (会 计 用 双 下 
划 线 )。 

@ c: 设置 字体 颜色 。 包 括 一 些 常 用 的 字体 颜色 ， 如 RED、BLACK、GREEN、BLUE、PINK、YELLOW、 
GRAY 等 。 


力 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 用 户 信息 的 方法 


addInfoToExcel0， 在 该 方法 中 设置 了 用 户 姓名 单元 格 的 字体 样式 ， 其 关键 代码 如 下 : 
Ppublic boolean addInfoToExcel(String name.String sex.String age.String birthday){ 
try{ 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 用 户 信息 .xls")); 
WritableSheet sheet = book.createSheet(" 用 户 信息 ". 0): 
Label label name = new Label(0.0." 姓 名 "); 
Label label sex = new Label(1.0." 性 别 "); 
Label label_ age = new Label(2.0." 年 龄 "); 
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Label label birthday = new Label(3.0." 生 日 "): 
jxl.write. WritableFont font = new jxl.write. WritableFont(WritableFontARIAL. 15. WritableFont.BOLD. false. 


UnderlineStyle.SINGLE_ACCOUNTING. jxl.format.Colour.GREEN): /设置 字体 样式 
jxLwrite _WritableCellFormat fontFormat = new jxl.write.WritableCellFormat(font):// 创 建 单元 格 的 格式 器 对 象 ， 并 应 用 字体 样式 
Label name_value = new Label(0,1,name,fontFormat): // 将 字体 样式 应 用 于 此 单元 格 


Label sex_value = new Label(1, Lsex); 

Label age_value = new Label(2.1.age) 

Label birthday value= new Label(3,1.birthday); 

sheet.addCell(label_name): 

sheet.addCell(label sex): 

sheet.addCell(label age); 

sheet.addCell(label_birthday): 

sheet.addCell(name_value); 

sheet.addCell(sex_value); 

9 addCell(age_value); 
addCell(birthday value 

i 

book.close(): 


return true; 
} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessage(); 
e.printStackTrace(|); 
return false; 


} 
} 
图 秘笈 心 法 


在 实际 开发 应 用 过 程 中 ， 经 常 需 要 设置 Excel 工作 表 的 字体 样式 ， 此 时 就 需要 应 用 jxLwrite.WritableFont 类 
进行 处 理 ， 因 此 读者 应 该 掌握 这 个 类 的 用 法 。 
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图 实例 说 明 


本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 对 Excel 工作 表 的 单元 格 进行 合并 。 运 行 本 实例 ， 如 图 21.9 所 示 ， 输 入 
用 户 信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 用 户 信息 将 被 添加 到 Excel 工作 表 中 ， 并 且 对 单元 格 进行 了 合并 操作 。 
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图 21.9 合并 Excel 工作 表 的 单元 格 


图 关键 技术 


对 Excel 工作 表 的 单元 格 进行 合并 ， 主 要 应 用 的 是 jxl.write.WritableSheet 接口 的 mergeCells0 方 法 ， 该 方法 
的 语法 结构 如 下 : 

public jxl Range mergeCells(int coll. int row1, int col2, int row2) throws jxl.write. WriteException, jxl.write.biff RowsExceededException: 

参数 说 明 

@ coll: 表示 要 合并 单元 格 的 起 始 位 置 单 元 格 的 列 索 引 。 索 引 从 0 开始 。 

@ Iow1: 表示 要 合并 单元 格 的 起 始 位 置 单元 格 的 行 索引 。 索 引 从 0 开始 。 
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自 col2: 表示 要 合并 单元 格 的 结束 位 置 单 元 格 的 列 索引 。 索 引 从 0 开始 。 
@ row2: 表示 要 合并 单元 格 的 结束 位 置 单 元 格 的 行 索引 。 索 引 从 0 开始 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 用 户 信息 的 方法 
addImfoToExcel0， 在 该 方法 中 对 Excel 工作 表 的 单元 格 进行 合并 操作 ， 其 关键 代码 如 下 : 


public boolean addInfoToExcel(String name,String sex.String age.String birthday){ 
try{ 
WritableWorkbook book = Workbook.createFForkbook(new File("E:\\test\ 用 户 信息 .xls")); 
WritableSheet sheet = book.createSheet(" 用 户 信息 ", 0); 
jxl.write. WritableFont font = new jxl.write. WritableFont(WritableFont-ARIAL, 15, WritableFont.BOLD. false,UnderlineStyle.SINGLE., jxl.format. 
Colour. GREEN): /设置 字体 样式 
jxl.write. WritableCellFormat fontFormat = new jxlwrite.WritableCellFormat(font: 
Label label title = new Label(0,0," 用 户 信息 ",fontFormat); ”// 单 元 格 应 用 字体 样式 
sheet mergeCells(0.0.3.0): /合并 第 1 行 的 第 1 一 第 3 个 单元 格 
Label label_name = new Label(0,1," 姓 名 "); 
Label label_sex = new Label(1,1," 性 别 "); 
Label label_ age = new Label(2,1," 年 龄 "); 
Label label_birthday = new Label(3,1," 生 日 "); 
Label name_value = new Label(0,2,name); 
Label sex_value = new Label(1,2,sex); 
Label age_value = new Label(2,2,age); 
Label birthday_value = new Label(3.,2.birthday): 
sheet.addCell(label title); 
sheet.addCell(label_name); 
sheet.addCell(label_sex); 
sheet.addCell(label age); 
sheet.addCell(label_birthday); 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value); 
sheet.addCell(birthday_value); 
book writeO: 
book.closeO; 
return true; 
} catch (Exception e) { 
System.out.printin(" 异 常 信息 : “+e.getMessageO): 
e.printStack Trace(); 
return false; 


} 
} 


图 秘笈 心 法 
应 用 jxl.write.WritableSheet 类 的 mergeCells0 方 法 合并 单元 格 既 可 以 是 横向 的 ， 也 可 以 是 纵向 的 。 需 要 注意 
的 是 ， 合 并 后 的 单元 格 不 能 再 次 进行 合并 ， 否 则 会 触发 异常 。 


实例 541 2 


实用 指数 ， 友 要 去 。 


图 实例 说 明 

在 实例 540 中 实现 了 合并 单元 格 的 操作 ， 但 是 在 合并 后 的 单元 格 中 添加 的 内 容 默 认 是 左 对 齐 的 。 本 实例 将 
介绍 如 何 应 用 JXL 组 件 ， 设 置 Excel 工作 表 的 单元 格 内 容 水 平 居中 。 运 行 本 实例 ， 如 图 21.10 所 示 ， 输 入 用 户 
信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 用 户 信息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设 置 “ 用 户 信息 ”标题 为 水 平 居中 


显示 。 
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图 关键 技术 


第 21 章 JSP 操作 Excel 


国 wiaoscf Excel -RP 人 Sxs [cal 
HD MAD nV AD WtO) 


【 守 间 Fea 工 作 未 单元 格 了 
ES 


21.10 设置 Excel 工作 表 的 单元 格 内 容 水 平 居中 


设置 Excel 工作 表单 元 格 内 容 水 平 居中 , 主要 应 用 的 是 jxl.write.WritableCellFormat 类 的 setAlignment( 方 法 。 
WritableCellFormat 用 于 格式 化 单元 格 的 样式 ， 如 单元 格 的 字体 样式 、 单 元 格 边框 样式 、 背 景 颜色 、 单 元 格 凹 陷 、 


单元 格 锁定 、 单 元 格 内容 水 平 居中 以 及 单元 格 内 容 垂 直 居 中 等 。setAlignment( 方 法 的 语法 结构 如 下 : 


public void setAlignmentGxLformat Alignment alignment) throws jxLwrite WiriteException 


参数 说 明 


alignment: 参数 类 型 为 jxlformat.Alignment。Alignment 专门 用 于 设置 单元 格 内 容 的 水 平 对 齐 方式 ， 对 齐 方 
式 的 参数 为 静态 参数 ， 因 此 可 以 直接 用 Alignment 类 名 进行 调用 , 如 Alignment.LEFT ( 左 对 齐 )、Align.CENTER 
(居中 对 齐 )、Alignment.RIGHT ( 右 对 齐 ) 等 。 


图 设计 过 程 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 用 户 信息 的 方法 


addInfoToExcel0， 在 该 方法 中 设置 Excel 工作 表 的 “用 户 信息 ”标题 水 平 居 中 显示 ， 其 关键 代码 如 下 : 


public boolean addInfoToExcel(String name,String sex,String age,String birthday){ 


try{ 


WritableWorkbook book = Workbook.createFrorkbook(new File("E:\\test\ 用 户 信息 .xls")); 
WritableSheet sheet = book.createSheet(" 用 户 信息 ", 0); 
jxl.write. WritableFont font = new jxl.write.WiritableFont(WiritableFont.ARL4L.15, WritableFont.BOLD false.UnderlineStyle.SINGLE, jxl.format. 


Colour. GREEN): 


/设置 字体 样式 


jxl.write. WritableCellFormat fontFormat = new jxl.write. WritableCellFormat(font); 


fontFormat.setAlignment(Alignment.CENTRE): 


/设置 单元 格 内 容 水 平 居中 


Label label_title = new Label(0.0," 用 户 信息 ",fontFormat): /单元 格 应 用 字体 样式 


sheet.mergeCells(0,0,3,0); 


Label label_name = new Label(0,1," 姓 名 "); 
Label label_sex = new Label(1,1," 性 别 "); 

Label label_ age = new Label(2,1," 年 龄 "); 

Label label_birthday = new Label(3.1." 生 日 "); 
Label name_value = new Label(0,2.name); 
Label sex_value = new Label(1.2.sex); 

Label age_value = new Label(2.2.age); 

Label birthday_value = new Label(3,2.birthday): 


sheet.addCell(label title); 
sheetaddCell(label_name): 
sheet.addCell(label_sex): 
sheet.addCell(label_ age); 
sheet.addCell(label_birthday); 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value): 


sheet.addCell(birthday_value): 


book write0: 
book.close0: 
return true; 


} catch (Exception €) { 
System.out.printin(" 异 常 信息 : 


e.printStackTrace(); 
return false; 


"+e.getMessageO); 


/合并 第 1 行 的 第 1 一 第 3 个 单元 格 
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图 秘笈 心 法 
jxl.write.WiritableCellFormat 类 非常 重要 ， 通 过 它 可 以 指定 单元 格 的 各 种 属性 。 在 应 用 Excel 电子 表格 时 ， 对 
Excel 工作 表单 元 格 的 样式 设置 是 必 不 可 少 的 ， 所 以 应 该 掌握 WritableCellFormat 类 的 用 法 。 


实例 542 | 
实用 指数 ， 庚 友 去 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 设 置 Excel 工作 表 的 行 高 度 。 运 行 本 实例 ， 如 图 21.11 所 示 ， 输 入 员工 
信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 员 工 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设 置 “ 员 工 信 息 ” 标 题 行 的 行 高 为 
20 像素 。 在 Excel 工作 表 中 ， 使 用 鼠标 单 击 行 的 索引 ， 然 后 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “ 行 高 ” 
命令 ， 即 可 查看 该 行 的 高 度 。 


【设置 Exce 工 作 表 的 行 高 】 


21.11 设置 Excel 工作 表 的 行 高 


图 关键 技术 


设置 Excel 工 作 表 的 行 高 ,主要 应 用 的 是 jxLwrite .WiitableSheet 接 口 的 setRowView0 方 法 。 通 过 setRowView0 
方法 可 以 设置 指定 行 1 的 高 度 ， 其 语法 结构 如 下 : 
public void setRowView(int row, int height.boolean collapsed) throws RowsExceededException; 
参数 说 明 
@ row: 指定 要 设置 行 高 的 行 索 引 ， 索 引 从 0 开始 。 索 引 为 0 即 表示 Excel 工作 表 的 第 一 行 。 
@ height 指定 行 的 高 度 。 
上 @ collapsed: 指定 是 否 隐 藏 该 行 。 可 选 参数 ， 取 值 为 tme 或 false。 默 认 值 为 false， 即 不 隐藏 。 
图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 
addInfoToExcel0， 在 该 方法 中 设置 Excel 工作 表 的 “员工 信息 ”标题 行 的 行 高 ， 其 关键 代码 如 下 : 
让 让 boolean addInfoToExcel(String name.String sex.String age,String dept){ 
try 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 员 工 信 息 .xls")); 
WritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0); 
jxl.write.WritableFont font = new jxlwrite.WritableFont(WritableFontARI4L. 15. WiritableFont.BOLD, false.UnderlineStyle.SINGLE, 
jxlformat.Colour.GREEN): /设置 字体 样式 
jxlwrite WritableCellFormat fontFormat = new jxl.write.WritableCellFormat(font): 
fontFormat.setAlignment(Alignment.CENTRE): 
Label label title = new Label(0.0." 员 工 信 息 表 ".fontFormat): 
sheet mergeCells(0.0.3.0): /合并 第 1 行 的 第 1 一 4 个 单元 格 
sheet setRowView(0. 400,false); // 设 置 第 1 行 的 行 高 
Label label_name = new Label(0.1." 姓 名 "); 
Label label_sex = new Label(1,1." 性 别 "); 
Label label age = new Label(2.1," 年 龄 "): 
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Label label_dept = new Label(3.1," 所 在 部 门 "): 
Label name value = new Label(0,2.name); 
Label sex_value = new Label(1,2,sex); 

Label age_value = new Label(2.2.age); 


sheet.addCell(label_dept); 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value); 
sheet.addCell(dept_value): 
book.writeO; 

book.closeO; 

return true; 

} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessageO); 
e.printStack Trace(); 
return false; 

} 

} 


图 秘笈 心 法 
应 用 jxl.write.WritableSheet 接口 的 setRowView0 方 法 设置 行 的 高 度 时 , 所 设置 的 Excel 工作 表 的 行 高 并 不 是 


setRowView0 方 法 中 设置 的 高 度 值 height， 而 是 把 height 值 除 以 20 后 的 值 再 设置 为 Excel 工作 表 的 行 高 。 从 本 
实例 的 代码 中 可 以 看 出 ，setRowView0 方 法 中 设置 的 高 度 为 400, 但 实际 上 在 该 方法 的 具体 实现 时 是 除 以 20 的。 


实例 543 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 设 置 Excel 工作 表 的 列 宽 。 运 行 本 实例 ， 如 图 21.12 所 示 ， 输 入 员工 信 
息 ， 当 单 击 “ 导 出 ”按钮 后 ， 员 工 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设 置 每 一 列 的 列 宽 为 20。 
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【设置 Exccl 工 作 表 的 列席 】 


员工 姓名 :无语 


21.12 设置 Excel 工作 表 的 列 宽 


图 关键 技术 


设置 Excel 工作 表 的 列 宽 ， 主 要 应 用 的 是 jxl.write.WritableSheet 接口 的 setColumnView0 方 法 。 通 过 
setColumnView0 方 法 可 以 设置 指定 第 i 列 的 宽度 ， 其 语法 结构 如 下 : 

public void setColumnView(int col, int width) 

参数 说 明 

@ col: 指定 要 设置 列 宽 的 列 索 引 ， 索 引 从 0 开始。 索引 为 0 时 即 表示 Excel 工作 表 的 第 一 列 。 

@ width: 指定 列 的 宽度 。 
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图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 


addInfoToExcel0， 在 该 方法 中 设置 Excel 工作 表 的 列 宽 ， 其 关键 代码 如 下 : 
public boolean addInfoToExcel(String name.String sex.String age.String dept){ 


try{ 


WritableWorkbook book = Workbook.createFForkbook(new File("E:\\test\ 员 工 信 息 .xls")); 

WiritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0): 

/设置 字体 样式 

jxLwrite WritableFont font = new jxl.write.WritableFont(WritableFont-ARIAL, 15. WritableFont.BOLD, false,UnderlineStyle.SINGLE, 


jxl.format.Colour.GREEN): 


jxl.write. WritableCellFormat fontFormat = new jxl.write. WritableCellFormat(font): 
fontFormat.setAlienment(Alignment.CENTRE): 

Label label title = new Label(0.0," 员 工 信 息 表 ".fontFormat); 
sheet.mergeCells(0,0,3,0);// 合 并 第 一 行 的 第 1 一 第 4 个 单元 格 
sheet.setRowView(0, 400,false); /设置 第 1 行 的 行 高 
sheet.setColumnView(0, 20) /设置 第 1 列 宽度 
sheet.setColumnView(1, 20) /设置 第 2 列 宽度 
SheetsetColumnView(2.2 /设置 第 3 列 宽度 
sheet.setColumnView(3, 20); /设置 第 4 列 宽度 

Label label_name = new Label(0,1," 姓 名 "); 

Label label_sex = new Label(1,1," 性 别 "); 

Label label_age = new Label(2.1," 年 龄 "); 

Label label_dept = new Label(3.1," 所 在 部 门 "); 

Label name_value = new Label(0.2.name); 

Label sex_value = new Label(1,2,sex); 

Label age_value = new Label(2,2,age); 

Label dept_value = new Label(3,2.dept); 
sheet.addCell(label title); 

sheet.addCell(label_name); 

sheet.addCell(label_sex); 

sheet.addCell(label age); 

sheet.addCell(label_dept); 

sheet.addCell(name_value); 

sheet.addCell(sex_value); 

sheet.addCell(age_value); 

sheet.addCell(dept_value); 

book.writeO; 

book.closeO: 

return true; 


} catch (Exception e) { 


} 
} 


System.out.printin(" 异 常 信息 : “+e.getMessageO): 
e.printStack Trace(): 
return false; 


图 秘笈 心 法 

在 实际 应 用 中 ， 由 于 Excel 工作 表 的 某 一 列 的 内 容 特 别 多 ， 那 么 应 用 默认 的 列 宽 时 ， 单 元 格 的 内 容 并 不 能 
完全 显示 。 例 如 ， 某 一 列 为 日 期 时 间 类 型 的 数据 ， 如 果 宽 度 不 够 ， 将 只 显示 “#” 号 。 所 以 在 应 用 JXL 组 件 操 
作 Excel 时 ， 应 该 及 时 应 用 setColummView0 方 法 设置 列 宽 。 


实例 544 


Ld 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JXL 组 件 ,设置 Excel 工作 表 的 单元 格 内 容 垂直 居中 显示 。 运 行 本 实例 ， 如 图 21.13 
所 示 ， 输 入 员工 信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 员 工 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设 置 “ 员 工 信 息 表 ” 
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标题 垂直 居中 显示 。 
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图 21.13 设置 Excel 工作 表 的 单元 格 内 容 垂直 居中 显示 


图 关键 技术 


设置 Excel 工作 表单 元 格 内 容 垂直 居中 显示 ， 主 要 应 用 的 是 jxl.write.WritableCellFormat 类 的 setVertical 
Alignment(0 方 法 。WritableCellFormat 用 于 格式 化 单元 格 的 样式 ， 如 单元 格 的 字体 样式 、 单 元 格 边框 样式 、 背 景 
颜色 、 单 元 格 凹 陷 、 单 元 格 锁定 、 单 元 格 内 容 水 平 居中 以 及 单元 格 内 容 垂 直 居 中 等 。setVerticalAlignment() 方 法 
的 语法 结构 如 下 : 

public void setVerticalAlignment(VerticalAlignment va) throws WriteException 

参数 说 明 

Va: 参数 类 型 为 jxl.format.VerticalAlignment。VerticalAlignment 专门 用 于 设置 单元 格 内 容 的 垂直 对 齐 方式 ， 
对 齐 方式 的 参数 为 静态 参数 , 因此 可 以 直接 用 VerticalAlignment 类 名 进行 调用 , 如 VerticalAlignment.TOP( 居 项 )、 
VerticalAlignment.CENTER 〈 居 中 )、VerticalAlignmentBUTTOM ( 居 底 ) 等 。 


图 设计 过 程 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 


addInfoToExcel0， 在 该 方法 中 设置 “员工 信息 表 ” 标 题 垂 直 居 中 显示 ， 其 关键 代码 如 下 : 
public boolean addInfoToExcel(String name,String sex,String age,String dept){ 
try{ 
WritableWorkbook book = Workbook.createFrorkbook(new File("E:\\test\ 员 工 信 息 .xls")); 
WritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0); 
jxl.write. WritableFont font = new jxl.write.WritableFont(WritableFontARIAL, 15, WritableFont.BOLD, false,UnderlineStyle.SINGLE, 
jxLformat.Colour GREEN): /设置 字体 样式 
jxlwrite.WritableCellFormat fontFormat = new jxl.write. WritableCellFormat(font); 
fontFormat.setAlignment(Alignment.CENTRE): 
fontFormat.setVertical Alignment(VerticalAlignment.JUSTIFY); /设置 单元 格 内 容 垂直 居中 显示 
Label label title = new Label(0.0." 员 工 信 息 表 ".fontFormat): 
sheetmergeCells(0.0.3.0): /合并 第 1 行 的 第 1 一 第 4 个 单元 格 
sheet setRowView(0. 600 ,false); /设置 第 1 行 的 行 高 
Label label_name = new Label(0,1." 姓 名 "); 
Label label_sex = new Label(1.1." 性 别 "); 
Label label age = new Label(2.1." 年 龄 "): 
Label label_dept = new Label(3.1." 所 在 部 门 "); 
Label name_value = new Label(0.2.name): 
Label sex_value = new Label(1.2.sex); 
Label age_value = new Label(2,2.age); 
Label dept_value = new Label(3,2,dept): 
sheet.addCell(label title); 
sheet.addCell(label_name); 
sheet.addCell(label_sex); 
sheet.addCell(label age); 
sheet.addCell(label_dept): 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value); 
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} catch (Exception €) { 
System.out.printin(" 异 常 信息 : "+te.getMessage0 〇 ); 
e.printStackTrace(); 
return false; 

} 

} 


图 秘笈 心 法 


在 实际 应 用 中 ， 根 据 需求 可 能 需要 设置 单元 格 的 内 容 垂直 显示 样式 ， 这 就 需要 应 用 jxl.write.WritableCell 
Format 类 的 setVerticalAlignment0 方 法 进行 设置 。 


故 的 单元 格 内 容 自动 换行 初级 


实用 指数 ， 庚 良友 | 
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力 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 设 置 Excel 工作 表 的 单元 格 内 容 自 动 换行 。 运 行 本 实例 ， 如 图 21.14 所 
示 ， 输 入 员工 信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 员 工 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设 置 “ 所 在 部 门 ” 单 
元 格 内 容 自动 换行 。 
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21.14 设置 Excel 工作 表 的 单元 格 内 容 自动 换行 


图 关键 技术 

设置 Excel 工作 表单 元 格 内 容 自动 换行 ， 主 要 应 用 的 是 jxLwrite.WritableCellFormat 类 的 setWrap() 方 法 。 
setWrap0 方 法 的 语法 结构 如 下 : 

public void setWrap(boolean w) throws WriteException 

参数 说 明 

w: 指定 是 否 换行 。 取 值 为 true 或 false。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 


addImfoToExcel0， 在 该 方法 中 设置 了 “所 在 部 门 ”单元 格 的 自动 换行 ， 其 关键 代码 如 下 : 
让 车 boolean addInfoToExcel(String name,String sex.String age.String dept){ 
try 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 员 工 信 息 .xls")); 
WritableSheet sheet = book.createSheet(" 员 工 信 息 ". 0); 
jxl.write.WritableFont font = new jxlwrite.WritableFont(WritableFontARIAL. 15. WritableFont.BOLD. false.UnderlineStyle.SINGLE, 
jxl.format.Colour.GREEN): // 设 置 字体 样式 
jxl.write. WritableCellFormat fontFormat = new jxl.write. WritableCellFormat(font): 
fontFormat.setAlignment(Alignment.CENTRE): 
fontFormat.setVertical Alignment(VerticalAlignment .JUSTIFY): /设置 单元 格 内 容 垂直 居中 显示 


contentFormat.setWrap(true): 

Label label title = new Label(0.0." 员 工 信 息 表 ".fontFormat): 

sheetmergeCells(0.0.3.0): // 合 并 第 1 行 的 第 1 一 第 4 个 单元 格 
sheet.setRowView(0. 600.false): /设置 第 1 行 的 行 高 


Label label name = new Label(0.1." 姓 名 "); 
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Label label_sex = new Label(1.1." 性 别 "): 
Label label age = new Label(2,1," 年 龄 "); 
Label label dept= new Label(3.1," 所 在 部 门 "); 
Label name value = new Label(0,2.name); 
Label sex_value = new Label(1,2,sex); 

Label age_value = new Label(2.2.age); 


‘ell(label dept): 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value); 
sheet.addCell(dept_value); 
book.writeO; 


}catch Ee DR 
System.outprintin(" 异 常 信息 : "+e.getMessageO): 
e.printStack Trace(); 
return false; 

} 

} 


图 秘笈 心 法 

在 Excel 工作 表 中 ， 默 认 添 加 的 单元 格 内 容 是 不 换行 的 ， 当 某 一 个 单元 格 的 内 容 超过 默认 的 单元 格 宽度 时 ， 
这 些 内 容 将 显示 在 下 一 个 单元 格 中 。 所 以 ， 如 果 不 希 望 单元 格 内 容 显示 在 下 一 个 单元 格 中 ， 此 时 可 以 考虑 应 用 
setWrap0 方 法 设置 单元 格 内 容 自 动 换行 。 


初级 
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实用 指 走 : 廊 去 太 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 设 置 Excel 工作 表 的 单元 格 样式 。 运 行 本 实例 ， 如 图 21.15 所 示 ， 输 入 
员工 信息 ， 当 单 击 “导出 ”按钮 后 ， 员 工 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 设置 “员工 信息 表 ” 标 题 的 音 
元 格 样式 。 


21.15 ”设置 Excel 工作 表 的 单元 格 样式 


图 关键 技术 


本 实例 在 设置 Excel 工作 表单 元 格 样式 时 ， 主 要 应 用 的 是 jxl.write.WritableCellFormat 类 的 setBackgroundO 
方法 、setBorder0 方 法 和 setOrientation() 方 法 。 下 面 对 这 几 个 方法 进行 详细 介绍 。 
(1) setBackground0 方 法 


该 方法 主要 用 于 设置 单元 格 的 背景 颜色 ， 其 语法 结构 如 下 : 
public void setBackground(Colour colour Pattern pattern) throws WriteException 
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参数 说 明 

@ colour: 设置 单元 格 的 背景 颜色 。 颜 色 的 参数 值 为 static 类 型 ， 所 以 可 以 直接 应 用 jxl.format.Colour 类 名 
调用 。 

@ pattem: 此 参数 为 可 选 参数 ， 用 于 设置 单元 格 背景 图 案 。 图 案 的 参数 值 为 static 类 型 ， 所 以 可 以 直接 应 用 
jxl.format.Pattern 类 名 调用 。 

(2) setBorder0 方 法 

该 方法 用 于 设置 单元 格 的 边框 样式 ， 其 语法 结构 如 下 : 

public void setBorder(Border border BorderLineStyle Is, Colour colour) throws WriteException 

参数 说 明 

@ border: 指定 设置 的 是 单元 格 四 周 的 哪 一 个 方向 的 边框 。 主要 取 值 包括 Border.ALL (四 周 )、Border.LEFT 

(左边 框 )、Border.RIGHT (右边 框 )、BorderTOP (上 边框 ) 和 BorderBUTTOM (下 边框 )。 

@ 1s: 设置 单元 格 边框 的 线条 样式 。 此 参数 值 可 以 应 用 jxlformatBorderLineStyle 类 名 直接 调用 ， 如 Border 
LineStyle.THICK (加 粗 )、BorderLineStyle.DASHED (虚线 )、BorderLineStyle.THIN 〈 细 线 )、BorderLineStyle. 
DOUBLE ( 双 线 ) 等 。 

@ colour: 可 选 参数 ， 用 于 设置 单元 格 边框 颜色 。 

(3) setOrientation() 方 法 

该 方法 用 于 设置 单元 格 文字 的 方向 ， 其 语法 结构 如 下 : 

public void setOrientation(Orientation orientation) throws WriteException 

参数 说 明 

orientation: 参数 类 型 为 jxlformat.Orientation"， 用 于 设置 文字 的 方向 ， 如 Orientation PUSH 45 ( 斜 向 上 45”)、 
Orientation.PUSH_90 (向 上 90”)、Orientation.MINUS_45 ( 斜 向 下 45”)、Orientation.MINUS_90 (向 下 90”) 等 。 


图 设计 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 


addImfoToExcel0， 在 该 方法 中 设置 了 “员工 信息 表 ” 标 题 单元 格 的 样式 ， 其 关键 代码 如 下 : 
public boolean addInfoToExcel(String name,String sex.String age,String dept){ 
try{ 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 员 工 信 息 .xls")); 
WritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0); 
/设置 字体 样式 
jxLwrite WritableFont font = new jxLwrite WritableFont(WritableFont.ARIAL, 15, WritableFont.BOLD, false,UnderlineStyle.NO_UNDERLINE, 
jxl.format.Colour.GREEN):; 
jxl.write. WritableCellFormat cellFormat = new jxl.write. WritableCellFormat(font): 
cellFormat.setAlignment(Alignment.CENTRE): 


cellFormat.setVertical Alignment(VerticalAlignment.JUSTIFY): /设置 单元 格 内 容 两 端 对 齐 
cellFormat.setBackground(Colour.GRAY 25): /1 背景 颜色 
cellFormat.setBorder(Border.4LL, BorderLineStyle.DOUBLE.Colour.D4ARK_GREEN); /边框 样式 
cellFormat.setOrientation(Orientation.PLUS._45); /文字 方向 

Label label title = new Label(0.0." 员 工 信 息 表 ",cellFormat); 

sheet.mergeCells(0.0,3.0): /合并 第 1 行 的 第 1 一 4 个 单元 格 
sheet setRowView(0. 600.falsej: /设置 第 1 行 的 行 高 


Label label_name = new Label(0,1," 姓 名 "); 
Label label_sex = new Label(1,1," 性 别 "); 
Label label_age = new Label(2.1," 年 龄 "); 
Label label_dept = new Label(3.1," 所 在 部 门 "); 
Label name_value = new Label(0.2.name): 
Label sex_value = new Label(1.2.sex): 
Label age_value = new Label(2.2.age): 
Label dept_value = new Label(3.2.dept): 
sheet.addCell(label title); 
sheet.addCell(label_name): 
sheet.addCell(label_sex): 
sheet.addCell(label age); 
sheet.addCell(label_dept): 
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book write0 
ok 0 

} catch es af 
System.out.printin(" 异 常 信息 : "+e.getMessage0 〇 0); 
e.printStack Trace(); 
return false; 

上 

} 

图 秘笈 心 法 


在 实际 开发 应 用 中 , 为 了 使 打印 出 的 Excel 工作 表 具 有 特殊 效果 , 经 常 需 要 设置 Excel 工作 表 的 单元 格 样式 。 
所 以 ， 应 该 掌握 应 用 jxl.write.WritableCellFormat 类 设置 单元 格 样式 的 方法 。 


; 5 ee | 
实例 说 明 


本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 向 Excel 工作 表 中 插入 图 片 。 运 行 本 实例 ， 如 图 21.16 所 示 ， 输 入 员工 
信息 ， 当 单 击 “ 导 出 ”按钮 后 ， 员 工 信 息 将 被 添加 到 Excel 工作 表 中 ， 并 且 向 Excel 工作 表 中 插入 图 片 。 
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图 21.16 向 Excel 工作 表 中 插入 图 片 


图 关键 技术 


应 用 JXL 组 件 可 以 向 Excel 工作 表 中 插入 图 片 。 首 先 在 插入 图 片 之 前 应 该 创建 一 个 图 片 对 象 ， 该 图 片 对 象 
是 由 jxlLwrite.WritableImage 类 创建 的 ， 然 后 调用 WritableSheet 工作 表 对 象 的 addImage(WritableImage image) 方 
法 执行 插入 即 可 。WiritableImage 类 的 构造 方法 结构 如 下 : 

public WritableImage(double x, double y. double width, double height.byte imageData) 

参数 说 明 

@ x: 指定 图 片 所 在 位 置 的 列 索引 。 

@y: 指定 图 片 所 在 位 置 的 行 索引 。 

@ width: 指定 图 片 所 占 的 横向 单元 格 个 数 ， 也 就 是 图 片 跨越 了 几 列 。 

@ height: 指定 图 片 所 占 的 纵向 单元 格 个 数 ， 也 就 是 图 片 跨越 了 几 行 。 

@ imageData: 表示 图 片 数 据 的 byte 数组 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 
addImfoToExcel0， 并 且 向 Excel 工作 表 中 插入 了 图 片 ， 其 关键 代码 如 下 : 
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public boolean addInfoToExcel(String name.String sex.String age.String dept, String imgPath){ 
try{ 

WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 员 工 信 息 xls")); 

WiritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0); 

jxl.write. WritableFont font = new jxl.write. WritableFont(WritableFontARIAL, 15. WritableFont.BOLD. false.UnderlineStyle NO_UNDERLINE, 
jxl.format.Colour. GREEN): // 设 置 字体 样式 

jxl.write. WritableCellFormat cellFormat = new jxl.write. WritableCellFormat(font); 

cellFormat.setAlignment(Alignment.CENTRE): 

cellFormat.setVertical Alignment(VerticalAlignment.CENTRE); 


File file = new File(imgPath); /根据 图 片 路 径 创建 File 对 象 
FileInputStream fs = new FileInputStream(file); // 创 建 字 节 输入 流 ， 用 于 读 取 图 片 字 节 数据 
bytel] bytes = new byte[fs.availableO]: /根据 图 片 的 字 节 数 ， 创 建 字 节 数组 
fs.read(bytes); // 读 取 图 片 字 节 数据 保存 到 字 节 数组 中 
WritableImage image = new WiitableImage(0.1.1.2.bytes); /创建 WritableImage 对 象 

Label label title = new Label(0,0," 员 工 信 息 表 ",cellFormat); 

sheetmergeCells(0.0,4.0): /合并 第 1 行 的 第 1 一 4 个 单元 格 


sheet.setRowView(0, 600,false); // 设 置 第 1 行 的 行 高 
Label label_name = new Label(1,1," 姓 名 "); 
Label label_sex = new Label(2,1," 性 别 "); 
Label label age = new Label(3,1," 年 龄 "); 
Label label_dept = new Label(4.1," 所 在 部 门 "); 
Label name_value = new Label(1.2.name): 
Label sex_value = new Label(2,2,sex); 

Label age_value = new Label(3,2,age); 

Label dept_value = new Label(4,2.dept); 
sheet.addCell(label title); 
sheet.addCell(label_name); 
sheet.addCell(label_sex); 
sheet.addCell(label age); 
sheet.addCell(label_dept); 
sheet.addCell(name_value); 
sheet.addCell(sex_value); 
sheet.addCell(age_value); 
sheet.addCell(dept_value); 
sheet.addImage(image); 

book write0:; 


} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessageO); 
e.printStackTrace(); 
return false; 

} 

} 


图 秘笈 心 法 


jxl.write.WritableImage 类 还 包含 另 一 个 构造 方法 ， 其 语法 结构 如 下 : 
public WritableImage(double x. double y. double width. double height.File image) 


从 构造 方法 中 可 以 看 出 ， 前 4 个 参数 与 本 实例 讲解 的 是 相同 的 。 只 有 最 后 一 个 参数 为 java.io.File 类 型 ， 用 
来 表示 图 片 路 径 的 File 对 象 .但 是 应 用 这 个 构造 方法 创建 WritableImage 对 象 时 , 支持 的 图 片 格式 只 有 png 格式 。 
所 以 ， 如 果 和 希望 插入 其 他 格式 的 图 片 ， 不 要 使 用 该 构造 方法 ， 否 则 会 抛 出 异常 。 


高 级 


实用 指数 : 食 广 但 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 JXL 组 件 ， 读 取 数 据 库 表 的 数据 并 导出 到 Excel 文件 中 。 运 行 本 实例 ， 如 图 21.17 
所 示 ， 单 击 “ 导 出 ”按钮 后 ， 所 有 员工 信息 将 被 导出 到 Excel 文件 中 。 
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图 21.17 将 数据 库 员工 信息 表 的 数据 导出 到 Excel 中 
图 关键 技术 


实现 了 前 面 一 系列 对 Excel 操作 的 实例 之 后 ， 再 来 实现 本 实例 其 实 很 简单 ， 只 是 将 读 取出 的 数据 库 的 数据 
再 导出 到 Excel 文件 中 。 首 先 将 读 取出 的 数据 库 表 数据 封装 到 一 个 List 集合 中 ， 然 后 循环 遍历 该 List 集合 ， 再 
应 用 JXL 组 件 将 这 些 数据 写 入 Excel 文件 。 具 体 向 Excel 中 如 何 写 数据 ， 在 前 面 的 一 些 例子 中 已 经 讲解 了 ， 此 
处 不 再 歼 述 。 


图 设计 过 程 
(1) 创建 用 于 封装 员工 信息 表 数 据 的 JavaBean 类 Employee， 其 关键 代码 如 下 : 


public class Employee { 
Private int id; 
Private String name; 
Private String sex; 
Private String dept; 
Private String duty: 
Private String telephone; 
| /此 处 省 略 了 属性 的 getXXX0 方 法 和 setXXX0 方 法 


(2) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 
的 方法 readDataToExcelFile0， 参 数 list 封装 了 从 数据 库 表 中 读 取 数 据 的 JavaBean 对 象 Employee， 其 关键 代码 
如 下 : 
public boolean readDataToExcelFile(List<Employee> list){ 
try{ 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 员 工 信 息 .xls")); 
WritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0); 
jxl.write. WritableFont font = new jxl.write. WritableFont(WritableFont.ARIAL, 15. WritableFont.BOLD, false.UnderlineStyle.NO_UNDERLINE., 


jxl.format.Colour.GREEN): /设置 字体 样式 
jxLwrite.WritableCellFormat cellFormat = new jxl.write. WritableCellFormat(font); 


cellFormat.setAlignment(Alignment.CENTRE): 
cellFormat.setVertical Alignment(VerticalAlignment.CENTRE): /设置 单元 格 内 容 两 端 对 齐 


cellFormat.setBackground(Colour. GRAY 25):; /设置 背景 颜色 

Label label title = new Label(0.0." 员 工 信 息 表 ".cellFormat): 

sheet mergeCells(0.0.4.0): /合并 第 1 行 的 第 1 一 5 个 单元 格 
sheet setRowView(0. 600,false); /设置 第 1 行 的 行 高 


Label label_name = new Label(0,1," 员 工 姓名 "); 

Label label_sex = new Label(1,1." 员 工 性 别 "); 

Label label_dept = new Label(2.1." 所 在 部 门 "); 

Label label_duty = new Label(3.1." 职 务 "]; 

Label label_telephone = new Label(4.1." 联 系 电话 "); 

sheet setColumnView(4. 15): /设置 列 宽 
sheet.addCell(label title): 

sheet.addCell(label_name): 

sheet.addCell(label_sex): 

sheet.addCell(label_dept): 

sheet.addCell(label_duty); 

sheet.addCell(label telephone): 

for(int i=0;i<list.sizeO:iH){ /遍历 保存 员工 信息 对 象 的 集合 ， 将 所 有 员工 信息 导出 到 Excel 
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Employee emp = (Employee)listgetG): 
Label name value = new Label(0.i+2,emp.getName(); 
Label sex_value = new Label(L.it2.emp.getSex0): 
Label dept_value = new Label(2.i+2.emp.getDeptO): 
Label duty_value = new Label(3.i+2.emp.getDutyO); 
Label telephone_value = new Label(4.i+2.emp.getTelephoneO): 
sheet.addCell(name value); 
sheet.addCell(sex_value); 
sheet.addCell(dept_value); 
sheet.addCell(duty_value); 
sheet.addCell(telephone_value); 
} 
book write0; 
book.close0; 
return true; 
} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessage0 〇 ); 
e.printStackTrace(); 
return false; 
} 
} 


[说明 : 由 于 读 取 数 据 库 的 代码 比较 简单 ， 所 以 此 处 省 略 了 这 一 部 分 内 容 。 具体 代码 可 以 查看 本 书 附 赠 的 光盘 。 
图 秘笈 心 法 


在 实际 应 用 中 , 经 常会 将 数据 库 中 某 个 表 的 数据 导出 到 Excel 文件 中 , 然后 再 应 用 Excel 将 这 些 数据 打印 出 
来 ， 以 便于 查看 ， 如 员工 信息 、 订 单 信息 或 一 些 办 公文 件 的 表单 信息 。 所 以 ， 实 现 将 数据 库 的 数据 导出 到 Excel 
文件 中 是 非常 有 必要 的 。 


实例 549 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 , 读 取 Excel 工作 表 中 的 数据 以 及 图 片 ,然后 将 这 些 数据 保存 到 数据 库 中 。 
运行 本 实例 ， 如 图 21.18 所 示 ， 单 击 “ 保 存 到 数据 库 ” 按 钮 后 ,“ 员 工 信 息 .xls” 工 作 表 的 数据 将 被 保存 到 数据 库 
中 ， 并 且 保 存 了 该 Excel 工作 表 中 的 图 片 。 


【 访 取 Excel 工 作 系 中 的 图 片 】 
文件 地 址 : Entest 员 工 信 息 xls。 一] 
保存 到 击 据 库 


图 21.18 读 取 Excel 工作 表 中 的 数据 和 图 片 并 保存 到 数据 库 


图 关键 技术 


读 取 Excel 文件 中 的 数据 ， 主 要 应 用 到 了 jxLWorkbook 类 和 jxl.Sheet 接口 。 下 面 对 Workbook 类 和 Sheet 接 

口 进 行 详细 介绍 。 
(1) Workbook 类 

在 读 取 Excel 文件 时 , 首先 需要 获取 jxLWorkbook 工作 短 对 象 , 然后 再 从 Workbook 对 象 中 获取 工作 表 对 象 。 
获取 Workbook 对 象 的 语法 结构 如 下 : 

Workbook book = Workbook.getWorkbook(InputStream is) 

参数 说 明 

is: 表示 字 节 输入 流 对 象 ， 用 于 从 Excel 文件 中 读 取 字 节 流 数据 。 
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(2) Sheet 接口 

Sheet 是 一 个 接口 ， 该 接口 中 提供 了 一 系列 用 于 读 取 Excel 工作 表 的 getXXX0 方 法 和 其 他 方法 。 该 接口 中 
的 所 有 方法 是 在 jxl.read.biff.SheetImpl 类 中 实现 的 。 工 作 表 Sheet 对 象 是 由 Workbook 工作 簿 获取 的 ， 语 法 结 
构 如 下 : 

Sheet sheet = book getSheet(int index) 

参数 说 明 

@ book: 表示 工作 短 Workbook 对 象 。 

@ index: 表示 Excel 工作 表 的 索引 。 索 引 值 从 0 开始 。 

getSheet0 方 法 还 有 另 一 个 重 载 方法 ， 其 语法 结构 如 下 : 

Sheet sheet = book.getSheet(String name) 

参数 说 明 

@ book: 表示 工作 短 Workbook 对 象 。 

@ name: 表示 Excel 工作 表 的 名 称 。 

Sheet 接口 中 定义 了 一 些 常 用 的 用 于 获取 Excel 工作 表 相 关 信息 的 方法 ， 这 些 方法 以 及 说 明 如 表 21.1 所 示 。 


表 21.1 Sheet 接口 的 方法 


方 法 说 了 明 
public int getRows| 用 于 获取 Excel 工作 表 中 数据 的 行 数 
public int getColumns 用 于 获取 Excel 工作 表 中 数据 的 列 数 


用 于 获取 Excel 工作 表 中 指定 的 单元 格 对 象 。 参 数 column 用 于 指定 单元 格 所 在 的 
列 索引 ， 参 数 row 用 于 指定 单元 格 所 在 的 行 索引 

public Cell[] getColumn(int col 返回 Excel 工作 表 某 一 列 的 所 有 单元 格 对 象 数组 。 参 数 col 为 指定 的 列 索引 

用 于 获取 Excel 工作 表 中 的 图 片 对 象 。 参 数 i 为 Excel 工作 表 中 插入 图 片 的 索引 。 
方法 返回 jxlLImage 类 型 的 对 象 

返回 Excel 工作 表 中 图 片 的 个 数 。 当 一 个 工作 表 中 包含 多 张 图 片 时 ， 需 要 在 循环 中 
应 用 此 方法 ， 结 合 使 用 getDrawing() 方 法 来 获取 所 有 图 片 


public Cell getCell(int column,int row) 


public Image getDrawing(int iD: 


public int getNumberOfImages():; 


图 设计 过 程 
(1) 创建 用 于 封装 员工 信息 表 数 据 的 JavaBean 类 Employee。 注 意 ， 在 该 类 中 添加 了 一 个 用 于 保存 图 片 的 
jxl.Image 属性 ， 关 键 代码 如 下 : 


importjxlLImage: 
public class Employee { 
Pprivate int id; 
Private String name: 
Private String sex: 
private String dept: 
private String duty: 
Private String telephone: 
private Image image; // 属 性 类 型 为 jxl.Image 
ee /此 处 省 略 了 属性 的 getXXX0 方 法 和 setXXX0 方 法 


(2) 创建 用 于 操作 Excel 文件 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 用 于 读 取 Excel 工作 表 数 据 的 方 
法 readExcelData0， 参 数 filePath 是 指 用 户 选择 的 Excel 文件 的 路 径 。 在 readExcelData0 方 法 中 ， 将 读 取出 的 数 
据 保 存在 JavaBean 对象 Employee 中 ,然后 将 所 有 的 Employee 对 象 再 添加 到 List 和 集合 中 ,最 后 使 用 readExcelDataO0 
方法 返回 这 个 List 集 合 ， 关 键 代 码 如 下 : 
Ppublic List<Employee> readExcelData(String filePath){ 
人 list = new ArrayList<Employee>0: 
try 


File xlsFile = new File(filePath); 
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FileInputStream fs = new FileInputStream(xIsFile); 
Workbook book = Workbook.getWorkbook(fs); 


Sheet sheet = book.getSheet(0); 
int rows = sheet.getRowsO; 
for(int i=2;i<rows:it +){ 


Image img = sheet.getDrawing(0): 

Employee emp = new Employee(); 

String name = sheet.getCell(0. i).getContents(); 
String sex = sheet.getCell(1, i).getContents(): 
String dept = sheet.getCell(2, i).getContents(; 
String duty = sheet.getCell(3, i).getContents(:; 
String telephone = sheet.getCell(4. i).getContents|: 


emp.setName(name); 
emp.setSex(sex); 
emp.setDept(dept); 
emp.setDuty(duty); 


emp.setTelephone(telephone):; 


emp.setImage(img); 
list.add(emp); 
} 
return list; 
} catch (Exception e) { 


Systenm.out.printin(" 异 常 信息 : "+e.getMessageO): 


e.printStack TraceO); 
return null; 

} 

} 


/获取 工作 短 对 象 

/获取 工作 表 对 象 
/获取 工作 表 中 的 数据 行 数 

/循环 Excel 工作 表 的 行 ， 并 读 取 单 元 格 数据 
/获取 工作 表 中 的 图 片 对 象 


/将 图 片 对 象 添加 到 Employee 中 


(3) 创建 用 于 操作 数据 库 的 DAO 类 EmpDao， 编 写 用 于 保存 数据 的 方法 saveEmpFromExcel()， 参 数 list 
为 封装 从 Excel 文件 中 读 取出 的 数据 ， 关 键 代 码 如 下 : 


public boolean saveEmpFromExcel(List<Employee> lisb throws SQLException{ 


Connection conn = null: 


try{ 


conn = DBCon.getConn(); // 获 取 数 据 库 连 接 
String sql = "insert into tb_emp(name,sex,dept,duty,telephone.img) values(?,?,?,?,?,?);"; /插入 数据 的 insert 语句 
PreparedStatement stmt = conn.prepareStatement(sql); // 创 建 PreparedStatement 对 象 
for(Employee emp:lisb{ /遍历 封装 数据 的 集合 

stmt.setString(1, emp.getNameO): 

stmt.setString(2. emp.getSexO): 

stmt.setString(3, emp.getDeptO); 

stmt.setString(4, emp.getDutyO): 

stmt.setString(5, emp.getTelephoneO); 

stmt.setBytes(6, emp.getImage0.getImageData0): 。“”// 读 取 图 片 的 原始 字 节 数据 


stmt.addBatch(): 
} 
stmt.executeBatch(); 


return true; 
}catch(Exception ex){ 


// 将 一 组 参数 添加 到 此 PreparedStatement 对 象 的 批 处 理 命令 中 


// 将 以 上 一 批 命令 提交 给 数据 库 执行 


System.outprintln(" 保 存 员工 数据 异常 : "+ex.getMessage0 〇 ): 


ex.printstackTraceO: 
return false; 
Yinally{ 
conmn.closeO: 
} 


国 秘笈 心 法 


在 实际 应 用 中 ， 有 些 情况 下 需要 将 一 个 Excel 了 


量 的 数据 时 ， 可 以 考虑 在 程序 中 应 用 JXL 组 件 来 读 取 Excel 数据 。 


802 


[ 作 表 的 数据 保存 到 数据 库 中 ， 当 这 个 Excel 工作 表 中 包含 大 
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实例 550 性 


实用 指数 : 广 食 食 : 
力 实例 说 明 

本 实例 将 介绍 如 何 应 用 JXL 组 件 设置 Excel 工作 表 的 打印 属性 , 主要 设置 页 眉 和 页 脚 . 运 行 本 实例 , 如 图 21.19 
所 示 ， 单 击 “ 导 出 ”按钮 后 ， 所 有 员工 信息 将 被 导出 到 Excel 文件 中 ， 并 设置 了 打印 属性 ， 包 括 设置 页 眉 、 页 
脚 、 打 印 方向 、 页 面 纸张 大 小 等 。 如 图 21.20 所 示 为 在 打印 预览 中 查看 的 页 脚 属性 。 


国 Micosof excel - R 工 信和 xls [=15 ml 


河 AD mab me) WD WO TAD 
ED) DC 助 1 本 


员工 才 名 【员工 性 别 所 在 部 门 事务 联系 电 矣 
张 三 盟 出 试 部 。 经 机 


起 四 ” 妇 名 客 部 。 硕 目 好 埋 "13988838853 


Ww 相册 工 信 息 / | ， 2010723 
关 


图 21.19 导出 的 员工 信息 数据 图 21.20 设置 页 脚 
图 关键 技术 


应 用 JXL 组 件 可 以 设置 Excel 工作 表 的 打印 属性 ， 主 要 是 应 用 jxl.write.WritableSheet 中 的 setHeader0 方 法 、 
setFooter0 方 法 和 setPageSetup0 方 法 。 下 面 对 这 几 个 方法 进行 详细 介绍 。 
(1) setHeader0 方 法 
该 方法 用 于 设置 Excel 工作 表 打 印 时 的 页 眉 ， 其 语法 结构 如 下 : 
public void setHeader(String left, String center, String right) 
参数 说 明 
@ left: 设置 页 眉 左 侧 的 内 容 。 
@ center: 设置 页 眉 中 间 的 内 容 。 
@@ right: 设置 页 眉 右 侧 的 内 容 。 
(2) setFooter0 方 法 
该 方法 用 于 设置 Excel 工作 表 打 印 时 的 页 脚 ， 其 语法 结构 如 下 : 
public void setFooter(String left, String center, String right) 
参数 说 明 
@ left: 设置 页 脚 左 侧 的 内 容 。 
@ center: 设置 页 脚 中 间 的 内 容 。 
@ right: 设置 页 脚 右 侧 的 内 容 。 
(3) setPageSetup0 方 法 
该 方法 主要 用 于 设置 打印 方向 、 打 印 纸张 的 大 小 和 页 眉 页 脚 距 打印 纸 的 上 下 两 端的 距离 ， 其 语法 结构 如 下 : 
public void setPageSetup(PageOrientation orientation. PaperSize size, double headerMargin, double footerMargin) 
参数 说 明 
@ orientation: 设置 Excel 工作 表 的 打印 方向 。 取 值 为 PageOrientationLANDSCAPE( 横 向 ) 和 PageOrientation. 
PORTRAIT (纵向 )。 
@ size: 可 选 参数 ， 设 置 打印 纸 的 大 小 ， 如 PaperSize.A2、PaperSize.A3、PaperSize.A4、PaperSize.A5 等 。 
如 果 不 设 置 此 参数 ， 则 采用 默认 的 PaperSize.A4 值 。 
目 headerMargin: 可 选 参数 ， 设 置 页 眉 距 页 面 顶 端的 距离 ， 单 位 为 厘米 。 如 果 不 设 置 此 参数 ， 默 认 值 为 0.5。 


1 
2 
3 得 3579736464 
4 | 李 四 田 研发 部 。 砍 件 工程 师 "15578731573 
5 入 人 事 部 ”人事 专员 “16378963257 
5 
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@ footerMargin: 可 选 参数 ， 设 置 页 脚 距 页 面 底 端的 距离 ， 单 位 为 厘米 。 如 果 不 设 置 此 参数 ， 默 认 值 为 0.5。 


图 设计 过 程 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 在 该 类 中 编写 用 于 向 Excel 工作 表 中 添加 员 


言 息 的 方法 


TeadDataToExcelFile0， 参 数 list 封装 了 从 数据 库 表 中 读 取 数 据 的 JavaBean 对 象 Employee。 在 该 方法 中 ， 导 入 员 


工 数据 的 同时 设置 了 打印 属性 ， 关 键 代 码 如 下 : 
public boolean readDataToExcelFile(List<Employee> list){ 
try{ 
WritableWorkbook book = Workbook.createWorkbook(new File("E:\\test\ 员 工 信 息 .xls")); 
WritableSheet sheet = book.createSheet(" 员 工 信 息 ", 0); 
/设置 字体 样式 


jxl.write. WritableFont font = new jxl.write. WritableFont(WritableFont.ARIAL. 15. WritableFont.BOLD. false,UnderlineStyle.NO_UNDERLINE, 


jxl.format.Colour.GREEN):; 
jxl.write. WritableCellFormat cellFormat = new jxl.write. WritableCellFormat(font); 
cellFormat.setAlignment(Alienment.CENTRE); 


cellFormat.setVertical Alignment(VerticalAlignment.CENTRE); /设置 单元 格 内 容 两 端 对 齐 
cellFormat.setBackground(Colour.GRAY 25); /设置 背景 颜色 

Label label title = new Label(0,0," 员 工 信 息 表 ",cellFormat); 

sheet.mergeCells(0,0,4.0); // 合 并 第 1 行 的 第 1 一 5 个 单元 格 
sheet.setRowView(0, 600,false); /设置 第 1 行 的 行 高 


Label label_name = new Label(0,1," 员 工 姓名 "); 
Label label_sex = new Label(1,1," 员 工 性 别 "); 
Label label_dept = new Label(2.1," 所 在 部 门 "); 
Label label_duty = new Label(3,1," 职 务 "); 
Label label_telephone = new Label(4,1," 联 系 电话 "); 
sheet.setColumnView(4, 15); /设置 列 宽 
sheet.addCell(label title); 
sheet.addCell(label_name); 
sheet.addCell(label sex); 
sheet.addCell(label_dept); 
sheet.addCell(label_duty); 
sheet.addCell(label_telephone); 
for(int i=0;i<list.sizeOQ:itH+) { 1/ 遍历 保存 员工 信息 对 象 的 集合 ， 
Employee emp = (Employee)list.get(i): 
Label name_value = new Label(0.i+2.emp.getNameO): 
Label sex_value = new Label(1,it2,emp.getSexO); 
Label dept_value = new Label(2,i+2,emp.getDeptO); 
Label duty_value = new Label(3,i+2,emp.getDutyO); 
Label telephone_value = new Label(4.i+2.emp.getTelephoneO): 
sheet.addCell(name_value): 
sheet.addCell(sex_value); 
sheet.addCell(dept_value); 
sheet.addCell(duty_value); 
sheet.addCell(telephone_value): 
} 
Calendar c = Calendar. 
String date=e.get(c. te gee Mo ‘tc.get(c.DAY OF MONTH): 
/设置 页 丑 
sheetsetFooter(w "第 一 ne 2 // 设 置 页 脚 
sheet: setPageSetup(PageOrientation PORTRAIT. 了 PaperSize_44. 0.2, 0.2): : /设置 打印 纸 的 属性 


} catch (Exception e) { 
System.out.printin(" 异 常 信息 : "+e.getMessage0 〇 ); 
e.printStack TraceO; 
return false; 

} 

} 


国 秘笈 心 法 
在 实际 应 用 中 ， 根 据 客户 需求 可 能 会 在 导出 工作 表 并 打印 时 ， 需 要 设置 打印 纸 的 页 
等 属性 。 所 以 ， 应 该 了 解 如 何 通过 JXL 组 件 来 设置 Excel 工作 表 的 打印 属性 。 


将 所 有 员工 信息 导出 到 Excel 


由 、 页 脚 以 及 纸张 大 小 
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lf 表 详细 的 打印 属性 高 级 | 
1 实用 指数 : 让 让 让 


实例 551 


国 实例 说 明 

在 实例 550 中 ， 介 绍 了 如 何 设置 Excel 工作 表 的 打印 属性 ， 但 是 设置 的 打印 属性 只 有 页 眉 、 页 脚 以 及 打印 
纸 这 几 个 ， 而 实际 情况 可 能 需要 设置 更 多 的 打印 属性 ， 本 实例 将 介绍 如 何 设置 Excel 工作 表 其 他 复杂 的 打印 属 
性 。 运 行 本 实例 ， 导 出 所 有 员工 信息 到 Excel 工作 表 之 后 ， 设 置 Excel 工作 表 复 杂 的 打印 属性 。 如 图 21.21 所 示 


为 在 打印 预览 中 的 打印 效果 。 


图 21.21 


设置 Excel 工作 表 详细 的 打印 属性 


本 实例 在 实现 时 不 再 应 用 WritableSheet 类 的 几 个 方法 设置 打印 属性 , 而 是 应 用 jxl.SheetSettings 类 中 的 方法 
来 进行 详细 设置 。SheetSettings 类 主要 的 用 途 就 是 设置 和 获取 Excel 工作 表 的 打印 属性 。SheetSettings 类 的 实例 


由 jxl.write.WritableSheet 对 象 的 getSettings() 方 法 获取 。SheetSettings 类 常用 的 方法 及 说 明 如 表 21.2 所 示 。 


表 21.2 SheetSettings 类 的 常用 方法 及 说 明 


方 ” 法 说 明 
setBottomMargin(double m 设置 距离 页 面 底部 的 间距 
setDefaultColumnWidth(int w) 设置 默认 列 宽 
setDefaultRowHeight(int h) 设置 默认 行 高 
setFitHeight(int fh) 设置 页 高 
setFitWidth(int fw 设置 页 宽 
setFooter(HeaderFooter f) 设置 页 脚 
setFooterMargin(double d) 设置 页 脚 距 页 面 底 端的 间距 
setHeader(HeaderFooter h) 设置 页 眉 
setHeaderMargin(double d 设置 页 眉 距 页 面 项 端的 间距 
setHorizontalCentre(boolean horizCentre) 设置 是 否 水 平 居 中 
setHorizontalPrintResolution(int hpw) 设置 水 平 打印 分 辩 率 
setLeftMargin(double m) 设置 距离 页 面 左 侧 的 间距 
setNormalMarginfication(int f}) 设置 正常 分 辨 率 
setOrientation(PageOrientation po) 设置 打印 方向 。 横 向 或 纵向 
setPageStart(int ps, 设置 打印 起 始 页 
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续 表 

方 ” 法 说 了 明 
setPaperSize(PaperSize ps) 设置 在 打印 工作 表 时 ， 打 印 纸 的 大 小 
setPrintArea(int firstCol.int firstRow,int lastCol.int lastRow, 设置 打印 区 域 
setPrintTitles(int firstRow:int lastRow.int firstCol.int lastCol) 设置 打印 标题 
setPrintGridLines(boolean b) 设置 打印 时 是 否 带 有 网 格 
setPrintHeaders(boolean b) 设置 是 否 打印 页 眉 
setRightMargin(double m 设置 距离 页 面 右 侧 的 边 距 
setScaleFactor(int sf) 设置 缩放 比例 
setTopMargin(double m) 设置 距离 页 面 项 端的 边 距 
setVerticalCentre(boolean VertCentre 设置 打印 内 容 是 否 垂直 居中 


[加 说 明 : 表 21.2 列 出 的 方法 只 是 SheetSettings 类 的 常用 方法 ， 其 他 方法 的 详细 说 明 请 参见 JXL API 文档 


图 设计 过 程 


(1) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 Excel 工作 表 的 打印 设置 的 方法 
setSheetPrintStyle()， 参 数 sheet 表示 要 设置 打印 属性 的 工作 表 对 象 ， 具 体 代 码 如 下 : 


public WritableSheet setSheetPrintStyle(WritableSheet sheet){ 


SheetSettings settings = sheet.getSettings0; 。“// 获 取 工 作 表 的 打印 属性 对 象 
settings.setHorizontalCentre(true); /设置 打印 内 容 水 平 居中 
settings.setVerticalCentre(true); /设置 打印 内 容 垂 直 居中 
HeaderFooter header = new HeaderFooter0: /创建 用 于 设置 页 眉 页 脚 的 对 象 
header.getRight0.append(" 普 通 文件 "); /设置 页 眉 右 侧 的 内 容 
header.getRight().setFontSize(8); /设置 页 眉 右 侧 内 容 的 字号 
settings.setHeader(header); /设置 页 眉 
settings.setFitHeight(5) ; /设置 页 高 
settings.setFitWidth(S): /设置 页 宽 

HeaderFooter footer = new HeaderFooter0; /创建 用 于 设置 页 眉 页 脚 的 对 象 
footer getRightO.setFontSize(8); /设置 页 脚 右 侧 字体 的 字号 
footer.getRightO.appendDateO: /设置 在 页 脚 右 侧 添加 日 期 
settings.setFooter(footer); /设置 页 脚 
settings.setFooterMiargin(0.5): /设置 页 脚 与 页 面 底 端的 距离 
settings.setHeaderMargin(0.5); /设置 页 眉 与 页 面 顶端 的 距离 
settings.setOrientation(PageOrientation.PORTRAIT);// 设 置 纵向 打印 
Settings.setPaperSize(PaperSize.4A4) ; /设置 打印 纸 大 小 
settings.setPrintGridLines(true); /设置 打印 网 格 线 
settings.setPrintHeaders(true); 1/ 打 印 页 眉 
settings.setScaleFactor(80) ; /缩放 比例 

return sheet: 


} 


(2) 编写 用 于 向 Excel 工作 表 中 添加 员工 信息 的 方法 readDataToExcelFile0， 参 数 list 封装 了 从 数据 库 表 中 
读 取 数 据 的 JavaBean 对 象 Employee。 在 该 方法 中 , 导入 员工 数据 的 同时 , 调用 步骤 (1 ) 的 方法 setSheetPrintStyle0 


设置 工作 表 详 细 的 打印 属性 ， 关 键 代码 如 下 : 
public boolean readDataToExcelFile(List<Employee> list){ 
try{ 


WritableWorkbook book = Workbook.createWorkbook(new File("E:\Mtest\ 员 工 信 息 xls")); 


WiitableSheet sheet = book.createSheet(" 员 工 信 息 ". 0); 
sheet = this.setSheetPrintStyle(sheet): 


1/ 调用 打印 设置 的 方法 ， 设 置 打印 属性 


Nemes /此 处 省 略 了 导出 员工 信息 的 代码 


book write0: 
book.close0: 
return true; 

} cateh (Exception e) { 
e.printStackTrace(); 
return false; 
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图 秘笈 心 法 
在 实际 应 用 中 ， 根 据 客户 需求 可 能 会 在 打印 工作 表 时 ， 需 要 设置 详细 的 打印 属性 。 所 以 ， 应 该 了 解 如 何 通 
过 JXL 组 件 的 jxl.SheetSettings 类 来 设置 Excel 工作 表 详 细 的 打印 属性 。 


21.2 应 用 POI 组件 操作 Excel 


POI 组 件 是 Apache 组 件 的 一 个 开源 项 目 ， 其 开发 日 的 是 让 Java 语言 可 以 对 Microsoft 的 Office 系列 办 公 软 
件 进行 读 / 写 操作 。 目 前 POI 组 件 已 经 实现 了 对 MS Excel、MS Word 及 MS PowerPoint 等 格式 的 文件 进行 操作 的 
功能 。 该 组 件 的 源 代码 文件 ， 可 以 访问 Apache 组 件 的 POI 组 件 专栏 http://poi.apache.org/index.html 网 站 上 进行 
获取 。 目 前 该 组 件 的 最 新 版 本 为 POI 3.7 beta2， 该 版 本 为 测试 版 本 ， 可 能 存在 一 些 不 稳定 的 问题 。 因 此 ， 建 议 
下 载 POI 3.6 版 本 。 接 下 来 将 介绍 如 何 应 用 POI 组 件 操作 Excel。 


实例 552 


实例 说 明 


本 实例 将 介绍 如 何 应 用 POI 组 件 创建 Excel 文档 。 运 行 本 实例 ， 如 图 21.22 所 示 ， 输 入 Excel 文档 的 名 称 和 
保存 路 径 ， 单 击 “创建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 。 
[ET lx | 


滞 ] 间 人 视图 WO 拍 和 D 格 区 OI 
[应 用 PO 组件 创 寻 Excel 文 档 了 EIRD SNE) WIM WM -sx 


输入 文件 名 : 贡 坟 Xs 
保存 地 址 : Etest 
EE 


图 21.22 创建 Excel 文 档 
图 关键 技术 


应 用 POI 组 件 创建 Excel 文档 , 主要 应 用 的 是 org.apache.poihssf.usermodel.HSSFWorkbook 类 和 org.apache. 
poi.hssfusermodel.HSSFSheet 类 。HSSFWorkbook 表示 Excel 工作 德 ， 也 是 最 为 重要 的 类 ， 因 为 只 有 创建 
HSSFWorkbook 对 象 之 后 ， 才 可 以 从 工作 簿 中 获取 工作 表 对 象 。HSSFWorkbook 类 包含 以 下 常用 方法 : 

(1) createSheet0 方 法 

该 方法 用 于 创建 Excel 工作 表 ， 语 法 结构 如 下 : 

public HSSFSheet createSheetO) 

返回 值 类 型 为 HSSFSheet， 表 示 工 作 表 对 象 。 

(2) setSheetName0 方 法 

该 方法 用 于 设置 Excel 工作 表 的 名 称 ， 语 法 结构 如 下 : 

public void setsheetName(int sheetIxjava.lang. String name) 

参数 说 明 

@ sheetIx: 指定 需要 修改 名 称 的 工作 表 的 索引 。 索 引 值 从 0 开始 。 

@ name: 设置 工作 表 的 名 称 。 
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(3) setSelectedTab() 方 法 
该 方法 用 于 设置 Excel 文件 中 哪 一 个 工作 表 为 选择 状态 ， 其 语法 结构 如 下 : 


public void setSelectedTab(int index) 

参数 说 明 

index: 指定 需要 设置 选择 状态 的 工作 表 索 引 。 索 引 值 从 0 开始。 

(4) setSheetHidden() 方 法 

该 方法 用 于 设置 指定 的 工作 表 是 否 隐 藏 ， 其 语法 结构 如 下 : 
public void setSheetHidden(int sheetIx.boolean hidden) 

@ sheetIx: 指定 需要 设置 是 否 隐藏 的 工作 表 的 索引 。 索 引 值 从 0 开始 。 

@ hidden: 设置 是 否 隐藏 。 取 值 为 tue〈 隐 藏 ) 或 false 不 隐藏 )。 

(5) write0 方 法 

该 方法 用 于 将 缓存 中 创建 的 Excel 文件 对 象 以 流 的 方式 写 入 文件 中 ， 其 语法 结构 如 下 : 
public void write(java.io.OutputStream stream) throws java.io.IOException 

参数 说 明 

stream: 文件 输出 流 对 象 。 在 将 数据 写 入 文件 之 前 ， 需 要 创建 此 文件 输出 流 的 对 象 。 


[加 说 明 : HSSFWorkbook 类 中 还 有 很 多 方法 ， 此 处 不 再 进行 一 一 介绍 。 这 些 方法 的 使 用 说 明 可 查看 POI 组 件 
的 API，API 文 档 可 以 在 下 载 的 POI 组 件 包 中 找到 ， 也 可 以 到 Apache 官网 的 POI 组 件 指定 位 置 进行 
查看 。 在 后 续 的 针对 不 同 操作 的 实例 中 ， 也 会 对 这 些 方法 进行 详细 介绍 。 

图 设计 过 程 

创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 
参数 fiePath 表示 文件 的 保存 路 径 ， 参 数 fleName 表示 文件 的 名 称 ， 关 键 代 码 如 下 : 


public boolean CreateExcelFile(String filePath.String fileName){ 


try{ 
HSSF Workbook workbook = new HSSF WorkbookO: // 创 建 Excel 工作 短 对 象 
HSSFSheet sheet = Workbook.createSheetO: // 在 工作 敌 中 创建 工作 表 对 象 
workbook.setSheetName(0, "测试 "); /设置 工作 表 的 名 称 
HSSFRow row = sheet.createRow(0); /在 工作 表 中 创建 行 对 象 
HSSFCell cell =row.createCell(0,Cell.CELL_TYPE_STRING)// 在 行 中 创建 单元 格 对 象 
cell.setCellValue(" 这 是 我 的 第 一 个 Excel 文档 ! "); /设置 单元 格 内 容 
File xlsFile = new File(filePath.fleName): 
FileOutputStream fos = new FileOutputStream(xlsFile); // 创 建文 件 输出 流 对 象 
workbook. write(fos); /将 文档 对 象 写 入 文件 输出 流 
fos.close0; /关闭 文件 输出 流 
return true; 

} catch (Exception e) { 
e.printStackTrace(); 
return false: 

上 

} 

图 秘笈 心 法 


在 创建 HSSFWorkbook 对 象 之 后 , 不 要 忘记 调用 其 write0 方 法 将 所 有 对 Excel 文档 的 设置 输出 到 文件 中 去 ， 
并 且 及 时 调用 close0 方 法 关闭 文件 输出 流 ， 释 放 系统 资源 。 


实例 553 和 


实用 指数 廊 去 太 


图 实例 说 明 


本 实例 将 介绍 如 何 应 用 POI 组 件 , 创建 Excel 工作 表 中 的 单元 格 。 运行 本 实例 , 如 图 21.23 所 示 , 输入 Excel 
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文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 向 Excel 工作 表单 
元 格 中 输入 测试 信息 。 


【应 用 POI 组 件 b 建 Exe 文 档 ] 


输入 文件 名 :xs 
保存 地 址 : Etest 
EE 


21.23 ”创建 Excel 单元 格 


关键 技术 


创建 Excel 单元 格 之 前 ， 首 先 需要 应 用 HSSFWorkbook 对 象 创建 Excel 工作 短 ， 然 后 应 用 HSSFWorkbook 
对 象 的 createSheet0 方 法 创建 工作 表 对 象 HSSFSheet, 接 下 来 由 HSSFSheet 对 象 的 createRow0 方 法 创建 一 个 表示 
Excel 工作 表 中 行 的 对 象 HSSFRow, 最 后 再 由 行 对 象 HSSFRow 的 createCell0 方 法 来 创建 单元 格 对 象 HSSFCell。 
下 面 介绍 如 何 创建 行 对 象 HSSFRow 和 单元 格 对 象 HSSFCell。 
(1) createRow0 方 法 
该 方法 是 HSSFSheet 类 中 的 方法 ， 用 于 创建 Excel 工作 表 的 行 对 象 ， 语 法 结构 如 下 : 


public HSSFRow createRow(int rownum) 

参数 说 明 

rownum: 指定 Excel 工作 表 的 行 索引 。 索 引 值 从 0 开始。 

返回 值 类 型 为 HSSFRow， 表 示 一 个 Excel 工作 表 的 行 对 象 。 
(2) createCell0 方 法 


创建 行 对 象 HSSFRow 之 后 ， 调 用 该 对 象 的 createCell0 方 法 创建 单元 格 。createCell0 方 法 的 语法 结构 如 下 : 
public HSSFCell createCell(int columnIndex,int type) 


参数 说 明 

@ columnIndex: 指定 行 中 的 单元 格 索 引 。 索 引 值 从 0 开始， 即行 中 的 第 一 个 单元 格 。 

@ type: 可 选 参 数 ， 指 定 该 单元 格 的 内 容 类 型 。 类 型 值 由 org.apache.poi.ss.usermodel.Cell 接口 指定 ， 例 如 
CelLCELL_ TYPE _STRING (字符 串 类 型 ) 、CelLCELL_TYPE BOOLEAN (布尔 类 型 )、Cell CELL TYPE NUMERIC 
(数字 类 型 ) 等 。 

返回 值 类 型 为 HSSFCell， 表 示 一 个 Excel 工作 表 的 单元 格 对 象 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 


参数 flePath 表示 文件 的 保存 路 径 ， 参 数 fleName 表示 文件 的 名 称 。 在 CreateExcelFile0 方 法 中 ， 创 建 Excel 工 
作 表 之 后 ， 在 该 工作 表 中 创建 单元 格 ， 关 键 代码 如 下 : 


public boolean CreateExcelFile(String filePath.String fileName){ 


try{ 
HSSFWorkbook workbook = new HSSFWorkbook0: /创建 Excel 工作 敌对 象 
HSSFSheet sheet = workbook.createSheetO: // 在 工作 短 中 创建 工作 表 对 象 
workbook setSheetName(0. "测试 "): /设置 工作 表 的 名 称 
HSSFRow row = sheet.createRow(0); /在 工作 表 中 创建 行 对 象 
HSSFCell cell =row.createCell(0,Cell.CELL_TYPE_STRING):// 在 行 中 创建 单元 格 对 象 
cell.setCellValue(" 这 是 我 的 第 一 个 Excel 文档 ! "); 1/ 设置 单元 格 内 容 


File xlsFile = new File(filePath,fileName); 

FileOutputStream fos = new FileOutputStream(xlsFile): 

workbook.write(fos); /将 文档 对 象 写 入 文件 输出 流 
fos.closeO; 
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return true; 

} catch (Exception e) { 
e.printStackTrace(); 
return false: 

y 

} 


国 秘笈 心 法 
在 一 个 Excel 文档 中 ,可 以 将 其 内 容 由 大 到 小 分 为 工作 簿 、 工 作 表 、 行 、 单 元 格 等 几 个 元 素 ， POI 组 件 正 是 


根据 这 一 结构 特点 来 进行 处 理 的。 例如 ， 工 作 表 对 象 HSSFSheet 是 由 工作 短 HSSFWorkbook 对 象 创建 的 ， 而 工作 
表 中 的 行 对 象 HSSFRow 是 由 工作 表 对 象 HSSFSheet 创建 的 ,单元 格 对 象 HSSFCell 是 由 行 对 象 HSSFRow 创建 的 。 


实例 说 明 

本 实例 将 介绍 如 何 应 用 POI 组 件 ， 向 Excel 工作 表单 元 格 中 添加 不 同类 型 的 数据 。 运 行 本 实例 ， 如 图 21.24 
所 示 ， 输 入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ” 按 钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 
向 Excel 工作 表单 元 格 中 添加 数字 类 型 的 数据 、 日 期 时 间 类 型 的 数据 、 布 尔 类 型 的 数据 和 字符 串 类 型 的 数据 等 。 
国 Meosokecel -dotaxs lsh 


河 广 kB 编 踢 E)， 视图 WW) 插入 D 格式 (QO) 
{ IND RO) BAW WWD -8 x 
【向 单元 格 中 添加 不 同类 型 的 数据 ] 让 

_ 一 

输入 文件 名 :Whe | | 
保存 地 址 : Entest 3.1415926 40415.36688 FALSE ~ 
[EE 测试/ 1 三 加 | 

二 


图 21.24 ”向 Excel 工作 表 的 单元 格 中 添加 不 同类 型 的 数据 


图 关键 技术 


向 Excel 工作 表 的 单元 格 中 添加 不 同类 型 的 数据 ,主要 应 用 的 是 单元 格 HSSFCell 对 象 的 setCellValue0 方 法 ， 
该 方法 包含 了 用 于 添加 多 种 不 同类 型 数据 的 重 载 方法 。 下 面 对 这 些 方法 进行 简单 介绍 。 

口 添加 数字 类 型 的 数据 

通过 HSSFCell 对 象 的 setCellValue0 方 法 ， 可 以 添加 数字 类 型 的 数据 ， 语 法 结构 如 下 : 


public void setCellValue(double value) 

参数 说 明 

value: 为 单元 格 设置 一 个 double 类 型 的 值 。 
口 添加 日 期 类 型 的 数据 


通过 HSSFCell 对 象 的 setCellValue0 方 法 ， 同 样 可 以 添加 日 期 类 型 的 数据 ， 语 法 结构 如 下 : 
public void setCellValue(Date date) 


参数 说 明 

date: 设置 单元 格 的 数据 类 型 为 java.util.Date。 也 可 以 应 用 java.util.Calendar 类 型 的 对 象 作为 该 方法 的 参数 。 
口 添加 布尔 值 类 型 的 数据 

通过 HSSFCell 对 象 的 setCellValue0 方 法 ， 也 可 以 添加 布尔 类 型 的 数据 ， 语 法 结构 如 下 : 

public void setCellValue(boolean value) 

参数 说 明 

value: 设置 单元 格 数据 类 型 为 boolean 类 型 。 


第 21 章 JSP 操作 Excel 
口 添加 字符 串 类 型 的 数据 
通过 HSSFCell 对 象 的 setCellValue0 方 法 ， 最 常用 的 就 是 添加 字符 串 类 型 的 数据 ， 语 法 结构 如 下 : 


public void setCellValue(String value) 


参数 说 明 
value: 设置 单元 格 数据 类 型 为 字符 串 类 型 。 
图 设计 过 程 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 
然后 在 该 方法 中 为 Excel 工作 表 添加 多 个 单元 格 ， 并 在 这 些 单元 格 中 添加 不 同类 型 的 数据 ， 关 键 代码 如 下 : 


public boolean CreateExcelFile(String filePath.String fileName){ 


try{ 


HSSFWorkbook workbook = new HSSFWorkbook0; /创建 Excel 工作 短 对 象 


HSSFSheet sheet = workbook.createSheet(); 


// 在 工作 短 中 创建 工作 表 对 象 


workbook.setSheetName(0, "测试 "); /设置 工作 表 的 名 称 
HSSFRow row = sheet.createRow(0); // 在 工作 表 中 创建 第 1 行 对 象 
HSSFCell label_num = row.createCell(0); /人 第 1 行 的 第 1 个 单元 格 
label_num.setCellValue(" 数 字 类 型 "); /添加 字符 串 

HSSFCell label_date =row.createCell(1): /第 1 行 的 第 2 个 单元 格 
label_date.setCellValue(" 日 期 时 间 类 型 "); // 添 加 字符 串 

HSSFCell label_bool = row.createCell(2); /第 1 行 的 第 3 个 单元 格 
label_bool.setCellValue(" 布 尔 类 型 "); /添加 字符 串 

HSSFRow row2 = sheet.createRow(1); /在 工作 表 中 创建 第 2 行 对象 
HSSFCell num_cell = row2.createCell(0); /第 2 行 的 第 1 个 单元 格 
num,_cell.setCellValue(3.1415926); /添加 数字 

HSSFCell date_cell = row2.createCell(1); /第 2 行 的 第 2 个 单元 格 
date_cell.setCellValue(Calendar.getInstance()): // 添 加 日 期 时 间 

HSSFCell bool_cell =row2.createCell(2); /第 2 行 的 第 3 个 单元 格 
bool_cellsetCellValue(false); /添加 布尔 值 


File xlsFile = new File(filePath,fileName); 
FileOutputStream fos = new FileOutputStream(xlsFile): 
workbook.write(fos); 

fos.closeO; 


/将 文档 对 象 写 入 文件 输出 流 
return true; 

} catch (Exception e) { 
e.printStackTraceO: 
return false: 

} 

} 


图 秘笈 心 法 
在 实际 应 用 中 ， 经 常 需要 在 Excel 工作 表 中 添加 不 同类 型 的 数据 ， 因 此 ， 应 该 掌握 应 用 POI 组 件 向 Excel 
工作 表单 元 格 中 添加 不 同类 型 数据 的 方法 。 


初级 
实用 指数 : 食 人 福全 


实例 555 


图 实例 说 明 

在 实例 554 中 不 难 发 现 ， 添 加 日 期 时 间 类 型 的 数据 之 后 ， 显 示 的 是 一 串 数字 ， 而 不 是 平常 所 看 到 的 日 期 时 
间 , 这 是 由 于 只 是 添加 了 一 个 Calendar 类 型 或 者 Date 类 型 的 对 象 , 想 要 将 日 期 时 间 对 象 显示 为 正常 的 日 期 时 间 ， 
还 需要 对 单元 格 进行 格式 化 ， 也 就 是 设置 单元 格 数据 的 格式 。 本 实例 将 介绍 如 何 应 用 POI 组 件 ， 设 置 单元 格 数 
据 的 格式 。 运行 本 实例 ， 如 图 21.25 所 示 ， 输 入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 
磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 设置 指定 单元 格 的 格式 为 日 期 时 间 。 
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国 Microsott seal- cellFormatxs 


【创建 指定 格式 的 单元 格 了 


输入 文件 各: celFormabds 
集 存 地 让。 Etest 


21.25 ”创建 指定 格式 的 单元 格 


图 关键 技术 


设置 单元 格 的 数据 格式 ， 主 要 应 用 org.apache.poi.hssf.usermodel.HSSFCellStyle 类 的 setDataFormat0 方 法 ， 
HSSFCellStyle 类 主要 用 于 设置 单元 格 的 显示 样式 。 在 创建 一 个 单元 格 对 象 HSSFCell 之 后 ， 可 以 调用 它 的 
setCellStyle( 方 法 为 指定 单元 格 设置 样式 ，setCellStyle( 方 法 的 参数 也 就 是 HSSFCellStyle 类 型 的 对 象 。 针 对 本 实 
例 ， 下 面 介 绍 创建 指定 格式 的 单元 格 的 步骤 。 

(1) 创建 单元 格 样式 对 象 HSSFCellStyle。HSSFCellStyle 对 象 是 由 工作 短 对 象 HSSFWorkbook 创建 的 ， 其 

语法 结构 如 下 : 

HSSFWorkbook workbook = new HSSFWorkbookO; 

HSSFCellStyle cellStyle = workbook.createCellStyleO; 


(2) 设置 单元 格 的 数据 格式 。 设 置 单元 格 的 数据 格式 主要 应 用 的 是 HSSFDataFormat 类 的 静态 方法 
getBuiltimnFormatO， 通 过 设置 该 方法 不 同 格式 的 参数 来 设置 单元 格 数据 的 不 同 格式 。getBuiltinFormat( 方 法 的 语 
法 结构 如 下 : 

public static short getBuiltinFormat(java.lang. String format) 

参数 说 明 

format: 指定 字符 串 类 型 的 格式 化 参数 。 通 过 指定 不 同类 型 的 格式 化 参数 ， 可 以 实现 对 单元 格 的 数据 进行 不 
同 格式 化 操作 ， 如 d-mmm、mmm-yy、m/d/yy、m/d/yy h:mm、0%、0.00%、0.00 等 。 有 关 这 些 参 数 的 详细 设置 
请 参见 POI 组 件 的 API 文档 ， 此 处 不 进行 详细 说 明 。 
(3) 设置 完 单元 格 的 数据 格式 之 后 ， 需 要 调用 HSSFCellStyle 对 象 的 setDataFormat0 方 法 ， 将 格式 应 用 于 
单元 格 。setDataFormat0 方 法 的 语法 格式 如 下 : 

public void setDataFormat(short ft) 

参数 说 明 

fmt: 指定 单元 格 的 数据 格式 。 这 个 short 类 型 的 格式 参数 值 是 通过 HSSFDataFormat 类 的 getBuiltinFormat() 
方法 返回 的 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 在 该 类 中 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 
然后 在 方法 中 为 Excel 工作 表 添 加 一 个 单元 格 ， 并 设置 单元 格 的 格式 为 日 期 时 间 ， 关 键 代码 如 下 : 


public boolean CreateExcelFile(String filePath.String fileName){ 


try{ 
HSSFWorkbook workbook = new HSSF WorkbookO: // 创 建 Excel 工作 簿 对 象 
HSSFSheet sheet = workbook.createSheet|: /在 工作 短 中 创建 工作 表 对 象 
workbook setSheetName(0. "测试 "): /设置 工作 表 的 名 称 
HSSFRow rowl = sheet.createRow(0); // 在 工作 表 中 创建 行 对 象 
HSSFCell Label_cell = rowl.createCell(0): // 在 行 中 创建 单元 格 对 象 
Label_cell.setCellValue(" 今 天 的 日 期 是 "); 
HSSFRow row2 = sheet.createRow(1); // 在 工作 表 中 创建 行 对 象 
HSSFCell date_cell = row2.createCell(0); // 在 行 中 创建 单元 格 对 象 
HSSFCellStyle cellStyle = workbook.createCellStyle0: // 创 建 单元 格 样式 对 象 


cellStyle.setDataFormat(HSSFDataFormat.getBuiltinFormat("m/d/yy")); 。 // 设 置 单元 格 的 数据 格式 
date_cell.setCellValue(Calendar.getInstanceO)): 

date_cell.setCellStyle(cellStyle); /将 单元 格 样式 应 用 于 单元 格 
File xlsFile = new File(filePath.fleName): 

FileOutputStream fos = new FileOutputStream(xlsFile): 
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workbook.write(fos); // 将 文档 对 象 写 入 文件 输出 流 


} catch (Exception e) { 
e.printStackTrace(); 
return false; 

} 

} 


图 秘笈 心 法 


在 实际 应 用 中 ， 根 据 客户 需求 可 能 需要 在 Excel 工作 表 中 添加 各 种 格式 的 数据 ， 这 就 需要 通过 HSSFData 
Format 类 来 对 单元 格 的 数据 进行 格式 化 ， 因 此 需要 了 解 HSSFDataFormat 类 的 常用 格式 化 的 参数 。 


实例 556 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 POI 组 件 , 设置 Excel 工作 表 的 单元 格 内 容 的 水 平 对 齐 方 式 。 运 行 本 实例 , 如 图 21.26 
所 示 ， 输 入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 
设置 单元 格 内 容 为 水 平 居中 对 齐 。 


国 Wieroh Excel -RIxe (=. © 
河 xHB 疾 。 视 机) 拍 和 0D) 格 攻 (0) 
i IAD WHEO PW) Wm -ox 
【设置 单元 格 内 容 部 水 平 对 章 方 式 ] Rh a el Dp | 一 
了 | 页 姓名， 页 工 性 到 ”员工 年 时 所 在 部 门 “3 
输入 文件 名 : 员工 人 ds 2| = 另 瑟 软件 开发 部 下 
代 符 地址 :Etsot 3 上 
下 测试 / [Pie » 
[于] l pr 


图 21.26 设置 单元 格 内 容 的 水 平 对 齐 方式 


图 关键 技术 


设置 单元 格 内 容 的 水 平 对 齐 方式 ， 主 要 应 用 HSSFCellStyle 类 的 setAlignment0 方 法 ,该 方法 的 语法 结构 如 下 : 

public void setAlignment(short align) 

参数 说 明 

align: short 类 型 的 参数 , 用 于 指定 单元 格 的 水 平 对 齐 方式 。 参 数值 是 在 org.apache.poi.ss.usermodel.CellStyle 
接口 中 定义 的 一 组 short 类 型 的 常量 ， 由 于 HSSFCellStyle 类 实现 了 CellStyle 接口 ， 所 以 这 些 常量 值 也 可 以 由 
HSSFCellStyle 类 来 调用 。 取 值 包括 ALIGN_CENTER (居中 对 齐 )、ALIGN_CENTER_SELECTION ( 跨 列 居中 )、 
ALIGN_FILL (填充 对 齐 )、ALIGN_GENERAL (常规 对 齐 )、ALIGN_JUSTIFY (两 端 对 齐 )、ALIGN_LEFT ( 左 
对 齐 )、ALIGN_RIGHT ( 右 对 齐 )。 


图 设计 过 程 
(1) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil, 编写 设置 对 齐 方 式 的 方法 createStyle0， 参 数 wb 表 
示 要 设置 对 齐 方式 的 Excel 工作 短 ， 参 数 align 表示 对 齐 方 式 的 取 值 ， 具 体 代码 如 下 : 


private static HSSFCellStyle createStyle(HSSFWorkbook wb.short align){ 
HSSFCellStyle cellStyle = wb.createCellStyleO: 
cellStyle.setAlignment(align); 
return cellStyle; 


} 
(2) 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 然 后 在 方法 中 为 Excel 工作 表 添 加 表示 员工 信息 的 单元 
格 ， 并 调用 步骤 〈1) 的 方法 createStyle0 设 置 每 个 单元 格 的 水 平 对 齐 方式 ， 关 键 代 码 如 下 : 
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Public boolean CreateExcelFile(String filePath.String fileName){ 


try{ 
HSSFWorkbook workbook = new HSSF Workbook(): /创建 Excel 工作 敌对 象 
HSSFSheet sheet = workbook.createSheet|: // 在 工作 短 中 创建 工作 表 对 象 
workbook.setSheetName(0, "测试 "): /设置 工作 表 的 名 称 
HSSFRow rowl = sheet.createRow(0); // 在 工作 表 中 创建 行 对 象 
HSSFCell nameCell =row]1.createCell(0); // 在 第 1 行 中 创建 单元 格 对 象 
nameCell.setCellValue(" 员 工 姓名 "); 
nameCell.setCellStyle(createStyle(workbook,HSSFCellStyle-ALIGN_CENTER)): /设置 居中 
HSSFCell sexCell =rowl.createCell(1); /在 行 中 创建 单元 格 对 象 
sexCell.setCellValue(" 员 工 性 别 "); 
sexCell.setCellStyle(createStyle(workbook,HSSFCellStyle ALIGN. CENTER)): /1/ 设 置 居中 
HSSFCell ageCell = row1.createCell(2):; /在 行 中 创建 单元 格 对 象 
ageCell.setCellValue(" 员 工 年 龄 ); 
ageCell.setCellStyle(createStyle(workbook,HSSFCellStyle. ALIGN._ CENTER)): /设置 居中 
| /此 处 省 略 了 添加 其 他 单元 格 的 代码 
HSSFRow row2 = sheet.createRow(1); /在 工作 表 中 创建 行 对 象 
HSSFCell nameValue = row2.createCell(0); /在 第 2 行 中 创建 单元 格 对 象 
nameValue.setCellValue(" 张 三 "); 
nameValue.setCellStyle(createStyle(workbook,HSSFCellStyle. ALIGN._ CENTER)): /设置 居中 
HSSFCell sexValue = row2.createCell(1); /在 行 中 创建 单元 格 对 象 
sexValue.setCellValue(" 男 "); 
sexValue.setCellStyle(createStyle(workbook,HSSFCellStyle ALIGN_CENTER)): /设置 居中 
HSSFCell ageValue = row2.createCell(2): // 在 行 中 创建 单元 格 对 象 
ageValue.setCellValue(25); 
ageValue.setCellStyle(createStyle(workbook,HSSFCellStyle.ALIGN._ CENTER)); 1/ 设置 居中 
ee /此 处 省 略 了 添加 其 他 单元 格 的 代码 
File xlsFile = new File(filePath,fileName); 
FileOutputStream fos = new FileOutputStream(xlsFile): 
‘workbook.write(fos); // 将 文档 对 象 写 入 文件 输出 流 
fos.close0; 
return true; 

} catch (Exception e) { 
e.printStackTrace(); 
return false; 

1 

} 

国 秘笈 心 法 


在 实际 应 用 中 ， 经 常 需要 设置 Excel 工作 表单 元 格 内 容 的 水 平 对 齐 方式 ， 所 以 ， 掌 握 应 用 POI 组 件 设置 单 
元 格 的 对 齐 方式 是 很 有 必要 的 。 


实例 557 


图 实例 说 明 

在 实例 556 中 介绍 了 如 何 设置 单元 格 的 水 平 对 齐 方式 ， 本 实例 将 介绍 如 何 应 用 POI 组 件 ， 设 置 Excel 工作 
表 的 单元 格 内 容 的 垂直 对 齐 方 式 。 运行 本 实例 ， 如 图 21.27 所 示 ， 输 入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 
建 ” 按 钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 设置 单元 格 内 容 为 垂直 居中 对 齐 。 


图 关键 技术 

设置 单元 格 内 容 的 垂直 对 齐 方式 ， 主 要 应 用 HSSFCellStyle 类 的 setVerticalAlignment0 方 法 ， 该 方法 的 语法 
结构 如 下 : 

public void setVerticalAlignment(short align) 

参数 说 明 


align: short 类 型 的 参数 ， 用 于 指定 单元 格 的 垂直 对 齐 方式 。 参 数值 是 在 CellStyle 接口 中 定义 的 一 组 short 
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类 型 的 常量 ， 由 于 HSSFCellStyle 类 实现 了 CellStyle 接口 ， 所 以 这 些 常量 值 也 可 以 由 HSSFCellstyle 类 来 调用 。 
取 值 包括 VERTICAL BOTTOM ( 底 端 对 齐 )、VERTICAL _ CENTER (居中 对 齐 )、VERTICAL JUSTIFY (两 端 


对 齐 )、 


VERTICAL TOP (顶端 对 齐 )。 


el 


国 Microsoft Excel - 员工 信息 xls 


党 ] 文 HD 编 和 日 视 四， 插 XD 术 t(0) 工具 D 
= 数据 D) 窗口 WW 帮助 (H) 


型 
| 
i 员工 娃 名 | 员工 性 别 员工 年 龄 | 所 在 部 门 职务 | 上 
护 入 文件 各 员工 信息 xs 张 E 男生 软件 开 发 部 程序 员 【1 
保存 地 址 :。 Eest 
| NM ja 证 
Er 此 


21.27 ”设置 单元 格 内 容 的 垂直 对 齐 方式 


图 设计 过 程 


(1 


) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 设置 对 齐 方 式 的 方法 alignStyle0， 参 数 wb 表 


示 要 设置 对 齐 方式 的 Excel 工作 籍 ， 参 数 align 表示 水 平 对 齐 方式 ， 参 数 v_align 表示 垂直 对 齐 方 式 ， 具 体 代码 


如 下 : 


Private static HSSFCellStyle alignStyle(HSSFWorkbook wb,short align,short v_align) 


{ 


} 


HSSFCellStyle cellStyle = wb.createCellStyleO; 
cellStyle.setAlignment(align); 
cellStyle.setVerticalAlignment(v_align): 

return cellStyle; 


(2) 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 然 后 在 方法 中 为 Excel 工作 表 添 加 表示 员工 信息 的 单元 
格 ， 并 调用 步骤 (1) 的 方法 alignStyle0 设 置 每 个 单元 格 水 平 对 齐 方式 和 垂直 对 齐 方式 ， 关 键 代 码 如 下 : 


public boolean CreateExcelFile(String filePath,String fileName){ 


try{ 


} ea 


HSSF Workbook workbook = new HSSF WorkbookO: /创建 Excel 工作 短 对 象 
HSSFSheet sheet = Workbook.createSheetO: /在 工作 短 中 创建 工作 表 对 象 
workbook.setSheetName(0, "测试 "); /设置 工作 表 的 名 称 
HSSFRow row1 = sheet.createRow(0); /在 工作 表 中 创建 行 对 象 
HSSFCell nameCell = row1.createCell(0): /在 第 1 行 中 创建 单元 格 对 象 


nameCell.setCellValue(" 员 工 姓名 "); 
nameCell.setCellStyle(alignStyle(workbook.HSSFCellStyle.ALIGN_CENTER.HSSFCellStyle.VERTICA4L_CENTER)): // 设 置 单元 格 对 齐 方 式 
HSSFCell sexCell = rowl.createCell(1); // 在 行 中 创建 单元 格 对 象 

sexCell.setCellValue(" 员 工 性 别 "); 
sexCell.setCellStyle(alignStyle(workbook.HSSFCellStyle.ALIGN_CENTER.HSSFCellStyle.VERTICA4L_CENTER)): // 设 置 单元 格 对 齐 方式 
/此 处 省 略 了 添加 其 他 单元 格 以 及 设置 样式 的 代码 
HSSFRow row2 = sheet.createRow(1); 

HSSFCell nameValue = row2.createCell(0): 
nameValue.setCellValue(" 张 三 "); 
nameValue.setCellStyle(alignStyle(workbook.HSSFCellStyle.ALIGN_CENTER.HSSFCellStyle.VERTIC4L_CENTER)): // 设 置 单元 格 对 齐 方 式 


/在 工作 表 中 创建 行 对 象 
/在 第 2 行 中 创建 单元 格 对 象 


HSSFCell sexValue = row2.createCell(1); // 在 行 中 创建 单元 格 对 象 


sexValue.setCellValue(" 男 "); 
sexValue.setCellStyle(alignStyle(workbook,HSSFCellStyle.4LIGN_CENTER.HSSFCellStyle.VERTICAL_CENTER)): // 设 置 单元 格 对 齐 方式 
……"// 此 处 省 略 了 添加 其 他 单元 格 以 及 设置 样式 的 代码 
File xlsFile = new File(filePath.fileName): 
FileOutputStream fos = new FileOutputStream(xlsFile): 
workbook writefos): 
fos.closeO: 
return true; 
tch (Exception e) { 

e.printStackTrace(): 

return false: 


// 将 文档 对 象 写 入 文件 输出 流 
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图 秘笈 心 法 


在 实际 应 用 中 ， 有 时 需要 设置 Excel 工作 表单 元 格 内 容 的 垂直 对 齐 方式 ， 所 以 ， 掌 握 应 用 POI 组 件 设置 单 
元 格 的 垂直 对 齐 方式 也 是 很 有 必要 的 。 


初级 
实用 指数 : 食 食 食 


实例 558 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 POI 组 件 ， 对 Excel 工作 表 的 单元 格 进行 合并 操作 。 运 行 本 实例 ， 如 图 21.28 所 示 ， 
输入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 对 指定 
的 单元 格 进行 合并 操作 。 


[EECT 【J 
河 ] XD MD MV MAD tt) IRD 


【合并 单元 格 】 


员工 姓 名 员工 性 别 员工 年 版 所 在 部 门 。 职务 | 联 ， 
张 = | 男 生 软件 开发 部 程序 员 596 


输入 文件 名 :员工 信息 xs 


保存 地 址 ; Ee 和 
FN ME/ 1 En | 


21.28 合并 单元 格 


图 关键 技术 

对 Excel 工作 表 的 单元 格 进行 合并 操作 ， 主 要 应 用 的 是 HSSFSheet 类 的 addMergedRegion() 方 法 ， 该 方法 包 
含 一 个 用 于 设置 合并 区 域 的 org.apache.poi.hssf.util.Region 类 型 的 对 象 , 应 用 Region 对 象 可 以 对 单元 格 进行 合并 
操作 。Region 类 的 其 中 一 个 构造 方法 的 语法 结构 如 下 : 

public Region(int TowFrom.short colFrom.int rowTo.short colTo) 

参数 说 明 

@ rowFrom: 指定 要 合并 的 单元 格 所 在 行 的 起 始 位置 的 行 索引 。 索 引 值 从 0 开始 。 

@ colFrom: 指定 要 合并 的 单元 格 所 在 列 的 起 始 位 置 的 列 索引 。 索 引 值 从 0 开始 。 

目 IowTo: 指定 要 合并 的 单元 格 所 在 行 的 结束 位 置 的 行 索引 。 索 引 值 从 0 开始。 

@ colTo: 指定 要 合并 的 单元 格 所 在 列 的 结束 位 置 的 列 索 引 。 索 引 值 从 0 开始 。 


多 提示 : 在 创建 Region 对 象 时 ， 在 构造 方法 中 可 以 不 用 指定 参数 ， 也 就 是 应 用 它 的 无 参 的 构造 方法 ， 然 后 通 
过 该 对 象 的 set[XXX() 方 法 也 可 以 设置 合并 单元 格 的 区 域 的 值 。 
图 设计 过 程 
(1) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 设置 对 齐 方 式 的 方法 alignStyle0， 参 数 wb 表 
示 要 设置 对 齐 方式 的 Excel 工作 簿 ， 参 数 align 表示 水 平 对 齐 方式 ， 参 数 v_align 表示 垂直 对 齐 方式 ， 具 体 代 码 
如 下 : 
Private static HSSFCellStyle alignStyle(HSSF Workbook wb.short align.short v_align) 
HSSFCellStyle cellStyle = wb.createCellStyle0O: 
cellStyle.setAlignment(align): 
cellStyle.setVerticalAlignment(v_align): 
return cellStyle: 
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(2) 编写 创建 Excel 文档 的 方法 CreateExcelFile0， 然 后 在 方法 中 为 Excel 工作 表 添 加 表示 员工 信息 的 单元 
格 ， 并 且 合 并 第 一 行 指定 的 多 个 单元 格 为 一 个 单元 格 ， 关 键 代 码 如 下 : 


Public boolean CreateExcelFile(String filePath.String fileName){ 


try{ 
HSSFWorkbook workbook = new HSSFWorkbookO: /| 创建 Excel 工作 短 对 象 
HSSFSheet sheet = workbook.createSheet|: // 在 工作 簿 中 创建 工作 表 对 象 
workbook.setSheetName(0, "测试 "); /设置 工作 表 的 名 称 
HSSFRow rowl = sheet createRow(0); /在 工作 表 中 创建 行 对 象 


sheet addMergedRegion(new Region(0.(short)0.0.(short)5)); /合并 第 1 行 的 第 1 一 第 5 个 单元 格 
HSSFCell titleCell = rowl.createCell(0): 
titleCell.setCellValue(" 员 工 信 息 表 "); 
titleCell.setCellStyle(alignStyle(workbook,HSSFCellStyle.ALIGN_CENTER.HSSFCellStyle. VERTICAL_CENTER)); 
HSSFRow row2 = sheet.createRow(1); 
HSSFCell nameCell =row2.createCell(0); /在 第 1 行 中 创建 单元 格 对 象 
nameCell.setCellValue(" 员 工 姓名 "); 
Se /此 处 省 略 了 添加 其 他 单元 格 的 代码 
File xlsFile = new File(filePath,fileName); 
FileOutputStream fos = new FileOutputStream(xlsFile): 
workbook.write(fos); // 将 文档 对 象 写 入 文件 输出 流 
fos.close0; 
return true; 

} catch (Exception e) { 
e.printStackTrace(); 
return false: 

} 

} 


图 秘笈 心 法 


在 实际 应 用 中 ， 根 据 实际 情况 经 常 需要 对 Excel 工作 表单 元 格 进行 合并 ， 所 以 ， 掌 握 应 用 POI 组 件 合并 单 
元 格 是 很 有 必要 的 。 


实例 559 


实用 指数 : 机 页 页 | 


国 实例 说 明 


本 实例 将 介绍 如 何 应 用 POI 组 件 ， 设 置 Excel 工作 表 的 单元 格 的 边框 样式 。 运 行 本 实例 ， 如 图 21.29 所 示 ， 
输入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 对 指定 
的 单元 格 的 边框 样式 进行 设置 。 


| 国 Wicocon Fcel- barderxle ee | 
河 ] xfB 办 洗 日 视 目 WW 插入 四 ” 格 坟 DO)， 工具 D 
: 数据 DD) 寄 DQ 帮助 H) 区 本 /天 
【设置 单元 格 的 边框 样式 ] 本 Rs 9 
a 3 1 
NM 国 | 
tL 数字 
图 21.29 设置 单元 格 的 边框 样式 
图 关键 技术 
设置 单元 格 的 边框 样式 , 主要 应 用 的 是 HSSFCellStyle 类 的 setBorderXXX0 方 法 。 下 面 介绍 用 于 设置 单元 格 
上 边框 样式 的 方法 setBorderTop0。 


该 方法 用 于 设置 单元 格 的 上 边框 的 线条 样式 ， 如 可 以 将 上 边框 设置 成 虚线 、 实 线 、 双 实 线 等 。 其 语法 结构 
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如 下 : 


public void setBorderTop(short border) 
参数 说 明 
border: 指定 边框 的 线条 样式 。 取 值 为 HSSFCellStyle 类 中 的 静态 常量 , 例如 BORDER_DOUBLE ( 双 实 线 )、 
BORDER_THIN ( 细 线 )、BORDER _THICK ( 粗 线 ) 等 。 有 关 其 他 详细 参数 请 参见 POI 组 件 的 API 中 的 
HSSFCellstyle 类 。 


[| 说 明 : 在 HSSFCellStyle 类 中 ， 用 于 设置 左边 框 、 右 边框 和 下 边框 的 setBorderXXX() 方 法 与 setBorderTop() 
方法 基本 类 似 ， 在 此 不 再 详细 介绍 。 

HSSFCellStyle 类 中 还 包含 用 于 设置 单元 格 上 、 下 、 左 、 右 边框 颜色 的 方法 setXXXBorderColor0。 下 面 介 绍 
用 于 设置 单元 格 上 边框 颜色 的 方法 setTopBorderColor。 

该 方法 用 于 设置 单元 格 的 上 边框 颜色 ， 其 语法 结构 如 下 : 

public void setTopBorderColor(short color) 

color: 指定 边框 的 颜色 值 。 取 值 为 HSSFColor 类 中 的 静态 常量 ， 包 括 40 多 种 常用 颜色 值 ， 例 如 GREEN、 
BLUE、YELLOW、PINK、GRAY 等 。 这 些 颜 色 是 HSSFColor 类 中 定义 的 常量 类 型 的 子 类 ， 在 每 个 子 类 中 都 提 
供 了 一 个 表示 本 颜色 的 short 类 型 的 常量 索引 index。 因 此 在 为 setTopBorderColor0 设 置 参数 时 ， 必 须 以 
HSSFColor.GREEN.index 这 种 方式 进行 设置 。 


图 设计 过 程 
创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 创建 Excel 文档 的 方法 CreateExcelFile0， 然 后 在 方 
法 中 为 指定 的 单元 格 设置 边框 样式 ， 关 键 代码 如 下 : 


public boolean CreateExcelFile(String filePath.String fileName){ 


HSSF Workbook workbook = new HSSF WorkbookO:; // 创 建 Excel 工作 敌对 象 
HSSFSheet sheet = workbook.createSheetO; /在 工作 夭 中 创建 工作 表 对 象 
workbook.setSheetName(0, "测试 "); /设置 工作 表 的 名 称 

HSSFRow row1l = sheet.createRow(0); /在 工作 表 中 创建 行 对 象 
sheet.addMergedRegion(new Region(0.(short)0.0.(short)S)): /合并 第 1 行 的 第 1 一 5 个 单元 格 
HSSFCell titleCell = rowW1.createCell(0): 

titleCell.setCellValue(" 员 工 信 息 表 "); 

HSSFCellStyle cellStyle = workbook.createCellStyleO; 

cellStyle.setAlignment(CellStyle.ALIGN. CENTER): /设置 水 平 居中 


cellStyle.setVerticalAlignment(CellStyle.VERTICAL_CENTER); /设置 垂直 居中 
cellStyle.setBorderTop(HSSFCellStyle. BORDER_DOUBLE): /设置 单元 格 项 部 边框 的 线条 样式 
cellStyle.setBorderLeft(HSSFCellStyle. BORDER_DOUBLE): /设置 单元 格 左 侧 边框 的 线条 样式 
cellStyle.setBorderRight(HSSFCellStyle. BORDER_DOUBLE): /设置 单元 格 右 侧 边框 的 线条 样式 
cellStyle.setBorderBottom(HSSFCellStyle.BORDER_DOUBLE): /设置 单元 格 底部 边框 的 线条 样式 
cellStyle.setLeftBorderColor(HSSFColor. SKY_BLUE.index): // 设 置 单元 格 左 侧 边框 颜色 
cellStyle.setRightBorderColor(HSSFColor. SKY_BLUE.index); /设置 单元 格 右 侧 边框 颜色 
cellStyle.setBottomBorderColor(HSSFColor.SKY_BLUE.index); 。 // 设 置 单元 格 底部 边框 颜色 
cellStyle.setTopBorderColor(HSSFColor. SKY_BLUE .index): /设置 单元 部 项 部 边框 颜色 


HSSFRow row2 = sheet.createRow(1); 
HSSFCell nameCell = row2.createCell(0): // 在 第 1 行 中 创建 单元 格 对 象 
nameCell.setCellValue(" 员 工 姓名 "); 
nameCell.setCellStyle(cellStyle); 
ee /此 处 省 略 了 添加 其 他 单元 格 的 代码 
File xlsFile = new File(filePath.fleName): 
FileOutputStream fos = new FileOutputStream(xlsFile): 
workbook.write(fos); // 将 文档 对 象 写 入 文件 输出 流 
fos.closeO; 
return true: 
} catch (Exception e) { 
e.printStackTrace(); 
return false: 
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图 秘笈 心 法 


需要 注意 的 是 ， 如 果 需 要 设置 边框 颜色 的 单元 格 为 合并 后 的 单元 格 ， 那 么 ， 再 为 它 设置 的 边框 颜色 只 对 合 
并 之 前 的 第 一 个 单元 格 起 作用 ， 对 其 他 单元 格 无 效 。 如 果 和 希望 改变 合并 单元 格 的 边框 颜色 ， 在 合并 之 前 就 应 该 


设置 所 有 要 合并 的 单元 格 边框 颜色 ， 这 样 合并 之 后 的 单元 格 边框 颜色 就 改变 了 。 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 POI 组 件 ,设置 Excel 工作 表 的 单元 格 字体 样式 。 运 行 本 实例 


初级 
实用 指数 : 让 宙 


， 如 图 21.30 所 示 ， 输 


入 Excel 文档 的 名 称 和 保存 路 径 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文档 ， 并 设置 了 指 


定单 元 格 的 字体 样式 。 
[ET | 
4 MO Wa HAD vO TRO 
二 数据 D) 苗 口 MY) 才 且 (H) EY I 
【设置 单元 格 字体 样式 ] 

输入 文件 名 :字体 xls | 名 a I 和 ey 二 咀 
保存 地 址 : Eest | 

| 下 克 \ 测 起/ "| 个 

数字 
图 21.30 设置 单元 格 的 字体 样式 


设置 单元 格 的 字体 样式 ， 主 要 应 用 的 是 org.apache.poihssf.usermodel.HSSFFont 类 ， 在 该 类 中 包含 了 一 些 用 


于 设置 字体 样式 的 方法 。 下 面 介绍 HSSFFont 类 中 常用 的 方法 。 

口 setColor() 方 法 

该 方法 用 于 设置 字体 颜色 ， 其 语法 结构 如 下 : 

public void setColor(short color) 

参数 说 明 

color: 指定 short 类 型 的 颜色 值 。 颜 色 取 值 由 HSSFColor 类 提供 。 

口 setFontHeightInPoints() 方 法 

该 方法 用 于 设置 字号 ， 其 语法 结构 如 下 : 

public void setFontHeightInPoints(short height) 

参数 说 明 

height: 指定 单元 格 字体 的 字号 。 

口 setFontName( 方 法 

该 方法 用 于 设置 字体 名 称 ， 其 语法 结构 如 下 : 

public void setFontName(String name) 

参数 说 明 

name: 指定 单元 格 字体 的 名 称 。 可 以 设置 Excel 文件 常用 的 字体 作为 该 方法 的 参数 ， 
Times New Roman 等 。 如 果 不 设置 字体 名 称 ， 默 认 采 用 Arial 类 型 。 

口 setrtalic0 方 法 

该 方法 用 于 设置 字体 是 否 倾斜 ， 其 语法 结构 如 下 : 

public void setItalic(boolean italic) 


例如 Tahoma、Arial、 


Java Web 开发 实例 大 全 (基础 卷 ) 


参数 说 明 
italic: 


口 seUnderline0 方 法 


取 值 为 true 或 false，true 表示 倾斜 ，false 表示 不 倾斜 。 


该 方法 用 于 设置 字体 的 下 划 线 ， 其 语法 结构 如 下 : 


public void seUnderline (byte underline) 
参数 说 明 
underline: 


指定 下 划 线 的 样式 。 取 值 为 HSSFFont 类 提供 的 静态 常量 。 


[四 说 明 : HSSFFont 类 中 还 包含 了 其 他 几 个 用 于 设置 字体 样式 的 方法 ， 此 处 不 再 进行 详细 介绍 。 详 细 说 明 请 参 


见 POI 组 件 的 API 文档 。 


图 设计 过 程 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 创建 Excel 文档 的 方法 CreateExcelFile0， 然 后 在 方 


法 中 为 指定 的 单元 格 设置 字体 样式 ， 关 键 代 码 如 下 : 
Public boolean CreateExcelFile(String filePath,String fileName){ 
try{ 

HSSFWorkbook workbook = new HSSF Workbook(; 
HSSFSheet sheet = workbook.createSheet():; 
workbook.setSheetName(0, "测试 "); 

HSSFRow row] = sheet.createRow(0); 
sheet.addMergedRegion(new Region(0,(short)0,0,(short)5)): 
HSSFFont font = Workbook.createFontO; 
font.setColor(HSSFColor.SKY_ BLUE.index): 
font.setFontHeightInPoints((short)14):; 
font.setFontName(" 构 体 "); 

font.setItalic(true); 

font.setStrikeout(false); 
font.setUnderline(HSSFFont.U_SINGLE); 
HSSFCellStyle cellStyle = workbook.createCellStyleO; 
cellStyle.setFont(font); 

HSSFCell titleCell = row1.createCell(0): 
titleCell.setCellValue(" 员 工 信 息 表 "); 
titleCell.setCellStyle(cellStyle): 

roeees /此 处 省 略 了 添加 其 他 单元 格 的 代码 

File xlsFile = new File(filePath.fleName): 
FileOutputStream fos = new FileOutputStream(xlsFile); 


workbook.write(fos); 
fos.close0; 
return true; 

} catch (Exception e) { 
e.printStackTrace(): 
return false; 

} 

} 

图 秘笈 心 法 


/创建 Excel 工作 敌对 象 

/在 工作 短 中 创建 工作 表 对 象 
/设置 工作 表 的 名 称 

// 在 工作 表 中 创建 行 对 象 
/合并 第 1 行 的 第 1 一 5 个 单元 格 
// 创 建 字 体 对 象 

/设置 字体 颜色 

/设置 字号 

/设置 字体 样式 

// 是 否 倾斜 

// 是 否 带 有 删除 线 
/设置 下 划 线 


// 将 字体 设置 添加 到 样式 中 


/将 文档 对 象 写 入 文件 输出 流 


在 实际 开发 应 用 过 程 中 ， 有 时 需要 改变 Excel 单元 格 的 字体 样式 , 这 就 需要 应 用 POI 组 件 的 HSSFFont 类 进 


行 设 置 。 因 此 ， 有 必要 掌握 HSSFFont 类 的 用 法 。 


实例 561 


图 实例 说 明 


实用 指数 : 让 让 二 


本 实例 将 介绍 如 何 应 用 POI 组 件 ， 向 Excel 工作 表 中 插入 图 片 。 运 行 本 实例 ， 如 图 21.31 所 示 ， 输 入 Excel 
文档 的 名 称 和 保存 路 径 ， 并 选中 要 插入 的 图 片 ， 单 击 “ 创 建 ”按钮 后 ， 将 在 指定 磁盘 路 径 中 创建 一 个 Excel 文 
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档 ， 并 向 Excel 文件 中 插入 图 片 。 


ET (= cn 
河 zf#G We WEV HAY 09 IRD 
i Er wy sx 


【Eee 广 件 中 插入 医 片 】 
文件 名 括 和 图片 4s 
保存 地 址 : Entest 
这 上 EGR [SC 


| 
21.31 向 Excel 文件 中 插入 图 片 


图 关键 技术 


在 应 用 POI 组 件 向 Excel 文件 中 插入 图 片 之 前 ， 应 该 应 用 java.io.FileInputStream 将 图 片 转换 为 原始 字 节 流 
数据 ， 然 后 再 应 用 POI 组 件 的 相关 类 进行 写 入 操作 ， 具 体 步 又 如 下 : 
(1) 应 用 FileInputStream 读 取 图 片 的 字 节 流 数据 ， 并 保存 在 字 节 数组 中 ， 读 取 方 法 代码 如 下 : 


FileInputStream fis = new FileInputStream(imgPath); 
byte [] imgBytes = new byte[fis.availableO]:/available0 方 法 用 于 获取 图 片 的 字 节 长 度 


(2) 应 用 POI 组 件 中 的 org.apache.poi.hssf.usermodel.HSSFClientAnchor 类 ， 在 Excel 工作 表 中 创建 一 个 显 
示 图 片 的 区 域 。 这 个 类 对 于 向 Excel 文件 中 插入 图 片 非常 重要 ， 因 为 需要 用 它 来 设置 图 片 的 显示 区 域 。 应 用 
HSSFClientAnchor 类 创建 区 域 时 ， 主 要 设置 区 域 所 在 的 左上 角 起 始 位 置 坐标 和 右 下 角 的 结束 位 置 坐标 ， 在 该 类 
中 主要 应 用 setAnchor0 方 法 来 设置 区 域 的 坐标 。setAnchor0 方 法 的 语法 结构 如 下 : 

public void setAnchor(short coll,int rowl,int x1,int y1,short col2,int row2,int x2,int y2) 

参数 说 明 

@ coll: 指定 区 域 所 在 的 起 始 位 置 的 单元 格 列 索引 。 

@ row1: 指定 区 域 所 在 的 起 始 位 置 的 单元 格 行 索 引 。 

@ x1: 指定 区 域 所 在 的 左上 角 的 横 坐 标 。 

@ yl: 指定 区 域 所 在 的 左上 角 的 纵 坐 标 。 

@ col2: 指定 区 域 所 在 的 结束 位 置 的 单元 格 列 索引 。 

@ row2: 指定 区 域 所 在 的 结束 位 置 的 单元 格 行 索引 

@ x2: 指定 区 域 所 在 的 右 下 角 的 横 坐 标 。 

@ y2: 指定 区 域 所 在 的 右 下 角 的 纵 坐 标 。 

(3) 应 用 工作 短 对 象 HSSFWorkbook 中 的 addPicture0 方 法 添加 图 片 。 调 用 这 个 方法 后 ， 并 不 会 直接 将 图 
片 插入 Excel 文件 中 ， 而 是 保存 在 缓存 中 ， 并 且 返 回 图 片 在 缓存 中 的 索引 值 。addPicture0 方 法 的 语法 结构 如 下 : 

public int addPicture(byte[] pictureData,int format) 

参数 说 明 

@ pictureData: 指定 图 片 数据 的 字 节 数组 。 

@ format: 指定 保存 到 Excel 文件 之 后 的 图 片 类 型 。 取 值 为 HSSFWorkbook 类 中 的 静态 常量 ， 如 PICTURE_ 
TYPE JPEG、 PICTURE TYPE PNG、PICTURE TYPE_WMEF 等 。 

(4) 应 用 org.apache.poihssf.usermodel.HSSFPatriarch 类 的 createPicture0 方 法 ， 将 缓存 中 的 图 片 数 据 画 到 
Excel 文件 中 。HSSFPatriarch 类 的 createPicture0 方 法 的 语法 结构 如 下 : 

public HSSFPicture createPicture(HSSFClientAnchor anchorint pictureIndex) 

参数 说 明 

@ anchor: 指定 图 片 保存 的 区 域 。 区 域 参数 的 设置 在 步骤 (2) 中 已 经 给 出 了 。 

@ pictureIndex: 指定 图 片 的 索引 。 图 片 索 引 是 在 步骤 (3) 中 调用 HSSFWorkbook 对 象 的 addPicture() 方 法 
返回 的 索引 值 。 


图 设 计 过 程 


创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 创建 Excel 文档 的 方法 CreateExcelFile0， 然 后 在 方 
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法 中 向 Excel 文件 中 插入 图 片 ， 关 键 代 码 如 下 : 
public boolean CreateExcelFile(String filePath. String fileName.String imgPath){ 


try{ 
HSSFWorkbook workbook = new HSSF WorkbookO; /创建 Excel 工作 短 对 象 
HSSFSheet sheet = workbook.createSheetO: // 在 工作 短 中 创建 工作 表 对 象 
workbook.setSheetName(0, "测试 "); /设置 工作 表 的 名 称 
HSSFRow rowl = sheet.createRow(0); W/ 在 工作 表 中 创建 行 对 象 
sheet.addMergedRegion(new Region(0.(short)0.0.(shorb5)): /合并 第 1 行 的 第 1 一 第 5 个 单元 格 
/此 处 省 略 了 其 他 非 关键 代码 
FileInputStream fis = new FileInputStream(imgPath): // 创 建文 件 输入 流 对 象 
byte[] imgBytes = new byte[fis.availableO]: /创建 用 于 保存 图 片 字 节 的 字 节 数组 
fis.read(imgBytes); // 读 取 图 片 字 节 流 ， 保 存 到 字 节 数组 中 


int picIndex = workbook.addPicture(imgBytes, workbook.PICTURE_TYPE_JPEG): // 添 加 图 片 字 节 数据 到 工作 短 对 象 中 
HSSFClientAnchor anchor = new HSSFClientAnchor(); 1/ 创建 用 于 设置 图 片 保存 区 域 的 对 象 
/设置 区 域 ， 左 上 角 坐标 为 第 1 个 单元 格 〈5.5)， 右 下 角 坐 标 为 第 2 个 单元 格 (130,200) 
anchor.setAnchor((short)0, 0, 5, 5, (short)1, 0, 130, 200); 
HSSFPatriarch patri = sheet.createDrawingPatriarch(); // 创 建 用 于 绘画 的 对 象 
patri.createPicture(anchor , picIndex): // 将 图 片 画 到 Excel 工作 短 的 指定 区 域 
……"// 此 处 省 略 了 其 他 非 关键 代码 
File xlsFile = new File(filePath,fileName); 
FileOutputStream fos = new FileOutputStream(xlsFile); 
workbook.write(fos); // 将 文档 对 象 写 入 文件 输出 流 
fos.closeO; 
return true; 
} catch (Exception e) { 
e.printStack Trace(); 
return false; 


} 
} 


图 秘笈 心 法 
相对 于 JXL 组 件 而 言 ，POI 组 件 对 插入 图 片 的 实现 稍微 有 些 麻烦 ， 但 是 POI 组 件 插入 图 片 时 ， 对 区 域 的 设 
置 使 图 片 的 位 置 更 加 灵活 。 在 实际 应 用 中 ， 读 者 可 以 根据 不 同 的 需求 ， 选 择 应 用 哪 一 个 组 件 来 实现 插入 图 片 。 


实例 562 


力 实例 说 明 


本 实例 将 介绍 如 何 应 用 POI 组 件 读 取 数据 库 中 的 数据 ， 然 后 导出 Excel 文件 中 。 运 行 本 实例 ， 如 图 21.32 
所 示 ， 显 示 了 从 数据 库 中 读 取 出 的 员工 表 信息 ， 单 击 “ 导 出 ”按钮 后 ， 这 些 信息 将 被 导出 Excel 文件 中 。 


[ 国 wioesof Excel - AT 全 e 表 水 [= | © le 
| 


| 党] XH#D Me® MEV MAD RtiO IRD Mui(D) 
:CD ht) x 


RTM 。 抽 工程 到 a i 和 re 9 
ba 男 齿 “， 斌 发 部 软件 工程 师 “ 15576781578 
本 四 男 女 ”| 人 事 部 ” 人事 专 员 “18378963257 
= 去 大 研发 部 “项目 经 理 ”13566665666 
tm 妈 研 类 部。 项目 经 理 。。 13384334388 - 

区 到 | 国 = 

21.32 ”将 数据 库 数据 导出 到 Excel 文件 
图 关键 技术 
本 实例 的 实现 很 简单 ， 并 没有 用 到 POI 组 件 中 陌生 的 方法 ， 用 到 的 方法 都 已 经 在 前 面 的 实例 中 介绍 过 了 。 


第 21 章 


JSP 操作 Excel 


实现 的 关键 之 处 是 : 首先 将 数据 库 中 的 数据 读 取 并 保存 在 一 个 List 集合 中 ， 然 后 在 导出 数据 的 方法 中 ， 通 过 遍 
历 这 个 List 集合 ， 再 应 用 POI 组 件 的 单元 格 对 象 HSSFCell 的 setCellValue0 方 法 ， 向 Excel 中 添加 数据 即 可 。 


图 设计 过 程 


(1) 创建 用 于 封装 员工 信息 的 JavaBean 类 Employee， 关 键 代码 如 下 : 


public class Employee { 
Private String name; 
Private String sex; 
private String dept: 
Private String duty; 
Private String telephone; 
} 


(2) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 导出 数据 到 Excel 文件 的 方法 readData 
ToExcelFile0， 参 数 list 中 保存 了 从 数据 库 中 读 取 的 封装 数据 的 对 象 Employee， 关 键 代 码 如 下 : 


public boolean readDataToExcelFile(List<Employee> lis){ 
try{ 
HSSFWorkbook workbook = new HSSF Workbook(O; 
HSSFSheet sheet = Workbook.createSheetO: 
workbook.setSheetName(0, "测试 "); 
HSSFRow row1 = sheet.createRow(0): 
sheet.addMergedRegion(new Region(0,(short)0,0,(short)4)): 
ee /此 处 省 略 了 一 些 其 他 非 关 键 代码 
HSSFCellStyle cellstyle = workbook createCellstyle0; 
cellStyle.setAlienment(CellStyle.ALIGN. CENTER): 
cellStyle.setVertical Alienment(CellStyle. VERTICAL CENTER): 
HSSFCell titleCell = rowl.createCell(0); 
titleCell.setCellValue(" 员 工 信 息 表 "); 
ee /此 处 省 略 了 一 些 其 他 非 关键 代码 
phoneCell.setCellStyle(cellStyle): 
for(int i=0;i<list.sizeO:iH){ 
Employee emp = (Employee)list.get(i); 
HSSFRow dataRow = sheet createRow(i+2); 
HSSFCell name = dataRow.createCell(0); 
name.setCellValue(emp.getName()); 
name.setCellStyle(cellStyle); 
HSSFCell sex = dataRow.createCell(1); 
sex.setCellValue(emp.getSex()); 
sex.setCellStyle(cellStyle); 
HSSFCell dept = dataRow.createCell(2); 
dept.setCellValue(emp.getDeptO); 
dept.setCellStyle(cellStyle); 
HSSFCell duty = dataRow.createCell(3); 
duty.setCellValue(emp.getDutyO); 
duty.setCellStyle(cellStyle); 
HSSFCell phone = dataRow.createCell(4): 
phone.setCellValue(emp.getTelephoneO): 
Phone .setCellStyle(cellStyle): 
} 
File xlsFile = new File("E:\ 员 工 信 息 表 .xls"); 
FileOutputStream fos = new FileOutputStream(xlsFile); 
workbook .write(fos): 
fos.close0; 
return true; 
} catch (Exception e) { 
eprintStackTraceO: 
Teturn false: 


盘 ， 此 处 不 进行 详细 介绍 。 


// 创 建 Excel 工作 短 对 象 

// 在 工作 短 中 创建 工作 表 对 象 
/设置 工作 表 的 名 称 

/在 工作 表 中 创建 行 对 象 

/合并 第 1 行 的 第 1 一 第 5 个 单元 格 


/设置 水 平 居中 
/设置 垂直 居中 


/遍历 保存 数据 对 象 的 集合 
/获取 封装 数据 的 对 象 

// 创 建行 

1/ 创建 单元 格 

// 将 数据 添加 到 单元 格 中 


// 将 文档 对 象 写 入 文件 输出 流 


说 明 : 由 于 读 取 数 据 库 的 代码 比较 简单 ， 所 以 此 处 省 略 了 这 一 部 分 内 容 。 具 体 代码 可 以 查看 本 书 附 赠 的 光 
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国 秘笈 心 法 
在 实际 应 用 中 ， 根 据 需求 可 能 需要 将 数据 库 中 的 数据 导出 Excel 文件 中 ， 此 时 ， 可 以 选择 应 用 POI 组 件 来 
进行 处 理 ， 应 用 它 可 以 很 方便 地 将 数据 导出 Excel 文件 中 。 


高 级 
实用 指数 : 全 廊 食 


实例 563 


图 实例 说 明 

本 实例 将 介绍 如 何 应 用 POI 组 件 ， 读 取 Excel 文件 的 数据 并 保存 到 数据 库 。 运 行 本 实例 ， 如 图 21.33 所 示 ， 
选择 要 保存 到 数据 库 的 Excel 文件 ， 然 后 单 击 “ 保 存 到 数据 库 ” 按 钮 后 ， 该 Excel 文件 的 数据 将 被 保存 到 数据 
库 中 。 


telephone 


【 读 取 Exrel 文 件数 据 到 数据 库 ] 三 i 和 13579796464 
r 15578781578 
文件 地 址 : EE 员工 信 息 表 xls 18878963257 


图 21.33 ” 读 取 Excel 文 件 的 数据 到 数据 库 


图 关键 技术 


读 取 Excel 文件 的 数据 时 ， 首 先 需要 在 创建 工作 籍 对 象 HSSFWorkbook 时 ， 在 HSSFWorkbook 类 的 构造 方 
法 中 传 入 一 个 用 于 读 取 文件 数据 的 文件 输入 流 对 象 ， 然 后 应 用 相应 的 getXXX0 方 法 来 获取 Excel 文件 的 数据 。 

HSSFWorkbookO 是 用 于 读 取 Excel 文件 的 构造 方法 ， 其 语法 结构 如 下 : 

public HSSF Workbook(POIFSFileSystem fs) 

参数 说 明 

fs: 指定 用 于 管理 Excel 文件 的 文件 对 象 。 在 创建 读 取 Excel 文件 的 InputStream 文件 输入 流 时 ， 应 用 
POIFSFileSystem 对 象 来 对 这 个 文件 流 进行 维护 管理 。 

创建 完 读 取 文 件 的 工作 簿 对 象 HSSFWorkbook 之 后 ， 应 用 getSheetAt0 方 法 即 可 获取 Excel 文件 中 指定 的 工 
作 表 对 象 。getSheetAt0 方 法 的 语法 结构 如 下 : 

public HSSFSheet getSheetAt(int index) 

参数 说 明 

index: 指定 Excel 文件 中 工作 表 的 索引 。 索 引 值 从 0 开始， 也 就 是 第 一 个 工作 表 。 

获取 到 指定 的 工作 表 对 象 HSSFSheet 之 后 ， 应 用 其 gefEXXX( 方 法 即 可 获取 该 工作 表 中 的 数据 。 下 面 介绍 这 
些 getXXX0 方 法 。 

口 、getFirstRowNum0 方 法 

该 方法 用 于 获取 指定 工作 表 中 数据 所 在 的 首 行 行 号 。 行 号 值 从 0 开始 ， 也 就 是 说 ， 如 果 工 作 表 中 的 首 行 数 
据 在 第 3 行 ， 那 么 该 方法 返回 值 为 2。 

口 getLastRowNum() 方 法 

该 方法 用 于 获取 指定 工作 表 中 数据 所 在 的 末 行 行 号 。 行 号 值 从 0 开始 ， 也 就 是 说 ， 如 果 工 作 表 中 的 末 行 数 
据 在 第 11 行 ， 那 么 该 方法 返回 值 为 10。 

口 getRow0 方 法 

该 方法 用 于 获取 工作 表 中 的 指定 行 ， 其 语法 结构 如 下 : 


public HSSFRow getRow(int rowIndex) 
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参数 说 明 
IowIndex: 指定 行 所 在 的 索引 。 索 引 值 从 0 开始 。 


[| 说 明 : HSSFSheet 类 中 还 包含 一 些 其 他 的 getXXX( 方 法 ， 在 此 不 再 详细 介绍 。 有 具体 方法 说 明 请 参见 POI 组 
件 的 API 文 档 。 


图 设计 过 程 


(1) 创建 用 于 封装 员工 信息 的 JavaBean 类 Employee， 关 键 代码 如 下 : 
public class Employee { 
Private String name; 
Private String sex; 
Private String dept; 
Private String duty; 
Private String telephone; 
} 
(2) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 读 取 Excel 文件 数据 的 方法 readExcelFile 
ToDBO， 参 数 flePath 指 的 是 Excel 文件 的 路 径 。 在 该 方法 中 ， 读 取 Excel 文件 的 数据 ， 将 每 一 行 数据 封装 在 


Employee 对 象 中 ， 然 后 再 循环 每 一 行 ， 将 封装 好 的 每 一 行 的 Employee 对 象 添加 到 List 集合 中 ， 关 键 代码 如 下 : 


public List<Employee> readExcelFileToDB(String filePath){ 
2 list = new ArrayList<Employee>0; 
FileInputStream fis = new FileInputStream(filePath): 
POIFSFileSystem fs “= new POIFSFileSystem(fis); 
HSSFWorkbook workbook = new HSSF Workbook(fs); 
HSSFSheet sheet = workbook.getSheetAt(0); 
for(int 二 2;i<=sheet.getLastRowNumO:i++H){ 
Employee emp = new Employee(); 
HSSFRow row = sheet.getRow(i); 
HSSFCell celll = row.getCell(0): 
HSSFCell cell2 = row.getCell(1); 
HSSFCell cell3 = row.getCell(2); 
HSSFCell cell4 = row.getCell(3): 
HSSFCell cell5 = row.getCell(4): 
String name = celll.getStringCellValue(); 
emp.setName(name); 
String sex = cell2.getStringCellValue(); 
emp.setSex(sex); 
String dept = cell3.getStringCellValueO; 
emp.setDept(dept); 
String duty = cell4.getStringCellValue(); 
emp.setDuty(duty); 
String phone = cell5.getStringCellValue(); 
emp.setTelephone(phone): 
list.add(emp): 
} 


fis.closeO; 
return list: 

} catch (Exception e) { 
e.printStackTrace(); 
return null: 

} 

了 


// 创 建 Excel 工作 短 对 象 
/获取 第 1 个 工作 表 
/循环 Excel 文件 的 每 一 行 


/获取 第 i 行 


/获取 第 i 行 的 第 1 个 单元 格 的 数据 
/获取 第 i 行 的 第 2 个 单元 格 的 数据 
/获取 第 i 行 的 第 3 个 单元 格 的 数据 
/获取 第 i 行 的 第 4 个 单元 格 的 数据 
/获取 第 i 行 的 第 5 个 单元 格 的 数据 


[由 说 明 ; 由 于 将 List 集合 的 数据 添加 到 数据 库 的 方法 比较 简单 ， 所 以 此 处 省 略 了 这 一 部 分 内 容 。 具体 代码 可 
以 查看 本 书 附 赠 的 光盘 ， 此 处 不 再 进行 详细 介绍 。 


国 秘笈 心 法 


在 实际 应 用 中 ， 一 个 Excel 文件 中 可 能 包含 多 行 数据 ， 这 样 在 读 取 时 就 应 该 应 用 循环 来 实现 ， 而 关键 之 处 
就 是 确定 循环 范围 。 应 用 工作 表 对 象 HSSFSheet 的 getLastRowNum0 方 法 可 以 获取 到 最 后 一 行 的 行 号 ， 因 此 在 


循环 中 使 用 该 方法 就 可 以 限定 循环 范围 。 
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高 级 


实例 564 


实用 指数 : 去 机 


图 实例 说 明 
本 实例 将 介绍 如 何 应 用 POI 组 件 ， 对 Excel 工作 表 的 打印 属性 进行 设置 。 运 行 本 实例 ， 将 数据 导出 Excel 
文件 之 后 ， 设 置 打 印 属性 。 如 图 21.34 所 示 为 在 打印 预览 中 的 显示 效果 。 


图 21.34 设置 Excel 工作 表 打 印 属性 之 后 的 打印 预览 效果 


图 关键 技术 


应 用 POI 组 件 设置 Excel 工作 表 的 打印 属性 时 ， 需 要 用 到 HSSFWorkbook、HSSFSheet 和 HSSFPrintSetup 
这 3 个 类 中 的 方法 进行 设置 。 下 面 对 这 几 个 类 中 关于 设置 打印 属性 的 方法 进行 介绍 。 

1，HSSFWorkbook 类 

该 类 中 包含 一 个 用 于 设置 打印 区 域 的 setPrintArea0 方 法 ， 其 语法 结构 如 下 : 

public void setPrintArea(int sheetIndex,int startColumn,int endColumn.int startRow:int endRow) 

参数 说 明 

@ sheetIndex: 指定 要 设置 打印 区 域 的 工作 表 索 引 。 索 引 值 从 0 开始 。 

@ startColumn: 指定 打印 区 域 的 起 始 列 索引 。 

和 endColumn: 指定 打印 区 域 的 结束 列 索引 。 

@ startRow: 指定 打印 区 域 的 起 始 行 索引 。 

@ endRow: 指定 打印 区 域 的 结束 行 索引 。 

setPrintArea0 方 法 还 包含 一 个 重 载 方 法 ， 其 语法 结构 如 下 : 

public void setPrintArea(int sheetIndex.java.lang. String reference) 

参数 说 明 

@ sheetIndex: 指定 要 设置 打印 区 域 的 工作 表 索 引 。 索 引 值 从 0 开始 。 

@ reference: 指定 打印 区 域 的 规则 字符 串 。 该 规则 字符 串 的 写法 格式 如 $A$1:$B$2。 

2. HSSFSheet 类 


该 类 中 包含 了 一 些 用 于 设置 打印 属性 的 方法 ， 这 些 方法 的 说 明 如 表 21.3 所 示 。 


表 21.3 HSSFSheet 类 中 常用 的 设置 打印 属性 的 方法 


方 法 
setPrintGridlines(boolean newPrintGridlines, 


设置 是 否 打印 网 格 线 
设置 是 否 水 平 居中 
设置 是 否 垂直 居中 


setHorizontallyCenter(boolean Value) 


setVerticallyCenter(boolean value, 
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续 表 
方 ”法 说 明 
返回 用 于 设置 页 眉 的 HSSFHeader 对 象 。 该 对 象 中 包含 的 setLeft()、setCenter() 
ed 和 setRight0 方 法 ， 用 于 设置 左 侧 、 中 间 和 右 侧 的 页 丑 内容 
返回 用 于 设置 页 脚 的 HSSFFooter 对 象 。 该 对 象 中 包含 的 setLeft()、setCenter() 
getFooter() 


和 setRight0 方 法 ， 用 于 设置 左 侧 、 中 间 和 右 侧 的 页 脚 内 容 


3.，HSSFPrintSetup 类 
在 设置 打印 属性 时 ， 主 要 应 用 这 个 类 的 方法 ， 其 常用 方法 的 说 明 如 表 21.4 所 示 。 
表 21.4 HSSFPrintSetup 类 的 常用 方法 


方 法 说 有明 
setFitHeight(short height) 设置 页 高 
setFitWidth(short width 设置 页 宽 
setFooterMargin(double footermargin) 设置 页 脚 边 距 
setHeaderMargin(double headermargin) 设置 页 眉 边 距 


设置 打印 方向 为 横向 或 纵向 。 取 值 为 false 为 纵向 ，true 为 横向 
设置 打印 时 是 否 带 有 颜色 
设置 打印 纸 大 小 。 取 值 为 HSSFPrintSetup 类 的 静态 常量 


setLandscape(boolean ls 
setNoColor(boolean mono) 


setPaperSize(short Size 


图 设计 过 程 


(1) 创建 用 于 操作 Excel 的 工具 类 ExcelOperationUtil， 编 写 设置 打印 属性 的 setPrint0 方 法 ， 参 数 sheet 指 
的 是 要 设置 打印 属性 的 工作 表 对 象 ， 关 键 代码 如 下 : 


public HSSFSheet setPrint(HSSFSheet sheet) { 
HSSFHeader header = sheet.getHeader(); 


header.setRight(" 页 眉 "); 1/ 添加 右 侧 页 眉 
HSSFHeader.fontSize((short)8): /设置 字号 
HSSFFooter footer = sheet.getFooter(): 

HSSFFooter,fontSize((short)8); /设置 字号 
footer.setRight(" 页 肢 "); // 添 加 右 侧 页 脚 
sheet.setPrintGridlines(true): /打印 网 格 线 
HSSFPrintSetup printSet = sheet.getPrintSetup(); 

PprintSet.setFitWidth((short)2): // 设 置 页 宽 
PrintSet.setFitHeight((short)2): // 设 置 页 高 
PrintSet.setPaperSize(HSSFPrintSetup.A4_PAPERSIZE): 1/ 设置 打印 纸 大 小 
PrintSet.setHeaderMargin(5.5): /设置 页 眉 边 距 
PrintSet.setFooterMargin(5.5): /设置 页 脚 边 距 
sheet setVerticallyCenter(true): /设置 垂直 居中 
sheet.setHorizontallyCenter(true); 1/ 设置 水 平 居中 
return sheet; 


} 
(2) 在 导出 数据 的 readDataToExcelFile0 方 法 中 ， 调 用 setPrint0 方 法 设置 打印 属性 ， 关 键 代码 如 下 : 


Public boolean readDataToExcelFile(List<Employee> lisb{ 


=A HSSFWorkbook workbook = new HSSFWorkbookO: /| 创建 Excel 工作 短 对 象 
HSSFSheet sheet = workbook.createSheetO|; /在 工作 夭 中 创建 工作 表 对 象 
sheet = this.setPrint(sheet): /调用 设置 打印 属性 的 方法 ， 设 置 工作 表 的 打印 属性 
workbook.setSheetName(0, "测试 "): 1/ 设置 工 作 表 的 名 称 
HSSFRow row1 = sheet.createRow(0); /在 工作 表 中 创建 行 对 象 


sheet.addMergedRegion(new Region(0.(short)0.0.(short)4)): // 合 并 第 1 行 的 第 1 一 5 个 单元 格 
HSSFCell titleCell = rowl.createCell(0); 

titleCell.setCellValue(" 员 工 信 息 表 "); 

ee // 此 处 省 略 了 其 他 非 关键 代码 
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File xlsFile = new File("E:\ 员 工 信 息 表 .xls"): 
FileOutputStream fos = new FileOutputStream(xlsFile): 


workbook write(fos): // 将 文档 对 象 写 入 文件 输出 流 
fos.closeO: 
return true; 
} catch (Exception e) { 
eprintStackTrace0: 
return false: 
} 
} 
图 秘笈 心 法 
在 实际 应 用 中 ， 有 时 需要 在 程序 中 直接 完成 对 Excel 工作 表 的 打印 ， 那 么 在 打印 之 前 就 需要 首先 控制 工作 


表 的 打印 属性 设置 ， 然 后 再 完成 打印 。 
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打印 库存 报表 
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22.1 Web 打印 


Web 打印 是 一 种 常用 的 打印 方式 ， 其 使 用 方法 简单 、 方 便 、 快 捷 ， 用 户 在 浏览 网 页 的 同时 就 可 以 实现 打印 
的 功能 。 下 面 介绍 几 个 利用 Web 打印 的 实例 。 


力 实例 说 明 

利用 JavaScript 调用 正 自身 的 打印 功能 实现 打印 ， 这 种 方法 比较 简单 ， 也 是 常用 的 打印 方式 。 使 用 该 方法 
只 需 将 要 打印 的 页 面 设计 好 , 再 通过 JavaScript 的 window 对 象 的 print0 方 法 调用 正 的 打印 功能 即 可 。 运行 本 实 
例 ， 单 击 “ 打 印 ” 超 链接 后 会 弹出 “打印 ”对 话 框 ， 如 图 22.1 所 示 ， 然 后 进行 相应 的 设置 ， 并 进行 打印 。 
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图 22.1 利用 JavaScript 调用 正 自身 的 打印 功能 实现 打印 


图 关键 技术 
本 实例 主要 通过 调用 window 对 象 的 打印 方法 print0 来 实现 打印 功能 。window 对 象 的 print0 方 法 的 语法 格 
式 如 下 : 
window.print(; 
例如 : 
<a href="#" onClick="window.printO"> 打 印 </a> 
图 设计 过 程 
(1) 从 数据 表 中 获取 要 打印 的 数据 并 以 列表 的 形式 显示 。 
(2) 调用 window 对 象 的 打印 方法 实现 打印 功能 ， 其 关键 代码 如 下 : 
<a href="#" onClick="window.print0"> 打 印 </a> 
图 秘笈 心 法 
调用 JavaScript 的 window 对 象 的 print0 方 法 非常 简单 , 能 快速 地 实现 网 页 数据 的 打印 , 但 是 它 不 能 像 Excel 
以 及 Word 中 的 打印 功能 那样 可 以 方便 地 调整 打印 的 格式 。 因 此 ， 对 打印 格式 要 求 较 高 的 情况 ， 可 以 考虑 不 用 
这 种 打印 的 实现 方式 。 
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实例 6 
实例 56 : 实用 指数 : 但 广 食 


国 实例 说 明 

WebBrowser 是 正 内 置 的 浏览 器 控件 ， 无 须 用 户 下 载 。 它 的 优点 是 客户 端 独立 完成 打印 目标 文档 的 生成 ， 
减轻 服务 器 负荷 ， 缺 点 是 源 文档 的 分 析 操 作 复 杂 ， 并 且 要 对 源 文档 中 要 打印 的 内 容 进行 约束 。 运 行 本 实例 ， 单 
击 “ 打 印 预览 ” 超 链接 ， 即 可 打开 “打印 预览 ”对 话 框 ， 如 图 22.2 所 示 。 单 击 “ 打 印 ” 超 链接 即 可 打开 “打印 ” 
对 话 框 进行 打印 。 
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22.2 利用 WebBrowser 打印 


图 关键 技术 


本 实例 主要 应 用 正 内 置 的 WebBrowser 控件 实现 ， 该 控件 的 具体 参数 如 下 。 
口 document.all.WebBrowserExecwb(7.1D): 表示 打印 预览 。 

口 ”document.all.WebBrowserExecwb(6.D): 表示 打印 。 

口 ”document.allWebBrowserExecwb(6.6): 表示 直接 打印 。 

口 、document.all.WebBrowser.Execwb(8,1): 表示 页 面 设置 。 


图 设计 过 程 
(1) 在 页 面 中 添加 <objec 人 标签 ， 调 用 WebBrowser 控件 ， 其 关键 代码 如 下 : 


<object id=" WebBrowser" classid="CISID:8856F961-3404-11D0-496B-00C04Fd70542" width="0" height="0"> 


</object> 
(2) 建立 相关 的 “打印 ” 超 链接 ， 并 调用 WebBrowser 控件 的 相应 参数 实现 打印 预览 、 打 印 等 功能 ， 其 关 
键 代码 如 下 : 


<a hre 伍 #" onClick="document.all. WebBrowser.Execwb(7.1)"> 打 印 预览 </a> 
<a href=“#" onClick="document.all. WebBrowser Execwb(6.1)"> 打 印 </a> 


<a href=#" onClick="document all- Web] JBrowser Execwb(8,1)"> 页 面 设置 </a> 


图 秘笈 心 法 

在 HTML 中 应 用 <object> 标 签 可 以 将 外 部 ActiveX 控件 加 载 到 网 页 中 ; 应 用 <object 标 签 可 以 调用 系统 中 的 
ActiveX 控件 应 用 程序 。 其 中 classid 属性 值 是 生成 ActiveX 控件 时 的 唯一 注册 编号 。 在 网 页 中 加 入 系统 中 的 控 
件 时 ，classid 是 必须 要 添加 的 ， 根 据 此 id 才 可 以 找到 相应 的 控件 应 用 程序 。 


实 倍 : 
实例 567 ee 


图 实例 说 明 
分 组 报表 是 根据 表 中 的 某 个 条 件 在 另 一 张 表 中 查询 与 此 内 容 相关 的 一 系列 信息 , 并 将 此 类 信息 打印 成 报表 。 
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分 组 报表 在 实际 中 应 用 广泛 。 在 开发 药品 后 台 管理 系统 时 ， 通 常 要 求 以 药品 种 类 分 组 显示 药品 销售 情况 ， 在 这 
种 情况 下 ， 就 可 以 应 用 分 组 报表 打印 。 本 实例 将 以 WebBrowser 打 
印 技术 演示 分 组 报表 ， 通 过 药品 相关 信息 表 中 的 药品 编号 与 药品 销 
售 表 中 的 药品 号 相关 联 查询 数据 ， 以 达到 分 组 的 目的 。 实 例 运行 结 
果 如 图 22.3 所 示 。 


图 关键 技术 

在 JSP 页 面 中 可 以 调用 正 内 置 的 浏览 器 控件 WebBrowser， 通 
过 使 用 WebBrowser 控件 的 Execwb 方法 可 实现 打印 预览 、 打 印 、 页 
面 设 置 等 操作 。 [HT | spy | rep | 
国 设计 过 程 图 22.3 药品 销售 管理 系统 分 组 报表 打印 


(1) 首先 ， 为 了 取得 数据 表 中 的 值 ， 创 建 JavaBean， 名 称 为 Tdbb.java。 实 现 Tdbb.java 除了 需要 使 用 基本 
的 setXXXO 和 getXXX() 方 法 之 外 ， 还 需 使 用 一 个 根据 条 件 取 数 据 的 getReport0 方 法 ， 此 方法 的 参数 是 用 户 输入 
的 产地 ， 8etReportQ 方 法 的 返回 值 类 型 为 集合 Collection， 方 便 JSP 取 值 时 使 用 ， 程 序 代码 如 下 : 


public Collection 
Collection et // 实 例 化 集合 
String sql="select * from tb_yptable"; // 查 找 数据 
ConnDB conn=new ConnDBO; /1/ 创 建 数据 库 连 接 
ResultSet rs=conn.executeQuery(sql); // 执 行 查询 
{ 
while(rs.nextO){ /遍历 结果 集 
Tdbb t=new Tdbb0: /实例 化 实体 对 象 
t.setId(rs.getString(1)): 
Se // 为 对 象 赋值 属性 
ret.add(t): // 将 对 象 添加 到 集合 中 
} 
conn.close(); /关闭 数据 库 连 接 
}eatch(Exception e){ 
€.] 
} 
return ret; // 返 回 集合 


} 


(2) 取出 药品 相关 信息 表 中 的 内 容 放 入 Collection 中 ， 


Collection ret=(Collection)t.getRecordO; 


(3) 根据 药品 编号 条 件 将 两 个 表 联系 在 一 起 ， 在 SQL 语句 中 用 左 外 连接 把 两 个 表 联 系 起 来 ， 根 据 报表 编 


以 便于 显示 ， 程 序 代码 如 下 : 


号 取得 结果 集 ， 此 方法 与 getRecord0 方 法 采用 了 重 载 技 术 ， 具 体 程序 代码 如 下 : 


public Collection getRecord(String ypbh) { 
Collection ret=new ArrayList|; /实例 化 集合 
/查询 语句 


String sql="SELECT t1.ypph, tlnumber tl.dj tlje tlkhqe ,t1.ypbh FROM tb xsbbtl LEFT OUTER 
JOIN tb_yptable t2 ON t1.ypbh =t.ypid where ypbh=" 


ConnDB conn=new ConnDBO: // 闻 建 数 据 库 连 接 
ResultSet rs=conn.executeQuery(sql): /1/ 执 行 查询 
ty{ 
while(rs.nextO){ /遍历 查询 的 结果 集 
Tdbb t=new Tdbb0: /实例 化 实体 对 象 
tsetJe(rs.getString("je")): 
ek // 为 实体 对 象 的 属性 赋值 
Tet.add(f): // 将 实体 对 象 添加 到 集合 当中 
} 
conn.closeO; /关闭 数据 库 连接 
eh plier St 
} 
return ret: /返回 集合 


} 
(4) 在 JSP 中 设置 JavaScript 打印 按钮 ， 程 序 代码 如 下 : 
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<table align="center” id="pay"> 
<tr class="print™> 
2 <INPUT type="button" value=" 有 ] /i 角 "id="button1" onclick="setPrint|):"> 
<INPUT type="button" value=" 力 印 斋 身 "id="button2" onclick="previewPrint0:"> 
<INPUT type="button" value="#] W" id="button3”" onclick="window.printO:"> 
td> 
< 
</table> 
(5) 注意 <head></head> 之 间 要 放 入 JavaScript 代码 ， 程 序 代码 如 下 : 
‘<script language="Javascript"> 
function previewPrintO{ 
WB.ExecWB(7,1) 
Le setPrintO{ 
WB.ExecWB(8,1); 
eape 
(6) 注意 需 在 <body> 之 间 放 入 以 下 代码 ， 上 述 JavaScript 才 可 以 使 用 。 
<OBJECT classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" id="WB" width="0"> </OBJECT> 
国 秘笈 心 法 
在 JSP 中 使 用 迭代 函数 列 出 数据 较 其 他 方案 取 值 有 一 些 特别 ， 首 先 取出 药品 相关 信息 表 的 相关 数据 ， 并 且 
打印 在 JSP 界面 上 ， 然 后 根据 药品 票 号 取出 药品 销售 信息 表 的 相关 数据 ， 也 就 是 使 用 了 区 套 循 环 的 方式 实现 统 
计 报表 功能 。 


22.2 ”利用 Word 打印 报表 


Microsoft Office 办 公 软 件 中 的 Word 是 Microsoft 提供 的 文档 处 理 软件 ， 它 在 处 理 、 打 印 文档 及 资料 过 程 中 
所 显现 出 来 的 强大 功能 是 有 目 共 睹 的 。 本 节 将 介绍 如 何 将 网 页 中 的 数据 直接 导出 Word 中 ， 进 行 直接 打印 或 处 
理 后 再 进行 打印 。 


力 实例 说 明 


在 开发 Web 应 用 程序 时 ， 经 常会 遇 到 打印 页 面 中 的 部 分 内 容 的 情况 ， 这 时 可 以 将 这 部 分 内 容 导 出 Word， 
然后 再 打印 。 本 实例 将 介绍 如 何 将 页 面 中 的 客户 列表 导出 到 Word 并 打印 。 运 行 本 实例 ， 在 页 面 中 将 显示 客户 
信息 列表 ， 单 击 “ 打 印 ” 超 链接 后 ， 将 把 Web 页 中 的 数据 导出 Word 的 新 建文 档 中 ， 如 图 22.4 所 示 ， 并 保存 在 
Word 的 默认 文档 保存 路 径 中 ， 最 后 调用 打印 程序 打印 该 文档 。 


图 关键 技术 


本 实例 主要 应 用 JavaScript 的 ActiveXObject0 构 造 函 数 创建 一 个 OLE Automation ActiveX 对 象 的 实例 , 并 应 
用 该 实例 的 相关 方法 实现 。 

ActiveXObject0 构 造 函数 的 一 般 语 法 格式 如 下 : 

var objectVar = new ActiveXObject(class[. servemame]): 

参数 说 明 

@ objectVar: 用 于 指定 引用 对 象 的 变量 。 

@ class: 用 于 指定 应 用 程序 的 名 字 或 包含 对 象 的 库 ， 并 且 指 定 要 创建 的 对 象 类 的 类 型 。 采 用 library.object 
的 语法 格式 ， 如 Word.Application， 表 明 要 创建 的 是 Word 对 象 。 


目 servername: 可 选 参数 ， 用 于 指定 包含 对 象 的 网 络 服务 器 的 名 字 。 
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图 22.4 将 页 面 中 的 客户 列表 导出 到 Word 并 打印 


图 设计 过 程 


(1) 将 显示 客户 信息 的 表格 的 id 设置 为 customer， 因 为 要 打印 此 表 中 的 数据 ， 其 关键 代码 如 下 : 


<table id="customer" width="650" border="0" align="center" cellspacing="]1" bgcolor="#000000"> 


(2) 编写 自 定义 JavaScript 函数 outDoc0， 用 于 将 Web 页 面 中 的 客户 列表 信息 导出 Word， 并 进行 自动 打 


印 ， 其 关键 代码 如 下 : 


function outDocO{ 

var table=document.all.customer; // 获 取 表 格 对 象 
row=table.rows.length; // 获 取 表 格 的 行 数 
column=table.rows(1).cells.length; // 获 取 表格 的 列 数 
Var wdapp=new ActiveXObject("Word.Application"); /创建 Word Application 对 象 
wdapp.visible=true; /设置 Word 应 用 程序 显示 
wddoc=wdapp.Documents.AddO; /添加 新 的 文档 
thearray=new ArrayO; 
/将 页 面 中 表格 的 内 容 存放 在 数组 中 
Tor(i=0:i<row:i+H){ 

thearray[i]=new Array0O: 

forG=0:j<column:j++)f 


} 


thearray[i][j]=table.rows(i).cells(j).innerHTML: 
} 


var range = wddoc.Range(0.,0); // 创 建 第 一 行 对 象 
Tange.Text=" 客 户 信息 列表 "+"\n"; /设置 此 行 的 文字 
Tange.ParagraphFormat. Alignment=1; /设置 行文 字样 式 ， 居 中 显示 ， 默 认为 居 左 ， 如 果 值 为 2， 则 表示 居 右 
wddocRange(1.1); // 创 建 第 二 行 对 象 
wdapp.Application.Activedocument.Paragraphs.Add(range); /添加 一 个 段落 ， 内 容 为 行 Range 对 象 中 的 内 容 
wdapp.Application .Activedocument.Paragraphs.Add0: /添加 一 个 空 的 段落 
mgcurrent=wdapp.Application.Activedocument.Paragraphs(3).Range; // 获 取 第 3 段 的 Range 对 象 
var objTable=wddoc.Tables.Add(mgcurrentrow:column) /| 插入 表格 
for(i=0;i<row;iH+H){ 

for(j=0j<column:j++){ /循环 将 数组 的 值 添加 到 Word 文档 的 表格 中 

objTable.Cell(it+1j+1).Range.Text = thearray[i][j].replace("&nbsp:".""); 

; 
} 
/保存 此 Word 文档 内 容 
wdapp.Application.ActiveDocument. SaveAs("customerListdoc".0.false."".true'"".false.false.false.false false): 
wdapp.Application PrintoutO: // 调 用 Word 自动 打印 功能 
wdapp=null; 


(3) 通过 单 击 “ 打 印 ” 超 链接 调用 自 定义 JavaScript 函数 outDoc0， 其 关键 代码 如 下 : 


<a hre 伍 #" onClick="outDoc0:;"> 打 印 <a> 
国 秘笈 心 法 


当 newActiveXObjectO 对 象 的 参数 设置 为 Word.Application 时 ， 此 对 象 即 表示 一 个 Word 文档 对 象 ， 然 后 调 
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用 该 对 象 的 相应 方法 或 属性 就 可 以 操作 Word 文档 。 
图 实例 说 明 
在 开发 网 络 应 用 程序 时 ， 有 时 需要 对 输入 的 信息 按 指 定 的 格式 进行 打印 。 例 如 ， 在 办 公 自 动 化 系统 中 ， 录 
入 的 会 议 记 录 信 息 就 需要 按 指定 的 格式 打印 。 运 行 本 实例 ， 在 页 面 中 输入 相应 的 会 议 信息 ， 单 击 “Word 打印 ” 


按钮 ， 即 可 将 录入 的 会 议 信息 导出 到 指定 的 Word 文档 中 ， 并 自动 按 该 文档 指定 的 格式 打印 。 实 例 运 行 结果 如 
图 22.5 所 示 。 
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22.5 利用 Word 自动 打印 指定 格式 的 会 议 记录 


图 关键 技术 


实现 利用 Word 自动 打印 指定 格式 的 会 议 记 录 的 思路 如 下 : 

(1) 应 用 JavaScript 的 ActiveXObject0 构 造 函 数 创 建 一 个 Word Application 对 象 的 实例 。 

(2) 打开 指定 的 Word 文档 。 

(3) 通过 Word Application 对 象 的 表示 书签 的 Bookmarks 集合 的 相应 方法 将 表单 内 容 写 入 到 指定 的 Word 
文档 中 。 

(4) 调用 wdapp.Application.Printout0 方 法 实现 自动 打印 Word 文档 的 功能 。 
图 设计 过 程 

(1) 创建 一 个 Word 文档 ， 在 该 文档 中 设计 好 要 打印 的 会 议 记录 的 格式 ， 并 将 其 保存 到 实例 根 目录 下 ， 名 
称 为 meeting.doc。 

(2) 在 创建 好 的 Word 文档 中 的 指定 位 置 插入 书签 。 插 入 书签 的 方法 如 下 : 首先 选中 需要 替换 的 文本 ， 然 
后 选择 “插入 ”一 “书签 ”命令 ， 在 打开 的 对 话 框 中 输入 书签 名 ， 并 单 击 “ 添 加 ”按钮 即 可 。 

(3) 在 实例 主页 面 中 添加 用 于 收集 会 议 信息 的 表单 及 表单 元 素 ， 关 键 代码 如 下 : 


<form name="form1" method="post” action=""> 
<table width="551" height="380" border="0" align="center” cellspacing="0"> 


<tr align="center"><td height="114” colspan="2">&nbsp:</td></tr> 
<tr> 
<td width="127" height="27" align="ight 中 会 议 标 题 ，</td> 
<td width="420" align="left” ><input name="tifle”" type="text" id="title” value=" 光 于 公司 发 尾 有 所 检 税 "size="50"></td> 
</t> 
<r> 
<td width="127" height="”27" align="ight 忠 会议 时 间 : </td> 
<td align="left" ><input name—="meetingTime" type="text”" id="meetingTime”" value="2009 年 03 月 17 FH"></td> 
</t> 
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<tr> 
<td height="27"align=ight"> 主 持 人 : </td> 
<td align="left” ><input name="comipere"type="tert"id=-"compere"value=" 必 经 环 一 -td> 
<ltr> 
<tr> 
<td height="27"align=igjht"> 出 席 人 员 : </td> 
<td align="left" ><input name="attend" type="text” id="attend" valnue=" 会 捧 员 了 "size="58 才 <ltd> 
</tr> 
<tr> 
<td height="90" align="7ight” > 会议 内 容 : </td> 
<td align="left” ><textarea name="content” cols="56”" rows="5” class="wenbenkuang” id="content"> 关 于 公司 未 来 的 发 展 情况 。</textarea> 


<td> 
</t> 
<tr align="center"> 
<td height="53" colspan="2"><input name="Submit” type="button”" class="bin_grey”" onClick="outDocO" value="FWord #7 "></td> 
</t> 
</table> 
</form> 
(4) 编写 自 定义 JavaScript 函数 outDoc0， 用 于 将 表单 收集 的 数据 导出 Word， 并 进行 自动 打印 ， 其 关键 代 
码 如 下 : 
function outDocO{ 
Var wdapp=new ActiveXObject("Word.Application"); /创建 Word 文档 对 象 
wdapp.visible=true; // 显 示 此 Word 文档 对 象 
wddoc=wdapp.Documents.Open("<%=request.getRequestURLO%>meeting.doc"); /打开 指定 的 Word 文 档 
var form=document.all forml; /获取 页 面 表单 对 象 
title=form.title.value; // 获 取 表单 中 的 会 议 标题 
meetingTime=form.meetingTime.value; /1/ 获 取 表 单 中 的 会 议 时 间 
compere=form.compere.value; /获取 表单 中 的 主持 人 
attend=form.attend.value; // 获 取 表 单 中 的 出 席 人 员 
content=form.content.value; /获取 表单 中 的 会 议 内容 
Tange =wdapp.ActiveDocument.Bookmarks("title").Range; 
Tange.Text=title; i Word 
Tange =wdapp.ActiveDocument.Bookmarks("meetingTime").Rangr 
Tange. Text=meetingTime; /将 会 议 时 间 输出 到 Word 
Tange =wdapp.ActiveDocument.Bookmarks("compere").Range; 
Tange.Text=compere: /将 会 议 主持 人 输出 到 Word 
Tange =wdapp.ActiveDocument.Bookmarks("attend").Range; 
Tange. Text=attend; // 将 出 席 人 员 输 出 到 Word 
Tange =wdapp.ActiveDocument.Bookmarks("content").Range:; 
Tange. Text=content:; // 将 会 议 内 容 输 出 到 Word 
wddoc. Application. PrintoutO; /调用 Word 自动 打印 方法 
wdapp=null; 


} 
(5) 通过 单 击 “Word 打印 ”按钮 调用 自 定义 JavaScript 函数 outpoeO, 其 关键 代码 如 下 : 


<input name="Submit” type="button”" class="bin_grey” onClick="outDoc()" value="Word #7 


图 秘笈 心 法 


在 浏览 器 中 应 用 JavaScript 的 ActiveXObjectO 构 造 函数 调用 Word 文档 程序 时 ， 需 要 对 浏览 器 的 安全 级 别 进 
行 设置 ， 否 则 默认 情况 下 不 允许 访问 。 打 开 浏览 器 ， 选 择 “ 工 具 ” 一 “Internet 选项 ”命令 ， 弹 出 “Internet 选 
项 ”对 话 框 ， 选 择 “ 安 全 ”选项 卡 ， 单 击 “ 自 定义 级 别 ” 按 钮 ， 在 弹出 的 对 话 框 中 选中 “对 为 标记 为 可 安全 执 
行 脚本 的 ActiveX 控件 初始 化 并 执行 脚本 ” 复 选 框 ， 最 后 重新 启动 浏览 器 再 执行 本 实例 即 可 调用 Word 程序 。 


的 HTML 实现 打印 


图 实例 说 明 
由 于 Word 支持 HIML 格式 ， 所 以 可 以 先 在 Word 中 做 好 模板 ， 另 存 为 Web 页 面 ， 然 后 将 HTML 文件 修改 
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为 JSP 文件 进行 操作 。 在 开发 游戏 网 后 台 管 理 系统 时 ， 通 常 需 要 保留 浏览 者 注册 的 相关 信息 ， 如 图 22.6 所 示 。 
为 了 方便 后 台 管理 者 的 操作 ， 需 要 把 数据 导出 到 Word 中 进行 打印 操作 ， 在 这 种 情况 下 ， 就 可 以 使 用 Word 打印 
报表 ， 如 图 22.7 所 示 。 


"用 户 名 ， ee 
性 8 更 加 
过 码 ， > 
"确认 殖 码 : 一 
QoS 码 ， 
电话 号 友 ; Ep 
全 此 ， 
i ES ¢ 1 
图 22.6 ”游戏 网 用 户 注册 页 面 22.7 打印 Word 报表 


图 关键 技术 

本 实例 实现 的 思路 是 : 首先 需要 在 Word 中 做 好 表格 模板 并 另存 为 Web 格式 ， 然 后 将 生成 的 HIML 文件 修 
改 为 JSP 文件 ， 接 下 来 通过 自 定 义 标 签 读 取 数 据 库 中 的 数据 并 显示 在 此 JSP 中 ， 最 后 运行 此 JSP 就 会 以 Word 
形式 打开 。 在 JSP 中 ， 需 要 应 用 response 内 置 对 象 的 setContentType0 方 法 设置 响应 类 型 为 application/msword， 
其 含义 是 响应 正文 为 Word， 这 样 即 可 通过 JSP 生成 Word。 
图 设计 过 程 


(1) 首先 从 数据 库 中 取出 数据 ， 利 用 JavaBean 的 setXXX0 方 法 把 数据 存 入 List 中 ， 程 序 代 码 如 下 : 


Ppublic List ReadRecordOf 
Conn conn=new Conn(); // 创 建 数据 库 连 接 
String sql="select * from wordtest order by id"; /查找 注册 信息 
ResultSet rs=conn.executeQuery(sq]); /执行 查询 
List l=new ArrayList(); /实例 化 List 集 合 
try{ 
while(rs.nextO){ /1/ 遍 历 结果 集 
WordTest t=new WordTestO|; 
4 // 把 数据 存 入 JavaBean 中 
Ladd(D); /将 信息 放 入 List 集 合 中 
}catch(Exception e){ 
e.printStackTrace0; 
} 
return 1; /返回 集合 


} 
} 
(2) 在 Word 中 添加 表格 信息 ， 另 存 为 Web 格式 ， 文 件 名 为 test.html， 然 后 修改 为 testjsp。 当 然 ， 客 户 端 
自身 也 要 有 Word 软件 才 可 以 打开 。 保 存 后 的 JSP 部 分 程序 代码 如 下 : 


<%(0 page contentType="application/msword:charset=GBK" %> 

<%@ page import="Java.sql.*" %> 

<%@taglib uri="/WEB-INF/mytag.tld" prefix="mytag" %> 

<!DOCTYPE html PUBLIC "-WW3CWDTD HTML 4.01 Transitional//EN" “http://www.w3.org/TR/html4/loose.dtd"> 

<html xmins:0="urn:schemas-microsoft-com:office:office” 

Xmlns:w="urm:schemas-microsoft-com:office:word” 

Xmlns="http://www.wW3.org/TR/REC-html40"> 

<head> 

<meta http-equiv=Content-Type content="text/html; charset=GB2312"> 

<meta name=ProgId content=Word.Document> 

<meta name=Generator content="Microsoft Word 9"> 

<meta name=Originator content="Microsoft Word 9"> 

<link rel=File-List href="./test.files/filelist.xml"> 

<title> 用 户 名 </title> 

<!--[if gte mso 9]><xml> 

(3) 为 了 使 JSP 界面 没有 逻辑 代码 ， 在 这 里 使 用 自 定义 标签 技术 ， 创 建 一 个 displayTag.java 类 作为 自 定义 

标签 类 来 显示 内 容 。displayTagjava 类 继承 了 TagSupport 类 ， 重 写 了 doEngTag() 方 法 ， 可 以 在 displayTag.java 中 


实例 化 out 和 request 等 内 置 对 象 , 这 样 , 自 定 义 类 就 可 以 像 Servlet 一 样 把 一 些 内 容 显示 在 JSP 上 , 调用 JavaBean 
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的 ReadRecord0 方 法 ,返回 值 为 List 类 型 ,根据 JavaBean 的 getXXX0 方 法 打印 数据 库 数据 表 中 取出 的 值 ， 部 分 
程序 代码 如 下 : 


public class displayTag extends TagSupport{ 
Ppublic int doEndTag() throws JSPException{ 


JSPWriter out=pageContext.getOutO|; 
HttpServl Tequest=(EHttpServletRequest)pageCt 
WordTest w=new WordTest|; /实例 化 对 象 
List =wReadRecordO; /获取 信息 
try{ 
这 LsizeO>0&c&c'LisEmptyO){ /如 果 List 集合 不 为 空 
for(int i=0:i<l.sizeO:iH{ /遍历 List 集合 
WordTest w2=(WordTest)l.get(i); // 取 出 对 象 
out.printin("<tr>"); 


out.printin("<td width=189 valign=top style='width:142.0pt:border:none; 
border-bottom:solid windowtext .Spt:padding:0cm 5.4pt Ocm 5.4pt>"); 
ee // 写 出 循环 打印 表格 
return super.doEndTag0: 
} 
| 
(4) 若 想 在 JSP 界面 引用 自 定义 标签 ， 首 先 需要 在 WEB-INF 目录 下 创建 mytag.tld 标签 文件 ，<name> 


</name> 之 间 代 表 标 签 的 名 字 ，<tagclass></tagclass> 之 间 代 表 自 定义 标签 类 所 在 位 置 ， 关 键 代 码 如 下 : 
<tag> 
<name>display</name># 自 定义 标签 名 字 
<tagclass>com.wsy.displayTag</tagclass># 自 定义 标签 所 在 位 置 


</tag> 
(5) 在 testjsp 文件 中 加 入 如 下 程序 代码 ， 就 可 以 在 testjsp 中 引用 自 定义 标签 。 
<%@taglib uri="/WEB-INF/mytag.tid" prefix="mytag” %> <!-- 在 jsp 中 声明 自 定义 标签 -> 
(6) 在 testjsp 文件 中 需要 显示 表格 的 位 置 加 入 自 定义 标签 ， 就 可 以 正常 显示 表格 ， 程 序 代码 如 下 : 
<mytag:display/><!-- 在 jsp 页 面 中 引用 自 定义 标签 --> 
图 秘笈 心 法 
在 JSP 页 面 中 使 用 自 定义 标签 可 以 简化 JSP 页 面 代码 量 ， 使 逻辑 代码 和 前 台 代 码 充分 分 离 ， 有 助 于 页 面 的 
后 期 维护 ， 自 定义 标签 继承 了 TagSupport 类 ， 重 写 了 父 类 方法 doEndTag0， 可 以 实例 化 一 个 out，out.write() 将 
数据 输出 到 页 面 中 。 同 时 ， 需 要 在 WEB-INF 中 建立 * tld 文件 ， 这 样 可 在 JSP 中 引用 标签 文件 。 


22.3 ”利用 Excel 打印 报表 


Microsoft Excel 是 Microsoft 提供 的 用 于 办 公 管理 的 应 用 软件 ， 其 强大 的 表格 统计 功能 是 其 他 同类 型 软件 无 
法 比拟 的 。 本 节 将 介绍 如 何 将 Web 页 中 的 数据 信息 导出 到 Excel 中 并 打印 ， 以 提高 用 户 的 办 公 效 率 。 


实例 571 


图 实例 说 明 

为 了 方便 用 户 操作 ， 有 时 需要 将 页 面 中 的 数据 导出 到 Excel 中 进行 处 理 ， 并 利用 其 强大 的 打印 功能 实现 页 
面 数据 的 打印 。 下 面 将 介绍 如 何 利用 Excel 打印 工资 报表 。 运 行 本 实例 ， 首 先 在 “请 选择 要 打印 的 工资 月 份 ” 
下 拉 列 表 框 中 选择 2006-09， 单 击 “ 查 询 ” 按 钮 后 ， 在 下 面 的 表格 中 将 显示 符合 条 件 的 工资 信息 ， 然 后 单 击 “ 打 
印 ” 超 链接 ， 可 以 将 查询 结果 列表 导出 到 Excel 中 〈 用 户 可 以 对 导出 的 数据 进行 处 理 )， 最 后 通过 Excel 自身 的 
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打印 功能 实现 工资 报表 的 打印 。 程 序 运行 结果 如 图 22.8 和 图 22.9 所 示 。 


| 
NS i 有 从 [or | [Deeley 名 四 让 | -| 风声 色 给 回 引 | | 
a rE 1 F © | 
朝 号 员工 名 称 月 坊 次 全 Et 唐 贴 长 语 绩 实 发 I 次 2006-09 工 资 报表 
| 0 | a | RE 
= EE mm | mo | mmo| mo | wo | zoo wsh |2006-0: 001200 50 100 2050 
于 er09 100 | 1m0| wo to00 ED Ce 2006-09 100 1500 20 100 1520 二 
1 1 
22.8 利用 Excel 打印 工作 报表 22.9 ”导出 到 Excel 中 的 运行 结果 
本 实例 主要 是 应 用 JavaScript 的 ActiveXObiectO 构 造 函数 创建 一 个 Excel.Application 对 象 的 实例 ,具体 语法 
如 下 : 


Var excelObj = new ActiveXObject("Excel.Application"): 


应 用 Excel 对 象 excelObj 中 的 相关 方法 或 属性 即 可 操作 Excel 程序 。 首 先 需 要 应 用 excelObj 对 象 的 
Workbooks.Add() 方 法 创建 新 的 工作 短 ， 然 后 应 用 工作 短 对 象 的 ActiveSheet 属性 获取 工作 表 ， 也 可 以 应 用 


Worksheets() 方 法 创建 一 个 新 的 工作 表 。 


创建 工作 表 之 后 ， 如 果 想 向 工作 表 中 添加 内 容 ， 需 要 调用 其 Cells(0 方 法 获取 工作 表 中 的 单元 格 对 象 ，Cells0 


方法 的 语法 如 下 : 
objSheet.Cells(row.col); 


参数 说 明 


@ objSheet: 表示 一 个 工作 表 对 象 ,该 对 象 是 应 用 工作 德 对象 的 ActiveSheet 属性 或 Worksheets() 方 法 创建 的 。 
@ row: 表示 工作 表 中 单元 格 的 行 索引 。 索 引 值 从 1 开始 。 
@ col: 表示 工作 表 中 单元 格 的 列 索 引 。 索 引 值 从 1 开始 。 
创建 单元 格 之 后 , 应 用 单元 格 对 象 Value 属性 向 单元 格 中 添加 内 容 , 应 用 Font 属性 设置 单元 格 文本 的 样式 ， 


其 中 Font 属性 包含 以 下 几 个 常用 属性 。 
Size: 设置 单元 格 字体 大 小 。 


Italic: 设置 字体 为 斜体 。 

Bold: 设置 字体 为 粗 体 。 

ColorIndex: 设置 字体 颜色 ， 取 值 为 整 型 值 (如 1 
体 取 值 可 以 自己 多 做 尝试 )。 


图 设计 过 程 


OOOOO 


Name: 设置 单元 格 字体 样式 ， 如 “黑体 ”“ 楷 体 ”“ 宋 体 ” 等 。 


黑色 、2 一 白 


色 、3 一 红色 、4 一 绿色 、5 一 蓝 色 ， 具 


(1) 将 显示 客户 信息 的 表格 的 id 设置 为 pay， 因 为 要 打印 此 表格 中 的 数据 ， 其 关键 代码 如 下 : 


<table width="643" 


border="0" cellspacing="]" bgcolor="#000000"id="pay”> 


(2) 编写 自 定义 JavaScript 函数 outExcel0， 用 于 将 Web 页 面 中 的 工资 列表 信息 导出 Excel， 并 进行 自动 打 


印 ， 其 关键 代码 如 下 : 


function outExcelO{ 
var table=document.all.pay; /获取 表格 对 象 
row=table.rows.length: /获取 表格 的 行 数 
column=table rows(1).cellslength: /获取 表格 的 列 数 
var excelapp=new ActiveXObject("Excel. Application"); /创建 Excel 对 象 
excelapp.visible=true; 
objBook=excelapp.Workbooks.Add0: // 添 加 新 的 工作 短 
var objSheet = objBook.ActiveSheet: // 著 取 活动 工作 表 
title=objSheet.Range("D1").MergeArea: // 合 并 单元 格 
title.Cells(1.1).Value ="<%=title%>"; /设置 此 单元 格 文字 内 容 
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title.Cells(1,1).Font.Size =16: /设置 文字 的 大 小 
for(i=l:i<rowt Li){ 
forG=0j<column:j+H{ // 通 过 循环 向 Excel 表格 的 每 个 单元 格 中 添加 内 容 


objSheet CellsG+1j+l) value=table rows(i-1).cells(j) innerHTML replace("&nbsp:"": 
} 
} 


objBook.SaveAs("C:/payList.xls"): // 将 生成 的 Excel 自动 保存 到 指定 路 径 下 
excelapp.UserControl = true; // 自 动 打印 
} 


(3) 通过 单 击 “ 打 印 ” 超 链接 调用 自 定义 JavaScript 函数 outExcel0， 其 关键 代码 如 下 : 


<a href="#" onClick="outExcel0;"> 打 印 </a> > 
图 秘笈 心 法 


以 上 应 用 的 Excel 对 象 的 相关 方法 ， 还 可 以 实现 合并 Excel 单元 格 操作 。 可 以 调用 Excel 对 象 的 Range() 方 
法 的 MergeCells 属性 ， 在 Range() 方 法 中 需要 设置 合并 单元 格 的 起 始 位 置 和 结束 位 置 ， 例 如 ， 合 并 从 A 列 第 一 


格 到 五 列 第 6 格 的 区 域 为 一 个 单元 格 ， 需 要 使 用 以 下 代码 : 
excelObj.Range("A1:H6") MergeCells=true; 


实例 572 
实用 指数 : 信人 廊 食 


实例 说 明 


在 实际 项 目 开发 中 ， 经 常 需要 将 Web 页 面 中 的 数据 导出 Excel 并 实现 自动 打印 。 本 实例 将 介绍 如 何 将 Web 
页 面 中 的 手机 话费 列表 导出 Excel 中 并 保存 ， 同 时 实现 自动 打印 的 功能 。 运 行 本 实例 ， 在 页 面 中 将 显示 手机 话 
费 列 表 ， 单 击 “ 打 印 ” 超 链接 ， 即 可 将 手机 话费 列表 导出 到 Excel 中 ， 并 保存 到 “C:\” 路 径 下 ， 同 时 自动 调用 
打印 程序 进行 打印 。 程 序 运行 结果 如 图 22.10 所 示 。 


用 1 
上 2 2 
3 4 1 
a 20 了 
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图 22.10 将 页 面 数据 导出 到 Excel 并 自动 打印 
图 关键 技术 


本 实例 主要 通过 PrintOut0 方 法 实现 自动 打印 Excel 工作 表 中 的 内 容 的 功能 。PrintOut0 方 法 用 于 打印 指定 对 
象 ， 其 语法 格式 如 下 : 
i 


rom To, Copies, Preview ActivePrinter, PrintToFile Collate, PrToFileName) 
参数 说 明 


@ expression: 必 选 参数 。 用 于 返回 “Chart 对 象 ””“Charts 集合 对 象 ””“Range 对 象 `“Sheets 集合 对 象 ”、 
“Window 对 象 ”“Workbook 对 象 人 “Worksheet 对 象 ”或 “Worksheets 集合 对 象 ”中 的 某 个 对 象 。 

@ From: 可 选 参数 。 用 于 指定 打印 的 开始 页 号 。 如 果 省 略 该 参数 ， 将 从 起 始 位 置 开 始 打 印 。 

目 To: 可 选 参数 。 用 于 指定 打印 的 终止 页 号 。 如 果 省 略 该 参数 ， 将 打印 至 最 后 一 页 。 
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@ Copies: 可 选 参数 。 用 于 指定 要 打印 的 份 数 。 如 果 省 略 该 参数 ， 将 只 打印 一 份 。 
目 Preview: 可 选 参数 。 值 为 tme 或 false， 如 果 为 tue， 则 Microsoft Excel 在 打印 指定 对 象 之 前 先进 行 打印 
预览 。 如 果 为 false 或 者 省 略 此 参数 ， 则 立即 打印 该 对 象 。 
@ ActivePrinter: 可 选 参数 。 用 于 设置 活动 打印 机 的 名 称 。 
@ PrintToFile: 可 选 参数 。 值 为 tme 或 false, 如 果 为 true, 则 打印 输出 到 文件 。 如 果 没 有 指定 PrToFileName， 
则 Microsoft Excel 将 提示 用 户 输入 要 输出 文件 的 文件 名 。 
@ Collate: 可 选 参 数 。 当 值 为 tue 时 ， 将 逐 份 打印 每 份 副本 。 
@ PrToFileName: 可 选 参数 。 如 果 将 PrintToFile 设置 为 tue， 则 本 参数 指定 要 打印 到 的 文件 名 。 
图 设计 过 程 
(1) 将 显示 客户 信息 的 表格 的 id 设置 为 pay， 因 为 要 打印 此 表格 中 的 数据 ， 其 关键 代码 如 下 : 
<table width="643" border="0" cellspacing="1" bgcolor=H000000"id="pay"> 
(2) 编写 自 定义 JavaScript 函数 outExcel0， 用 于 将 Web 页 面 中 的 手机 话费 列表 信息 导出 到 Excel， 并 实现 
自动 打印 ， 其 关键 代码 如 下 : 


var table=document.all.pay; /获取 表格 
row=table.rows.length; /获取 表格 的 行 数 


column=table.rows(1).cells.length; /获取 表格 的 列 数 

Var excelapp=new ActiveXObject("Excel.Application"); 

excelapp.visible=true; 

objBook=excelapp.Workbooks.Add0: ”// 添 加 新 的 工作 短 

Var objSheet = objBook.ActiveSheet; 。 // 获 取 活 动工 作 表 

for(i=0:i<row:i++H){ 
for(j=0j<columnij++){ 

objSheet.Cells(i+1j+1).value=table.rows(i).cells(j).innerHTML.replace("&nbsp:",""); 

} 

} 


objBook.SaveAs("C:/payList.xls"): // 保 存 文件 
objSheet.Printout; // 自 动 打印 
excelapp.UserControl = true:; 
} 
(3) 通过 单 击 “ 打 印 ” 超 链接 调用 自 定义 JavaScript 函数 outExcel0， 其 关键 代码 如 下 : 


<a href=#" onClick="outExcel0;"> 打 印 </a> 
国 秘笈 心 法 


将 页 面 中 的 表格 数据 导出 到 Excel 表格 时 ,需要 使 用 嵌 套 for 循环 ， 逐个 找到 网 页 的 <table> 表 格 中 每 个 单元 
格 的 <td> 内 容 ， 将 其 提取 出 来 再 循环 添加 到 Excel 中 对 应 的 单元 格 中 。 


22.4 应 用 WebBrowser+CSS 套 打 邮寄 产品 单 


在 程序 中 加 入 打印 邮寄 产品 单 的 功能 ， 不 但 可 以 使 用 户 非常 方便 地 操作 程序 ， 提 高 工作 效率 ， 而 且 更 能 使 
程序 适应 人 性 化 的 需求 。 本 节 将 通过 几 个 实例 介绍 应 用 WebBrowser+CSS 套 打 邮寄 产品 单 的 方法 。 


实例 573 


国 实例 说 明 


在 开发 办 公 自 动 化 等 系统 时 ， 可 能 会 遇 到 打印 汇款 单 的 情况 ， 这 时 就 需要 在 系统 中 加 入 该 功能 。 本 实例 将 
介绍 如 何在 JSP 中 实现 打印 汇款 单 的 功能 。 运 行程 序 ， 在 页 面 中 将 显示 要 打印 的 汇款 单 及 与 打印 相关 的 超 链接 ， 
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如 图 22.11 所 示 ， 单 击 “ 打 印 ” 超 链接 可 以 打印 该 汇款 单 ， 单 击 “ 打 印 预览 ” 超 链 接 可 以 预览 打印 结果 ， 如 


图 22.12 所 示 。 


EE >| 
下 外 @ -| 加 | ~ ~ sw 共 : “| 他 像 15 习 | 副 | xc| 
HH so 
约 E 科 技 机 
四 
| 
二 
一 | 
| | 
br- i ee | 
图 22.11 打印 汇款 单 页 面 运行 结果 图 22.12 ”打印 预览 效果 


图 关键 技术 


本 实例 主要 通过 CSS 样式 的 media 类 型 属性 设置 不 打印 表格 背景 ， 以 及 调用 WebBrowser 控件 实现 汇款 单 


的 打印 。media 类 型 是 CSS 属性 媒体 类 型 ， 用 于 直接 引入 媒体 的 属性 ， 其 语法 格式 如 下 : 


@media screen | print | projection | Braille | aural | tv | handheld | all 
参数 说 明 

@ screen: 指 计算 机 屏幕 。 

@ print: 指 用 于 打印 机 的 不 透明 介质 。 

@ projection: 指 用 于 显示 的 项 目 。 

@ Braille: 盲文 系统 ， 指 有 触觉 效果 的 印刷 品 。 
@ aural: 指 语音 电子 合成 器 。 

@ tv: 电视 类 型 的 媒体 。 

@ handheld: 指 手持 式 显示 设备 。 

@ all: 用 于 所 有 媒体 。 


图 设计 过 程 


(1) 在 页 面 中 插入 一 个 表格 ， 将 该 表格 的 背景 设置 为 空 的 汇款 单 图 片 ， 并 在 表格 中 插入 新 的 表格 ， 用 于 在 


指定 位 置 显示 汇款 信息 。 
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(2) 在 页 面 的 指定 位 置 填写 汇款 信息 。 
(3) 在 页 面 的 相应 位 置 加 入 “打印 预览 ”“ 打 印 ?“ 直 接 打 印 ?“ 页 面 设置 ” 超 链接 ， 其 关键 代码 如 下 : 


<div> 
<table width="81" height="111" border="0" align="center” cellpadding="0" cellspacing="0"> 
<tr align="center" bgcolor="#FFFFFF"> 
<td colspan="3><a href=“#" onClick="documentall.WebBrowserExecwb(7.1)"> 打 印 预览 </a></td> 
<ltr> 
<tr align="center” bgcolor="#FFFFFF"> 
<td colspan="3"><a href="#" onClick="document.all. WebBrowser. Execwb(6.1)"> 打 印 </a></td> 
<tr> 
<tr align="center” bgcolor="#FFFFFF"> 
<td colspan="3"><a href="#" onClick="document.all.WebBrowser. Execwb(6.6)"> 直 接 打印 </a></td> 
<t> 
<tr align="center” bgcolor="#FFFFFF"> 
<td colspan="3"><a href=#" onClick="document.all.WebBrowser Execwb(8,1)"> 页 面 设置 </a> </td> 
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(4) 应 用 CSS 样式 设置 表格 背景 及 “打印 ”等 超 链 接 在 打印 时 不 显示 ， 其 关键 代码 如 下 : 
<styl 
a tt 
div{display:none} 
td,table{ 
background:display:none: 
本 


国 秘笈 心 法 


本 实例 在 超 链接 的 onClick 事件 中 ,是 直接 编写 的 JavaScript 代码 。 为 了 便于 维护 ， 避 免 HTML 页 面 代码 过 
于 混乱 ， 可 以 将 此 代码 编写 在 一 个 JavaScript 方法 中 ， 然 后 在 onClick 事件 中 调用 JavaScript 方法 即 可 。 


实例 


实例 说 明 

在 报社 或 电台 的 日 常 业务 中 ， 最 频繁 的 工作 就 是 给 订户 或 观众 发 信 ， 如 果 每 一 封 信 都 手工 填写 ， 不 仅 会 降 
低 工作 效率 ， 而 且 容易 出 错 。 此 时 通过 程序 控制 信封 的 打印 就 可 以 解决 该 问题 。 运 行 本 实例 ， 在 页 面 中 将 显示 
要 打印 的 信封 及 与 打印 相关 的 超 链接 ， 如 图 22.13 所 示 ， 单 击 “ 打 印 ” 超 链 接 可 以 在 信封 的 指定 位 置 打印 相关 
内 容 ， 单 击 “ 打 印 预览 ” 超 链接 可 以 预览 打印 结果 ， 如 图 22.14 所 示 。 


田 贺 四 加 四 四 
吉林 省 长 春 市 东 盛 大 街 130000 
古林 省 长 看 市 世 询 大街 
E23 
吉林 省 架 科 县 


无 语 


让 杏林 省 和 有 


图 22.13 ”打印 信封 页 面 运行 效果 图 22.14 打印 预览 效果 


图 关键 技术 

本 实例 的 实现 与 实例 573 类 似 ， 也 是 通过 CSS 样式 的 media 类 型 属性 设置 不 打印 表格 背景 ， 以 及 调用 
WebBrowser 控件 实现 信封 的 打印 。 
图 设计 过 程 

(1) 在 页 面 中 插入 一 个 表格 ， 该 表格 的 尺寸 和 一 个 标准 的 信封 大 小 相同 ， 并 在 表格 中 插入 新 的 表格 ， 用 于 
在 指定 位 置 显示 收 信人 和 发 信人 信息 。 

(2) 在 页 面 的 指定 位 置 填写 收 信人 和 发 信人 信息 。 

(3) 在 页 面 的 底部 加 入 “打印 预览 “打印 “直接 打印 ”和 “页 面 设置 ” 超 链 接 ， 其 关键 代码 如 下 : 


<div align="center”> 
<a hre 仁 只 "onClick="document.all.WebBrowser Execwb(7,1)"> 打 印 预览 </a> 
<a href="#" onClick="document.all. WebBrowser. Execwb(6.1)"> 打 印 </a> 
<a href=“#" onClick="document.all. WebBrowser. Execwb(6.6)"> 直 接 打印 </a> 
<a href="#" onClick="document.all.WebBrowser. Execwb(8,1)"> 页 面 设置 </a> 
</div> 


(4) 应 用 CSS 样式 控制 表格 背景 及 “打印 ”等 超 链 接 在 打印 时 不 显示 ， 其 关键 代码 如 下 : 
le> 
@media print{ 
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div{display:none} 
table{ 
background:display:none: 
} 
</style> 


图 秘笈 心 法 


在 JavaScript 中 ， 获 取 HTML 元素 的 对 象 可 以 通过 文档 对 象 document 的 getElementById(0 方 法 ， 也 可 以 应 
用 document.all 的 方式 。 其 中 getElementById0 方 法 的 参数 与 document.all 后 的 属性 同样 都 是 HTML 元 素 的 id。 


22.5 打印 库存 报表 


库存 管理 是 在 信息 管理 系统 中 需要 重点 处 理 的 模块 ， 而 对 于 库存 信息 的 打印 也 是 打印 技术 中 不 可 缺少 的 环 
节 。 本 节 将 介绍 如 何 通过 JSP 打印 各 种 库存 报表 。 


017s | RE 
图 实例 说 明 


在 开发 网 站 或 应 用 程序 时 ， 有 时 需要 实现 库存 明细 表 的 打印 。 这 可 以 通过 普通 的 Web 打印 实现 ， 但 是 普通 
的 Web 打印 会 把 控制 打印 的 按钮 或 者 超 链接 也 打印 出 来 , 为 了 解决 该 问题 , 就 需要 应 用 CSS 样式 对 打印 内 容 进 
行 控制 。 运行 本 实例 ， 在 页 面 的 左下 角 输 入 每 页 打印 的 记录 条 数 后 按 Enter 键 ， 然 后 单 击 “ 打 印 ” 超 链接 即 可 按 
用 户 的 设置 进行 分 页 打印 。 程 序 运行 结果 如 图 22.15 和 图 22.16 所 示 。 


[PE 划 
打印 中 | 区 | = 一 面 ww 共 2 字 曾 | 局 苞 站 om 本 | 和 由 o0 | 类 回扣 


ho 库存 着 细 表 
bo bad 
1 4 
和 和 让 在 骨 细 才 En 
篇 号 商品 名 称 产 雪 规格 计量 单位 单价 库存 区 是 
1 术 吉 他 中 国 上 海 2100 把 690.0 235 
2 电 吉 地 中 国 大 连 加 -3100 把 3000.0 Te 
3 荣 莉香 型 洗衣 粉 广东 350¢ 侈 4.0 65 
4 本 吉他 中 国 深圳 WMIOD 将 1000.0 32 
5 润 眼 渡 眼 液 山东 10n1/ 支 合 .7 14 
每 页 打印 6 | 条 记录 
图 22.15 打印 库存 明细 表 页 面 运行 效果 22.16 打印 预览 效果 


本 实例 主要 应 用 thead 标签 、tfoot 标签 、CSS 样式 的 media 类 型 和 page-break-after 属性 。 下 面 进行 详细 介绍 。 


口 thead 标签 : 用 于 设置 表格 的 表 头 。 

口 tfoot 标签 : 用 于 设置 表格 的 表 尾 。 

口 media 类 型 : 该 类 型 是 CSS 属性 媒体 类 型 ， 详 细 说 明 请 参考 实例 573。 

口 ”page-break-after 属性 : 该 属性 在 打印 文档 时 发 生 作用 ， 用 于 进行 分 页 打印 。 但 是 对 于 <br> 和 <hr> 对 象 
不 起 作用 。 

page-break-after 属性 的 语法 如 下 : 
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page-break-after: auto |always |avoid | left | right | null 
参数 说 明 
@ page-break: 打印 时 在 样式 控制 的 对 象 前 后 换 页 。 


@ after: 设置 对 象 后 出 现 页 分 割 符 。 设 置 为 always 时 ， 始 终 在 对 象 之 后 插入 页 分 割 符 。 


日 auto: 需要 在 对 象 之 后 插入 页 分 割 符 时 插入 。 
@ always: 始终 在 对 象 之 后 插入 页 分 割 符 。 
@ avoid: 未 支持 。 避 免 在 对 象 后 面 插入 分 割 符 。 


@ left: 未 支持 。 在 对 象 后 面 插入 页 分 割 符 ， 直 到 它 到 达 一 个 空白 的 左 页 边 。 


@ right: 未 支持 。 在 对 象 后 面 插入 页 分 割 符 ， 直 到 它 到 达 一 个 空 E 


@ null， 空白 字符 串 。 取 消 了 分 割 符 设置。 
图 设计 过 程 


的 右 页 边 。 


(1) 在 要 打印 的 页 面 中 添加 用 于 显示 库存 明细 信息 的 表格 ， 并 设置 好 表 头 、 表 尾 及 打印 分 页 ， 其 关键 代码 


如 下 : 
<table width="9896" border="1" id="pay" style="border-bottom-style:none;"> 
<thead style="display:table-header-group.font-weight:bold"> 
<tr> 
<td width="35" height="27" align="center" bgcolor="#efefef"> 编 号 </td> 
<td width="140"align="center" bgcolor="#efefef"> 商 品名 称 </td> 
<td width="103" align="center" bgcolor="#efefef"> 产 地 </td> 
<td width="82" align="center”" bgcolor="#efefef"> 规 格 </td> 
<td width="61" align="center" bgcolor="#efefef > 计量 单位 </td> 
<td width="75" align="center”" bgcolor="#efefef"> 单 价 </td> 
<td width="65" align="center" bgcolor="#efefef"> 库 存 数量 </td> 


/商品 编号 
; /商品 名 称 

/产地 

/规格 

// 单 位 

/| 单价 

// 库 存 数量 
String rsRow=request.getParameter("rsRow"); // 每 页 打印 的 条 数 
int intRsRow=10; /默认 每 页 打印 10 条 
if(rsRow!=null &c&c !TSRow.equals("")){ 

intRsRow=Integer.parseInt(rsRow); 

} 


ty{ 
while(rs.nextO){ 


kcsl=rs.getInt(7); 
%> 
<tr<%%if(i%intRsRow—0) {9%> style="page-break-after:aways; "<9%}%>> 
<td height="25" align="center” bgcolor= "WFFFFFF"><%=i9%></td> 
<td align="center”" bgcolor="#FFFFFF">&nbsp:<%=spname%></td> 
<td align="center” bgcolor="#FFFFFF">&nbsp:<%=cd%></td> 
<td align="center" bgcolor="#FFFFFF">&nbsp;<%=gg%></td> 
<td align="center”" bgcolor="#FFFFFF">&nbsp:<%=dw%></td> 
<td align="center”" bgcolor="#FFFFFF">&nbsp:<%=dj%></td> 
<td align="center” bgcolor="#FFFFFF">&nbsp:<%=kcsl96></td> 
</tr> 
< 
计 +; 


} 
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96> 
<tfoot style="display:table-footer-group; border:none; "><tr><td></td></tr></tfoot> 
</table> 
<% 
jeatch(Exception e){ 
; System_out println(e.getMessageO): 
%> 


(2) 控制 “打印 ” 超 链接 及 每 页 打印 记录 条 数 的 表单 ， 并 设置 CSS 样式 在 打印 时 不 显示 ， 其 关键 代码 如 下 : 
<style> 
@media print{ 
div{display:none} 
} 
</style> 
<div align="center "> 
<table width="9596" height="27" border="0" cellspacing="0" cellpaddine="0"> 
<u> 
<td width="4796 必 每 页 打印 <input name="7sRow" type="text” value="<%=intRsRow%>" size="3" onKeyDown="enter()"> 条 记录 
</td> 
<td width="5396" align="7ight"><a href="#" onClick="window.printO:;"> 打 印 </a></td> 


图 秘笈 心 法 

在 进行 Web 打印 时 , 可 以 通过 以 下 操作 控制 是 否 打印 背景 颜色 和 图 像 。 在 正 窗口 中 ,选择 “工具 ”一 “Internet 
选项 ”命令 ， 在 弹出 的 “Intemet 选项 ”对 话 框 中 打开 “高 级 ”选项 卡 ， 查 看 “设置 ”列表 中 “打印 背景 颜色 和 
图 像 ”前 面 的 复 选 框 是 否 被 选中 ， 如 果 选 中 ， 则 代表 打印 背景 颜色 和 图 像 ， 否 则 不 打印 背景 颜色 和 图 像 。 


实例 576 


图 实例 说 明 

在 开发 网 络 应 用 程序 时 ， 经 常 需要 打印 库存 盘点 报表 。 本 实例 将 介绍 如 何在 JSP 中 实现 打印 库存 盘点 报表 
的 功能 。 运行 本 实例 ， 在 页 面 的 左下 角 输 入 每 页 打印 的 记录 条 数 后 按 Enter 键 ， 然 后 单 击 “ 打 印 ” 超 链接 即 可 按 
用 户 的 设置 进行 分 页 打印 。 程 序 运行 结果 如 图 22.17 和 图 22.18 所 示 。 
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库存 盘点 表 ! 
商品 和 名称 规格 EE HP EM: 200e-10-te | 
村 EC | a rm CIEE 
[En E P3100 ' ET3 tw | wam | 把 | emo | 2 | 
茉莉 香 型 尘 农 粉 E 350e 85 z 虹 志 好 中 国 大 这 m0 把 
ET PR | mi | 下 国医 EPE fr 二 | me | | ‘| 
ET I i 和 FW | mm | | no | w 
Er 加 | 二 | sy | 国 
和 页 打印 “| 条 记录 了 了 | 
22.17 ”打印 库存 盘点 报表 预览 效果 图 22.18 打印 预览 效果 


图 关键 技术 


本 实例 主要 采用 HTML 标记 和 CSS 样式 控制 页 面 中 打印 的 内 容 ， 并 为 每 一 页 设置 表 头 、 表 尾 ， 然 后 通过 
windowprintO 语 句 实现 打印 库存 盘点 报表 的 功能 。 


图 设计 过 程 
(1) 在 要 打印 的 页 面 中 添加 用 于 显示 库存 盘点 报表 内 容 的 表格 ， 并 设置 好 表 头 、 表 尾 及 打印 分 页 ， 其 关键 
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代码 如 下 : 


<table width="9896" id-"pay" style="border-bottom-style:-none."> 
<thead style="display:table-header-group.font-weight:bold."> 
<t> 


<td width="35" height="27" align="center" bgcolor="#efefef"> 编 号 </td> 
<td width="]40"align="center”" bgcolor="#efefef"> 商 品名 称 </td> 
<td width="103" align="center” bgcolor="#efefef"> 产 地 </td> 
<td width="82" align="center" bgcolor="#efefef"> 规 格 </td> 
<td width="61” align="center" bgcolor="#efefef > 单位 </td> 
<td width="75" align="center" bgcolor="#efefef > 单价 </td> 
<td width="65" align="center" bgcolor="#efefe > 库存 数量 </td> 
<td width="65" align="center" bgcolor="#efefef > 盘点 数量 </td> 
</tr> 


ma /省 略 了 从 数据 流 表 中 获取 信息 的 代码 
<tr<%if(i%intRsRow—0){%> style="page-break-after:aways; "<%} %>> 
<td height="25" align="center" bgcolor="#FFFFFF"><%=i%></td> 
<tr> l 
<tfoot style="display:table-footer-group; border:none; "><tr><td></td></tr></tfoot> 
</table> 
(2) 控制 “打印 ” 超 链接 及 每 页 打印 记录 条 数 的 表单 ， 在 打印 时 不 显示 ， 其 关键 代码 如 下 : 
Lt 
2 i print{ 
div{display:none} 
a } 


style> 
<div align="center "><table width="9596" height="27" border="0" cellspacing="0" cellpadding="0"> 
<h> 


<td width="4796 必 每 页 打印 <input name="7sRow”" type="text” value="<%=intRsRow9%6>" size="3" onKeyDown="enter0"> 条 记录 </td> 
<td width="5396" align="yight"><a href="#" onClick="window.printO:"> 打 印 </a></td> 


图 秘笈 心 法 


在 实现 本 实例 时 ， 需 要 注意 的 是 在 打印 报表 时 ， 由 于 盘点 数量 需要 手工 输入 ， 所 以 在 打印 时 需要 留 出 相应 的 位 置 。 


实例 577 初级 


实用 指数 ; 庚 庚 友 


图 实例 说 明 

在 开发 网 络 应 用 程序 时 ， 经 常 需要 打印 库存 汇总 报表 。 本 实例 将 介绍 如 何在 JSP 中 实现 打印 库存 汇总 报表 
的 功能 。 运行 本 实例 ， 在 页 面 的 左下 角 输 入 每 页 打印 的 记录 条 数 后 按 Enter 键 ， 再 单 击 “ 打 印 ” 超 链接 即 可 按 用 
户 的 设置 分 页 打印 库存 汇总 报表 。 在 打印 时 ， 在 每 一 页 的 最 后 一 行将 打印 本 页 的 合计 金额 ， 同 时 在 最 后 一 页 还 
将 打印 库存 总 金额 。 程 序 运行 结果 如 图 22.19 和 图 22.20 所 示 。 


图 关键 技术 
实现 本 实例 ， 最 关键 的 步骤 是 计算 本 页 合计 金额 并 控制 其 显示 位 置 。 下 面 给 出 实现 该 功能 的 基本 思路 : 
(1) 计算 每 种 商品 的 库存 金额 ， 结 果 保 留 两 位 小 数 。 
(2) 通过 While 循环 累加 每 种 商品 的 库存 金额 totall。 
(3) 当 i (当前 记录 数 ) 可 以 被 “每 页 显示 的 记录 数 ”整除 ， 并 且 不 是 最 后 一 条 记录 时 ， 显 示 本 页 合计 金 
额 ， 并 将 totall 清 零 。 
(4) 显示 最 后 一 页 中 的 本 页 合计 金额 。 
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库存 汇总 表 
打印 BM : 2006-10-13 
国 商品 名 称 产地 规格 单位 单价 “| 库存 数量 | 库存 全 额 
| Er 中 国 上 海 e100 把 90.0 235 | 20915%.0 
丁 电 吉 地 中 国 大 连 | -31m | 招 | 3000 7 |230m0 
| 3 | 入 宣 和 痊 1 未 3508 四 40 5 250.0 
| 本 页 合计 全 可; 44310.0 鞠 ] 
| 、 林寺 他 中 国 深圳 lo00 下 1000.0 了 | 32000.0 
5 谭 有 最 流 CE Ta 支 | 主 87 1 [ire 
EEC 
库存 总 宇宙 :475531 EE) 
等 而 打印 “| 条 记录 
图 22.19 打印 库存 汇总 报表 页 面 运行 效果 


图 设计 过 程 
(1) 在 要 打印 的 页 面 中 添加 用 于 显示 库存 信息 的 表格 ， 并 设置 好 表 头 及 表 尾 。 
(2) 计算 本 页 合计 金额 并 控制 其 显示 的 位 置 ， 同 时 控制 打印 分 页 ， 其 关键 代码 如 下 
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<% 

1/ 计算 本 页 合计 金额 

int intRsRow=10; 

Object[] je = new Object[1]; 

String rsRow=request.getParameter("rsRow"); 

float totall=0f; 

float fje=0f; 

Ts.lastO; 

int rsTotalRow=rs.getRowO: 

Ts.firstO; 

dof 
je[0] = new Float(dj*kcsl); 
fje=Float.valueOf(String.format("%.2f", je)).floatValue(); 


| 
所 印 思 -| 局 | * 而 和 1 共 2 专辑 | 尿 隐 | 可 | 各 四 | 关 四 加 
库存 汇总 表 下 


打印 日 其 2005-10-13 加 


| 商 &2 夸 i 者 格 ”| 单位 “| 单价 | 床 存 到 旺 [ 库存 全 籁 

ES 中 国 HS | az | 把 | so | z35 | xm 

E Br | msm | 把 | 5 | 7 | san 
ET 于 EE 国 40 w | so 


直 辣 计 宇 秽 ; 443410.0 


ED 
划 
Hm Iw 共 z 一 EE 林 
所 二 | 两 品名 称 Fr 现 格 特区 单 欠 库存 数量 | 库存 全 观 国 
4 本 吉 起 中 国 深 圳 | 。 到 1000 不 1000.0 3 32000.0 
5| mmme | mw| 全 | or | w|i 
本 本 合计 金钱 : 32121 8 (元) 
Fore 
5 


图 22.20 打印 预览 效果 


/获取 记录 总 数 


<td align="7ight” height="25" colspan="3” bgcolor="#efefef"”>&nbsp: 本 页 合计 金额 ，<%=totall %>( 元 )</td> 


<td align="right” height="25" colspan="8" bgcolor="#efefef">&nbsp: 本 页 合计 金额 ，<%=totall %>( 元 )</td> 


totall=totall+fje; 
%> 
// 显 示 本 页 合计 金额 并 分 页 
<%wif(i%intRsRow—0 &&ri!=rsTotalRow){%> 
<tr style="page-break-after:always;"> 
</tr> 
<%total1=0;}%> 
<%itt; 
jwhile(rsnext0):96> 
// 显 示 最 后 一 页 中 的 本 页 合计 金额 
<t> 
<t> 
(3) 计算 库存 总 金额 并 显示 ， 其 关键 代码 如 下 : 
<% 
float total=0f: 
float fje=0f: 
dof 


je[0] = new Float(dj*kcs]): 
fje=Float. valueOf(String format("%.2f" je)) .floatValueO: 
total=total+fje; 

%> 


<tr><td align"right">&nbsp: 库 存 总 金额 ，<%=total%>( 元 )</td></tr> 
</table> 


1/ 计算 单 件 商品 的 库存 金额 
/计算 库存 总 金额 


<table width="9896" height="23" border="0" cellpadding="0" cellspacing="0"> 
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lH; 
}while(rs.nextO0):%> 
(4) 控制 “打印 ” 超 链接 及 每 页 打印 记录 条 数 的 表单 在 打印 时 不 显示 ， 其 关键 代码 如 下 : 
<style> 
@media print{ 
div{display:none} 
} 
</style> 
<div align="center "> 
<table width="9596" height="27" border="0" cellspacing="0" cellpadding="0"> 
<tr><td width="4796 必 每 页 打印 <input name="7sRow” type="fext” value="<%=-intRsRow%>”size="3”onKeyDown="enter0"> 条 记录 
<ltd> 
<td width="5396" align="right"><a href="#" onClick="window.printO:"> 打 印 </a></td> 
</tr> 
</table> 
</div> 


图 秘笈 心 法 

在 本 实例 中 ， 每 一 页 的 汇总 金额 是 通过 循环 数据 库 返回 的 结果 集 计算 出 来 的 ， 在 循环 中 会 累加 金额 信息 ， 
当当 前 记录 数 ) 可 以 被 “每 页 显示 的 记录 数 ”整除 , 并 且 不 是 最 后 一 条 记录 时 , 显示 本 页 合计 金额 ,并 将 totall 
清 夫 。 


re | 


图 实例 说 明 

在 开发 Web 应 用 程序 时 ， 经 常会 遇 到 打印 指定 条 件 的 库存 报表 的 情况 ， 这 就 需要 在 程序 中 加 入 打印 指定 条 
件 的 库存 报表 的 功能 。 运 行程 序 ， 输 入 如 图 22.21 所 示 的 条 件 ， 单 击 “ 打 印 ” 超 链接 ， 即 可 根据 条 件 打印 所 需 
的 信息 ， 如 图 22.22 所 示 。 


WO A Ba 


篇 号 商品 名 称 生产 厂家 
1 林寺 地 EL 
E EE 
L* | 本 表 必 所 器 商店 
和 TJ 条 记录 
图 22.21 在 页 面 中 输入 查询 条 件 查询 库存 报表 图 22.22 ”打印 预览 效果 
图 关键 技术 


实现 本 实例 ， 首 先 要 进行 条 件 查询 ， 并 将 查询 结果 显示 在 指定 框架 中 ， 然 后 应 用 打印 指定 框架 的 方法 实现 
打印 指定 条 件 的 库存 报表 的 功能 。 打 印 指定 框架 的 方法 的 语法 格式 如 下 

parent.mainFrame.focus:window.printO: 

参数 说 明 

mainFrame: 表示 要 打印 框架 的 名 称 。 


力 设计 过 程 
(1) 创建 indexjsp 页 ， 添 加 上 下 分 栏 的 框架 页 ， 该 框架 页 的 顶部 为 查询 条 件 页 面 topjsp， 底 部 为 显示 查询 
结果 页 面 bottomjsp， 其 关键 代码 如 下 : 


<frameset rows="80, +”" frameborder="no" border="0" framespacing="0"> 
<frame ste="topjsp” name="topFrame” scrolling="No” noresize="noresize” id="tfopFrame” /> 
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<frame src="bottomjsp" name="mainFramer id—"mainFrame" /> 
</frameset> 
<nofiames><body></body></nofiames> 
(2) 在 bottom.jsp 页 中 查询 库存 报表 信息 , 并 设置 每 页 打印 的 记录 数 和 控制 分 页 。 具体 方法 可 参见 实例 575。 
(3) 在 bottomjsp 页 中 添加 “打印 ” 超 链 接 ， 应 用 打印 指定 框架 的 方法 实现 打印 指定 条 件 的 库存 报表 的 功 
能 ， 其 关键 代码 如 下 : 


<a href=%#" onClick="parentmainFrame .focus:window:print0:"> 打 印 </a> 


国 秘笈 心 法 


在 超 链接 中 ， 调 用 父 页 面 Frame 框架 对 象 的 focus 属性 ， 含 义 是 使 框架 获得 焦点 ， 在 执行 打印 时 ， 直 接 打 
印 焦点 中 的 内 容 。 


22.6 高 级 报表 


在 实际 项 目 开 发 过 程 中 ， 有 时 需要 实现 比较 复杂 的 报表 ， 如 主 从 报表 或 分 栏 报表 。 本 节 将 通过 两 个 实例 介 
绍 如 何 应 用 访 eport+JasperReport 生成 主 从 报表 和 分 栏 报 表 。 


图 实例 说 明 


主 从 报表 又 称 为 复合 报表 ， 即 报表 本 身 又 包含 一 张 报表 ， 这 张 报表 被 称 为 第 一 张 报表 的 子 报 表 ， 实 质 上 子 
报表 也 是 一 张 真正 的 报表 ， 子 报表 也 会 在 使 用 之 前 首先 进行 编译 操作 ， 父 报表 与 子 报 表 的 关系 可 以 是 从 属 关系 
也 可 以 是 并 列 关 系 。 本 实例 将 介绍 如 何在 JSP 中 应 用 退 eporttJasperReport 生成 主 从 报表 。 运 行程 序 ， 将 显示 如 
图 22.23 所 示 的 页 面 ， 在 该 页 面 中 ， 单 击 “ 订 单 报表 ” 超 链接 ， 将 生成 保存 客户 订单 信息 的 PDF 格式 的 主 从 报 
表 ， 并 且 通 过 PDF 阅读 器 自动 打开 ， 如 图 22.24 所 示 。 


实用 指数 : 广 食 食 


于 局 订单 报表 


客户 名 称 : 张 总 号 : 客户 地 址 ， 东风 大 村 


友 户 名 除 | 可 年 叶 订单 信 息 | 单 人 | 人 ET] 


认为 首页 / 收 寄 本 站 /联系 我 们 


和 | 20 2007-01.01 


x | 5 EE 
加 2 a0 farooon 
客户 关系 管理 系统 
禾 户 地 址 : 东 盛 活 
首页 | 客户 中 心 | 订 蕴 报表 | 业 和 管理 | 客 记 查询 | WF 客户 | 姑且 中 必 从 | % 生 | 全 大 ET 
号 妊 和 1 3 3000 2007-09.09 
六 oo |oo lao 
[| | ls pk 
22.23 ”应 用 认 eporttJasperReport 生成 主 从 报表 主页 面 22.24 通过 PDF 阅读 器 打开 生成 的 主 从 报表 


图 关键 技术 


本 实例 主要 应 用 训 eport 与 JasperReport 组 件 实现 。 下 面 将 对 遂 eport 和 JasperReport 组 件 进行 详细 介绍 。 
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1.，Report 组 件 

逮 eport 是 制作 报表 工具 , 它 具有 良好 的 人 性 化 界面 ,并 拥有 高 性 能 ,使 用 该 软件 程序 员 可 以 随意 设计 报表 ， 
使 得 报表 不 再 千篇一律 ， 并 使 得 分 组 、 分 栏 统 计 变 得 非常 便捷 。 

玉 eport 是 开源 项 目 , 可 以 到 http://jasperforge.org/plugins/project/project_home.php?group_id=83 网 站 下 载 最 新 
版 本 的 记 eport。 当 前 最 新 版 本 为 3.1.4， 下 载 后 的 文件 名 称 为 Report-nb-3.1.4-windows-installer.exe， 双 击 该 文件 
即 可 安装 逊 eport。 安 装 完成 后 ， 即 可 运行 该 程序 ， 逮 eport 的 主 界面 如 图 22.25 所 示 。 

[| 国 neposte =I5Ix| 


JRepot Problens Wndow Sx Repot odpd 


22.25” ”iReport 3.1.4 的 主 界面 
2，JasperReport 组 件 
JasperReport 组 件 是 一 个 强大 的 报表 产生 工具 ， 使 用 它 可 以 将 在 退 eport 中 制作 的 报表 与 JSP 页 面相 联系 。 
JasperReport 可 以 生成 多 种 类 型 的 报表 ， 如 PDF、HTML 或 XML 等 ， 并 支持 CSV、XLS 等 格式 的 报表 。 
JasperReport 组 件 也 是 开源 项 目 ， 可 以 到 http://jasperforge.org/plugins/project/project_home.php?group_id=102 
网 站 下 载 最 新 版 本 的 JasperReport 组 件 。 当 前 最 新 版 本 为 3.1.4， 下 载 后 的 文件 名 称 为 jasperreports-3.1.4.jar。 
图 设计 过 程 
(1) 运行 迟 eport， 选择 主 菜单 中 的 “文件 ”一 New 一 Empty report 命令 ,打开 New 对 话 框 ， 在 Report name 
文本 框 中 输入 报表 名 称 zhucongReport， 在 Location 文本 框 中 输入 该 报表 文件 保存 的 路 径 ， 这 里 为 
E:\09\zhucongReport， 当 然 也 可 以 通过 单 击 Browse 按钮 选择 文件 保存 的 位 置 ， 如 图 22.26 所 示 。 
(2) 单 击 “ 完 成 ”按钮 ， 完 成 报表 文件 的 创建 。 
(3) 新 建 报表 完成 后 ， 需 要 为 该 报表 配置 相应 的 数据 源 ， 也 就 是 指定 该 报表 需要 访问 的 数据 库 。 
首先 将 所 使 用 数据 库 的 驱动 包 添 加 到 于 eport 的 Classpath 中 。 选 择 主 菜单 中 的 “工具 ”一 “选项 ”命令 ， 
在 打开 的 “选项 ”对 话 框 中 ， 选 择 认 eport 节点 下 的 Classpath 选项 卡 ， 单 击 Add JAR 按钮 ， 在 打开 的 添加 JAR 
对 话 框 中 选择 数据 库 驱 动 ， 这 里 为 SQL Server 2000 数据 库 的 驱动 包 ， 单 击 “ 打 开 ” 按 钮 ， 即 可 将 数据 库 驱 动 包 
添加 到 Classpath 下 ， 如 图 22.27 所 示 。 单 击 “确定 ” 按 钮 ， 完 成 数据 库 驱动 包 的 添加 。 


| 
DIS Op RR 奴 全 

a 由 品格 和 图 仿 

步骤 Name and location epert (0) 编辑 加】 ”于 件 和 到 F】 块 入 妾 3 里 交 ) 杂项 ol) 

1， 渤 返 模板 Tirtadliee | Goer Net | aeert tims 1 Taawergerver Beoasitay 

2. Bane end locati Cord ae el | Er 

Report Lame; EC 
ER FE oahucmartor 一 


ET Es 
有 
上 es 
上 
本 
| 
《4@ | 5» | 和 四 | Ww | 5 上 ae | EE MW | 5 生 
22.26 ”New 对 话 框 22.27 “选项 ”对 话 框 的 Classpath 选项 卡 
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然后 就 可 以 创建 数据 源 。 选 择 主 菜单 中 的 “工具 ”一 Report Datasource 命令 ,将 打开 如 图 22.28 所 示 的 


Connections/Datasources 对 话 框 。 

在 该 对 话 框 中 单 击 New 按钮 ， 将 打开 Datasource 对 话 框 ， 在 该 对 话 框 中 选中 Database JDBC Connection 节 
点 ， 单 击 Next 按钮 ， 将 打开 Database JDBC connection 对 话 框 ， 在 该 对 话 框 的 Name 文本 框 中 输入 数据 源 名 ， 
在 JDBC Driver 下 拉 列 表 框 中 选择 数据 库 驱 动 名 ， 这 里 为 MS SQL Server (2000) (com.microsoft.jdbc.sqlserver. 
SQLServerDriver)， 修 改 JDBC URL 文本 框 中 生成 的 JDBC URL， 在 Server Address 文本 框 中 输入 服务 器 地 址 ， 
这 里 为 localhost， 在 Database 文本 框 中 输入 数据 库 名 ， 这 里 为 db_database09， 在 Username 文本 框 中 输入 用 户 
名 ， 这 里 为 saa， 密码 为 空 ， 选 中 Save password 复 选 框 ， 保 存 密码 ， 如 图 22.29 所 示 。 


Database Fb_dat abase09 


22.29 ”Database JDBC connection 对 话 框 


22.28 ”Connections/Datasources 对 话 框 
单 击 Test 按钮 ， 测 试 数据 源 连接 ， 如 果 成 功 ， 将 显示 Connection test successful! 对 话 框 ， 否 则 将 显示 错误 提 
示 对 话 框 ， 读 者 可 以 根据 提示 信息 进行 修改 ， 直 到 提示 连接 成 功 。 单 击 Save 按钮 ， 保 存 该 数据 源 。 这 时 该 数据 
源 将 自动 被 选中 。 
(4) 当 数 据 源 设 置 完 成 后 ， 可 以 使 用 SQL 语句 指定 报表 中 需要 查询 的 数据 。 
在 iReport 主 界面 左 侧 的 Report Inspector 面板 中 ， 选 中 report name 节点 ， 并 在 该 节点 上 单 击 鼠 标 右键 ， 在 
弹出 的 快捷 菜单 中 选择 Edit Query 命令 , 将 打开 Report query 对 话 框 , 在 该 对 话 框 的 文本 域 中 输入 以 下 SQL 语句 : 
SELECT* FROM tb_customerInfo 


在 该 对 话 框 下 方 的 字段 表格 中 将 显示 数据 表 中 所 有 字段 的 相关 信息 ， 如 图 22.30 所 示 。 


atmatioay etriere Nialds _ tearigss | om Er 
TET TE | Discistio | 


| | 


图 22.30 Report query 对 话 框 
设置 完成 报表 查询 的 SQL 语句 ， 单 击 OK 按钮 即 可 。 这 时 ， 在 Report Inspector 面板 的 Fields 节点 中 将 显示 
该 查询 结果 中 包括 的 全 部 字段 。 
(5) 按照 步骤 (3) 的 方法 再 向 iReport 的 Classpath 中 添加 jasperreports-3.1.4.jar 和 iTextAsian.jar 包 ， 其 中 
iTextAsianjar 用 于 解决 生成 报表 不 支持 中 文 的 问题 。 
(6) 在 报表 设计 器 中 ,将 Title 区 域 .Column Header 区 域 .Column Footer 区域 和 Summary 区 域 的 Band height 
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属性 设置 为 0; 将 Page Header 区 域 的 Band height 属性 设置 为 52; 将 Detail 区 域 的 Band height 属性 设置 为 130; 
将 Page Footer 区 域 的 Band height 属性 设置 为 31。 

(7) 在 “组 件 面板 ”中 拖 动 Image 图 标 到 报表 设计 器 的 Page Header 区 域 中 ， 这 时 将 打开 选择 图 片 文件 对 
话 框 ， 这 里 先 不 选择 要 放置 的 图 片 ， 单 击 “ 取 消 ”按钮 ， 选 中 刚刚 添加 的 图 片 对 象 ， 在 属性 面板 中 将 Left 属性 
设置 为 -19、Top 属 性 设置 为 -20、width 属 性 设置 为 593、height 属 性 设置 为 71、Express Class 设置 为 javalang.String。 

(8) 为 了 使 图 片 的 路 径 在 每 次 报表 编译 时 都 被 确定 ， 可 以 将 图 片 的 路 径 设 置 为 参数 的 形式 。 在 Report 
Inspector 面板 的 Parameters 节点 上 单 击 鼠标 右键 ， 在 弹出 的 快捷 菜单 中 选择 “添加 Parameter” 命 令 ， 创 建 一 个 
参数 ， 在 属性 面板 中 ， 设 置 该 参数 的 name 属性 为 url，Parameter Class 为 java.lang.String， 其 他 采用 默认 。 参 数 
设置 完成 后 ， 还 需要 将 图 片 的 Image Expression 属性 设置 为 $P {url} 。 

(9) 按照 步骤 (7) 和 步骤 (8) 介绍 的 方法 在 Page Footer 区 域 中 添加 一 个 页 脚 图 片 。 

(10) 在 Detail 区 域 中 添加 3 个 static Text 和 3 个 Text Field， 并 设置 static Text 的 Text 属性 为 要 显示 的 文 
字 ; 设置 Text Field 的 Text Field Expression 属性 为 代表 要 显示 字段 的 表达 式 。 设 置 完成 的 效果 如 图 22.31 所 示 。 

为 了 让 报表 支持 中 文 ， 还 需要 将 这 6 个 组 件 的 Pdf Font name 属性 设置 为 STSong-Light, 将 Pdf Encoding 属 
性 设置 为 UniGB-UCS2-H (Chinese Simplified)， 如 果 要 显示 文字 为 纵向 排列 ， 则 设置 为 UniGB-UCS2-V (Chinese 
Simplified)。 

(11) 创建 子 报表 。 

选择 主 菜 单 中 的 “文件 ”一 New 一 Empty report 命令 ， 在 打开 的 New 对 话 框 的 Report name 文本 框 中 输入 报 
表 名 称 subReport， 在 Location 文本 框 中 输入 该 报表 文件 保存 的 路 径 ， 这 里 为 E:\09\zhucongReport， 当 然 也 可 以 
通过 单 击 Browse 按钮 选择 文件 保存 的 位 置 ， 单 击 “ 完 成 ”按钮 创建 一 个 空 的 报表 。 

在 该 报表 中 ， 将 Column Header 区 域 的 Band Height 属性 设置 为 31; 将 Detail 区 域 的 Band Height 属性 设置 
为 29; 其 他 区 域 的 Band Height 属性 设置 为 0。 

创建 名 称 为 custname 的 参数 ， 将 该 参数 的 Parameter Class 属性 设置 为 java.lang.String， 将 Default Value 
Expression 属性 设置 为 "， 其 他 采用 默认 ， 如 图 22.32 所 示 。 创 建 该 参数 的 目的 是 将 父 报表 的 tb_customerInfo 表 
中 的 custname 字段 的 值 作为 参数 传 入 子 报表 ， 子 报表 根据 SQL 语句 检索 tb_orderinfo 表 中 对 应 的 数据 。 


客户 名 称 : SF{custname} 客户 编号 : SF 客户 地 址 : 轩 {customadd 


22.31 放置 字段 与 字段 内 容 图 22.32 ”custname 参数 的 属性 设置 
按照 步骤 (4) 中 介绍 的 方法 指定 报表 中 需要 查询 的 数据 。 具 体 的 SQL 语句 如 下 : 
select *.num*price as zj from tb_orderinfo where custname=$P {custname} 
在 报表 设计 器 的 Column Header 和 detail 区 域 中 ， 将 字段 名 称 与 信息 放置 在 合适 的 位 置 ， 并 通过 Line 组 件 
绘制 表格 。 设 置 完成 的 效果 如 图 22.33 所 示 。 


< 全 注意 : 在 绘制 表格 或 添加 字段 信息 时 ， 不 能 有 重合 的 组 件 ， 否 则 在 生成 的 报表 中 将 不 显示 。 


至 此 ， 子 报表 已 经 设计 完成 。 选 择 主 菜 单 中 的 preview 一 PDF preview 命令 ， 设 置 预览 报表 的 格式 为 PDF， 
单 击 Preview 视图 , 预览 报表 , 这 时 壕 eport 会 弹出 提示 对 话 框 , 要 求 输入 参数 custname 的 值 , 这 里 输入 “小 兰 ” 
单 击 OK 按钮 ， 即 可 预览 该 报表 ， 如 图 22.34 所 示 。 


| 二 Pi | 可 半 号 | 可 单 信息 | 单价 | 数量 |。 凶 而 TH 同 
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22.33 ”创建 子 报表 数据 区 域 图 22.34 预览 子 报表 
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(12) 返回 到 主 报表 中 ， 在 主 报表 中 调用 子 报表 。 
将 组 件 面板 中 的 Subreport 组 件 拖 动 到 Detail 区 域 ， 这 时 将 打开 Subreport wizard 对 话 框 ， 在 该 对 话 框 中 选 

中 Use an existing report 单 选 按钮 ， 单 击 Browse 按钮 ， 选 择 创建 完成 的 子 报表 ， 如 图 22.35 所 示 。 
单 击 “ 下 一 步 ”按钮 ， 切 换 到 子 报表 向 导 第 2 步 ， 指 定 所 用 连接 ， 这 里 采用 默认 设置 ， 如 图 22.36 所 示 。 
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图 22.35 选择 子 报表 图 22.36 指定 所 用 连接 
单 击 “ 下 一 步 ” 按 钮 ， 进 入 “设置 参数 ”对 话 框 ， 在 该 对 话 框 的 列表 框 中 将 显示 参数 名 custname， 在 右 侧 
的 下 拉 列 表 框 中 选择 $F{custname}， 如 图 22.37 所 示 。 
单 击 “ 下 一 步 ” 按 钮 ， 进 入 到 设置 子 报表 路 径 的 返回 形式 ， 这 里 选择 以 参数 形式 返回 ， 如 图 22.38 所 示 。 


Pur wnaters (9 0 4) 
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图 22.37 设置 参数 对 话 框 图 22.38 设置 子 报表 路 径 的 返回 形式 


单 击 “ 完 成 ”按钮 。 这 样 在 主 报表 的 设计 视图 中 将 显示 子 报表 ， 可 以 调整 子 报表 的 显示 位 置 。 

(13) 至 此 ， 主 报表 设计 完成 ， 其 最 终 的 设计 效果 如 图 22.39 所 示 。 

(14) 预览 主 从 报表 。 选 择 主 菜单 中 的 preview 一 PDF preview 命令 ,设置 预览 报表 的 格式 为 PDF， 单 击 
Preview 视图 ， 预 览 报表 ， 这 时 认 eport 会 弹出 提示 对 话 框 ， 要 求 输入 相关 参数 的 值 ， 输 入 完成 后 ， 即 可 预览 该 报表 。 

(15) 创建 Web 项 目 ， 将 刚刚 完成 的 主 从 报表 复制 到 该 项 目的 reports 文件 夹 中 ， 如 图 22.40 所 示 。 
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图 22.39 子 报表 的 最 终 设计 效果 22.40 放置 主 从 报表 后 的 Web 项 目 文件 夹 


(16) 将 该 程序 所 需 的 jar 包 放置 到 Web 项 目的 WEB-INF\lib 文件 夹 下 。 编写 zcjsp 文件 , 在 该 文件 中 调用 
主 从 报表 ， 并 指定 相关 参数 。zcjsp 文件 的 关键 代码 如 下 : 
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<“%@® page import="net.sfjasperreports.engine. *" 96> 
<“%(@® page import="net.sfjasperreports.engine.data. *" 96> 
<“%@® page import="net.sfjasperreports.engine.export. *" 96> 
<“%@® page import="net.sfjasperreports.engine.util.*" 96> 
<“%@® page import="java.util. *" %> 
<%@ page import="java.sql. +” %> 
<“%@® page import="java.io. *" %> 
<% 
JasperReport subReport=JasperCompileManager 
.compileReport(application. getRealPath("/reports/subReportjrzml")); 
JasperReport fatherReport=JasperCompileManager 
.compileReport(application.getRealPath("/reports/zhucongReportjrxml")); 
File subreportFile = new File(application.getRealPath("/reports/subReportjasper")); 
File zcReportFile = new File(application.getRealPath("/reports/zhucongReport.jasper")); 
Map<String,Object> parameters=new HashMap<String.Object>0; 
String imgUrl=request.getRealPath("/reports/image/")+"/"; 
imgUrl=imgUrl replace(™\W","/"); 


Pparameters.put("url",imgUrlt+"pdf top.jpe”); // 指 定 页 眉 图 片 的 路 径 
parameters put("url_ brimgUrlt"pdf bottom jpeg"): // 指 定 页 脚 图 片 的 路 径 
/创建 数据 库 连接 

Connection conn=null; 

byf 


Class.forName("com.microsoftjdbc.sqlserver SQLServerDriver"); 
conn=DriverManager getConnection("jdbe:microsoft:sqlserver://localhost:1433: 
DatabaseName=db_database09","sa",""); 
}catch(Exception e) { 


e.printStackTraceO; 

1 
parameters.put("Title", "SubReport"): /设置 Title 参数 的 值 
Parameters.put("SubReportMap", conn); /设置 SubReportMap 参数 的 值 
Parameters.put("ChildReport", subReport): /设置 ChildReport 参数 的 值 
parameters.put("SUBREPORT_DIR",request.getRealPath("/reports/")+"/"); /设置 SUBREPORT _DIR 参数 的 值 
/生成 PDF 
JasperRunManager run=new JasperRunManager(); /创建 JasperRunManager 对 象 的 实例 
byte[] bytes = run.mnReportToPdf(zcReportFile.getPath(), parameters, conn); 
Tesponse.setContentType("application/pdf); /指定 报表 类 型 为 PDF 
Tesponse.setContentLength(bytes.length); /设置 内 容 长 度 
ServletOutputStream ouputStream = response.getOutputStream(); /获取 输出 流 对 象 
ouputStream write(bytes. 0, bytes.length); // 在 输出 流 中 写 入 内 容 
ouputStream flushO); 
out.clear(); 
out=pageContextpushBodyO: 
ouputStream.close(): /关闭 输出 流 对 象 

%> 

(17) 编写 ndexjsp 文件 ， 在 该 文件 中 调用 zcjsp 文件 ， 显 示 生 成 的 主 从 报表 。indexjsp 文件 的 关键 代码 


如 下 : 
<body style="margin:0px; "> 
<table width="599" border="0" align="center” cellpadding="0" cellspacing="0"> 
<t> 
<td><img src="images/main_top.jpg” width="599" height="191" border="0" usemap="#Map"></td> 
</t> 
</table> 
‘<table width="599" border="0" align="center” cellpadding="0" cellspacing="0"> 
<tr><td height="316" background="images/main_bottom.jpg">é&nbsp:</td></tr> 
</table> 
<iframe name="7eport" style="display:none”></iframe> 
<map name="Map"><area shape="rect” coords="138,168,202,188" href="zc.jsp" target="report"></map> 
<body> 


秘笈 心 法 
本 实例 在 应 用 退 eport 生成 报表 文件 时 ， 虽 然 实现 过 程 的 步骤 非常 多 ， 但 是 这 些 步 骤 并 不 难 ， 并 且 都 是 图 形 
界面 化 的 操作 。 最 后 在 JSP 页 中 ， 将 生成 的 报表 文件 利用 JasperReport 组 件 处 理 即 可 。 
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图 实例 说 明 
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高 级 | 
实用 指数 : 让 廊 让 : 


分 栏 报表 只 是 将 数据 信息 以 某 个 字段 进行 分 类 ， 然 后 以 分 栏 的 形式 进行 显示 。 分 栏 报表 是 比较 常见 的 报表 
形式 ， 它 的 最 大 优势 就 在 于 在 打印 报表 时 可 以 节约 一 定量 的 纸张 。 本 实例 将 介绍 如 何在 JSP 中 应 用 


访 eport+JasperReport 生成 分 栏 报表 。 运 行程 序 ， 将 显示 如 图 22.41 所 示 的 页 面 ， 在 该 页 面 中 ， 单 击 “ 了 


超 链接 ， 将 按 部 门生 成 保存 员工 工资 信息 的 PDF 格式 的 分 栏 报表 ， 并 且 通 过 PDF 阅读 器 自动 打开 ， 如 图 22.42 


所 示 。 


图 关键 技术 


明 目 / 代 加 资源 兽 理 系统 


欢迎 光临 界 明日 人 力 资源 管理 系统 
随 兰 宇 业 南 痢 人 力 这 沽 各 各 的 同 站 化 和 过 化 ， 人 力 站 沽 各 得 在 宇 业 各 理 
中 了 类 受到 主 业 六 是 的 于 祷 ， 人 力 演 汪 管理 系统 的 能 面 ， 扫 入 
生 ， 本 以 对 主 业 员工 的 秋 志 作息 及 工商 汪 息 浊 行 管理 ， 空 级 对 主 
业 员 工 的 务 台 得 更， 能 好 方便 忆 阳 地 草 拓 员工 的 个 人 信息 ， 工 
作 过 度 。 蝎 于 企业 上 下 实现 人 力 要 各 的 朵 晤 化 ， 世 化 和 和 
他 化 千惠。 


22.41 ”应 用 iReporttJasperReport 生成 分 栏 报表 的 主 界面 
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图 22.42 通过 PDF 阅读 器 打开 生成 的 分 栏 报表 


[ 资 管理 ” 


本 实例 主要 应 用 也 eport 与 JasperReport 组 件 实现 。 关 于 玉 eport 和 JasperReport 组 件 的 详细 介绍 可 参见 实 


例 579 的 关键 技术 。 


力 设计 过 程 


(1) 运行 RReport， 选 择 主 菜单 中 的 “文件 ”一 New 一 Empty report 命令 ,将 打开 New 对 话 框 ， 在 该 对 话 框 
的 Report name 文本 框 中 输入 报表 名 称 funlanReport， 在 Location 文本 框 中 输入 该 报表 文件 保存 的 路 径 ， 这 里 为 
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E:\09\fenlanReport， 当 然 也 可 以 通过 单 击 Browse 按钮 选择 文件 保存 的 位 置 ， 单 击 “ 完 成 ”按钮 ， 完 成 报表 文件 
的 创建 。 

(2) 新 建 报表 完成 后 ， 需 要 为 该 报表 配置 相应 的 数据 源 ， 也 就 是 指定 该 报表 需要 访问 的 数据 库 。 

首先 将 所 使 用 数据 库 的 驱动 包 添加 到 访 eport 的 Classpath 中 。 选 择 主 菜单 中 的 “工具 ”一 “选项 ”命令 ， 
在 打开 的 “选项 ”对 话 框 中 ， 选 择 访 eport 节点 下 的 Classpath 选项 卡 ， 单 击 Add JAR 按钮 ， 在 打开 的 添加 JAR 
对 话 框 中 选择 数据 库 驱动 ， 这 里 为 SQL Server 2000 数据 库 的 驱动 包 ， 单 击 “ 打 开 ” 按 钮 ， 即 可 将 数据 库 驱 动 包 
添加 到 Classpath 下 ， 如 图 22.43 所 示 。 单 击 “ 确 定 ”按钮 ， 完 成 数据 库 驱 动 包 的 添加 。 
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图 22.43 “选项 ”对 话 框 的 Classpath 选项 卡 


然后 就 可 以 创建 数据 源 。 选 择 主 菜单 中 的 “工具 ”一 Report Datasource 命令 ,将 打开 如 图 22.44 所 示 的 
Connections/Datasources 对 话 框 。 

在 该 对 话 框 中 单 击 New 按钮 ， 将 打开 Datasource 对 话 框 ， 在 该 对 话 框 中 选中 Database JDBC Connection 节 
点 ， 单 击 Next 按钮 ， 将 打开 Database JDBC connection 对 话 框 ， 在 该 对 话 框 的 Name 文本 框 中 输入 数据 源 名 
db_database09， 在 JDBC Driver 下 拉 列 表 框 中 选择 数据 库 驱 动 名 ， 这 里 为 MS SQL Server (2000) (com.microsoft. 
jdbc.sqlserverSQLServerDriveD ,修改 JDBC URL 文本 框 中 生成 的 JDBC URL 为 jdbc:microsoft:sqlserver:/Wlocalhost: 
1433;DatabaseName=db_database09， 在 Server Address 文本 框 中 输入 服务 器 地 址 ， 这 里 为 localhost， 在 Database 
文本 框 中 输入 数据 库 名 ， 这 里 为 db_database09， 在 Username 文本 框 中 输入 用 户 名 ， 这 里 为 sa， 密 码 为 空 ， 选 
中 Save password 复 选 框 ， 保 存 密码 ， 如 图 22.45 所 示 。 
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ATTENTION| Passwords sre stored in clear text. IE you dont specify 
password now, iheport will ask you for one only When required 


ED :| coc 
22.44 ”Connections/Datasources 对 话 框 22.45 Database JDBC connection 对 话 框 


单 击 Test 按钮 ， 测 试 数据 源 连 接 ， 如 果 成 功 ， 将 显示 Connection test successful! 对 话 框 ， 否 则 将 显示 错误 提 
示 对 话 框 ， 读 者 可 以 根据 提示 信息 进行 修改 ， 直 到 提示 连接 成 功 。 单 击 Save 按钮 ， 保 存 该 数据 源 。 这 时 该 数据 
源 将 自动 被 选中 。 
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(3) 当 数 据 源 设置 完成 后 , 可 以 使 用 SQL 语句 指定 报表 中 需要 查询 的 数据 .在 壕 eport 主 界面 左 侧 的 Report 
Inspector 面板 中 选中 report name 节点 , 并 在 该 节点 上 单 击 鼠 标 右键 , 在 弹出 的 快捷 菜单 中 选择 Edit Query 命令 ， 
将 打开 Report query 对 话 框 ， 在 该 对 话 框 的 文本 域 中 输入 以 下 SQL 语句 : 

select + from tb_personnelWage WHERE id <=$P {MaxOrderID} order by bm.ffTime desc 
在 该 对 话 框 下 方 的 字段 表格 中 将 显示 数据 表 中 所 有 字段 的 相关 信息 ， 如 图 22.46 所 示 。 
设置 完成 报表 查询 的 SQL 语句 ， 单 击 OK 按钮 即 可 。 这 时 ， 在 Report Inspector 面板 的 Fields 节点 中 将 显示 
该 查询 结果 中 包括 的 全 部 字段 。 
(4) 创建 参数 用 于 表示 报表 显示 的 行 数 ， 将 其 命名 为 MaxOrderID， 其 具体 属性 设置 如 图 22.47 所 示 。 
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22.46 ”Report query 对 话 框 图 22.47 创建 MaxOrderID 参数 


(5) 按照 步骤 (2) 介绍 的 方法 再 向 退 eport 的 Classpath 中 添加 jasperreports-3.1.4.jar 和 iTextAsian.jar 包 ， 
其 中 iTextAsian.jar 用 于 解决 生成 报表 不 支持 中 文 的 问题 。 如 果 这 两 个 包 已 经 添加 到 iReport 的 Classpath 中 ， 此 
步骤 可 省 略 。 

(6) 创建 参数 用 于 表示 报表 标题 , 将 其 命名 为 reportTitle, 并 设置 其 Parameter Class 属性 为 java.lang.String， 
其 他 采用 默认 。 将 该 参数 拖 动 到 Page Header 区 域 中 ， 并 设置 Page Header 区 域 的 Band Height 属性 为 50。 

(7) 为 报表 设计 分 栏 效 果 。 在 Report Inspector 面板 中 ， 选 中 报表 名 称 节点 ， 这 里 将 其 设置 为 ftnlan， 在 属 
性 面板 中 ， 将 Columns 区 域 的 Columns 属性 设置 为 3， 表示 该 报表 分 为 3 栏 。 

(8) 在 Report Inspector 面板 中 , 选中 报表 名 称 节点 , 并 单 击 鼠 标 右键 ,在 弹出 的 快捷 菜单 中 选择 Add Report 
Group 命令 ,将 打开 New group wizard 对话 框 , 在 Group name 文本 框 中 输入 分 组 名 bm; 选中 Group by the following 
report object 单 选 按钮 ， 在 其 下 方 的 下 拉 列 表 框 中 选择 要 进行 分 组 的 字段 ， 这 里 为 部 门 字段 bm， 其 他 采用 默认 ， 
如 图 22.48 所 示 。 

(9) 单 击 “ 下 一 步 ”按钮 ， 将 打开 新 建 分 组 的 详细 对 话 框 ， 在 该 页 面 采用 默认 设置 ， 如 图 22.49 所 示 。 
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(10) 单 击 “完成 ”按钮 ， 完 成 新 建 分 组 ， 这 时 ， 在 Report Inspector 面板 中 将 添加 bm Group Header 和 bm 
Group Footer 两 个 节点 。 此 时 ， 还 需要 将 这 两 个 节点 的 Start on a new page 属性 设置 为 选中 状态 。 

(11) 在 Report Inspector 面板 中 ， 将 报表 名 称 节点 fenlan 的 Pring order 属性 设置 为 Horizontal。 

(12) 在 报表 设计 器 的 bm Group Header 区 域 中 添加 一 个 static Text 组 件 ， 并 设置 该 组 件 的 Text 属性 为 “部 
门 ” 然后 再 添加 一 个 Text Field 组 件 ， 并 设置 该 组 件 的 Text Field Expression 属性 为 表示 部 门 的 表达 式 $F {bm}。 

(13) 在 报表 设计 器 的 Detail 区 域 中 ， 将 字段 名 称 与 信息 放置 在 合适 的 位 置 ， 设 计 完成 的 效果 如 图 22.50 
所 示 。 

(14) 添加 一 个 用 于 指定 公司 名 称 的 参数 company， 并 将 该 参数 的 Parameter Class 属性 设置 为 javalang.String。 

(15) 在 报表 设计 器 的 Page Footer 区 域 中 添加 一 个 Text Field， 并 设置 该 组 件 的 Text Field Expression 属性 
为 参数 表达 式 $P{company}。 为 了 让 该 公司 名 称 显示 到 页 面 的 右 侧 ， 还 需要 设置 该 组 件 的 Horizontal Alignment 
属性 为 Right。 至 此 ， 分 栏 报表 设计 完成 。 

(16) 预览 分 栏 报表 。 选 择 主 菜单 中 的 preview 一 PDF preview 命令 ， 设 置 预览 报表 的 格式 为 PDF， 单 击 
Preview 视图 ， 预 览 报表 ， 这 时 了 迟 eport 会 弹出 提示 对 话 框 ， 要 求 输入 相关 参数 的 值 ， 输 入 完成 后 ， 即 可 预览 该 
报表 。 

(17) 创建 Web 项 目 ， 将 刚刚 完成 的 分 栏 报表 复制 到 该 项 目的 reports 文件 夹 中 ， 如 图 22.51 所 示 。 
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(18) 将 该 程序 所 需 的 jar 包 放 置 到 Web 项 目的 WEB-INFNlib 文件 夹 下 。 编 写 fljsp 文件 ， 在 该 文件 中 调用 


分 栏 报 表 ， 并 指定 相关 参数 。fljsp 文件 的 关键 代码 如 下 : 
<“%@ page import="net.sfjasperreports.engine. *" %> 
<%@ page import="net.sfjasperreports.engine.data. *" %> 
<“%@ page import="net.sfjasperreports.engine.export. +" %> 
<“%@ page import="net.sfjasperreports.engine.util.*" %> 
<%(@0 page import="java.util. *" %> 
<%@ page import="java.sql.*" %> 
<“%@ page import="java.io. *" %> 
<% 


JasperReport fatherReport=JasperCompileManager.compileReport(application.getRealPath("/reports/fenlanReport.jrxml")): 
File flReportFile = new File(application. getRealPath("/reports/fenlanReport.jasper")): 

Map<String.Object> parameters=new HashMap<String,Object>(); 

// 创 建 数据 库 连 接 

Connection conn=null: 


{ 
Class.forName("com.microsoft.jdbc.sqlserver. SQLServerDriver"): 
conn=DriverManager.getConnection("jdbc:microsoft:sqlserver://localhost:1433:DatabaseName=db_database22"."sa".""): 


jcatch(Exception of{ 
eprintStackTraceO: 
} 
int maxOrderId=10; 
parameters.put("reportTitle", "工资 报表 "); // 指 定 报表 名 称 参数 值 
parameters.put("company"." 吉 林 省 明日 科技 有 限 公司 "); // 指 定 公司 名 称 参数 值 
parameters.put("MaxOrderID".maxOrderId): /1/ 指 定 最 大 记录 数 参数 值 
/生成 PDF 
JasperRunManager run—new JasperRunManager0: // 创 建 JasperRunManager 对 象 的 实例 
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bytel] bytes= manrunReportToPdffIReportFile getPathO. parameters. conn): 


Tesponse.setContentType("application/pdf"); /指定 报表 类 型 为 PDF 
Tesponse.setContentLength(bytes.length): /设置 内 容 长 度 
ServletOutputStream ouputStream = response.getOutputStream0; /获取 输出 流 对 象 
ouputStream write(bytes. 0, bytes.length): // 在 输出 流 中 写 入 内 容 
ouputStream flush(); 
outclear0: 
out=pageContext.pushBodyO; 
ouputStream.close(); // 关 闭 输出 流 对 象 

%> 
图 秘笈 心 法 


利用 iReport 工具 生成 报表 文件 之 后 ， 在 JSP 页 中 主要 应 用 JasperReport 组 件 ， 将 报表 文件 中 的 .jasper 文件 
转换 为 字 节 数组 ,然后 通过 Response 对 象 设置 相应 正文 类 型 为 application/pdf, 并 输出 表示 报表 的 字 节 流 。 当 访 
问 该 JSP 页 面 时 ， 会 直接 以 PDF 格式 显示 此 报表 信息 。 
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23.1 在 线 投 票 系统 


在 线 投票 可 以 方便 更 多 用 户 参 与 网 上 活动 ， 同 时 真正 调动 广大 网 民 参 与 的 积极 性 。 下 面 将 通过 几 个 实例 介 
绍 如 何 制作 网 上 投票 系统 。 


实例 581 国人 
实用 指数 : 依依 食 


图 实例 说 明 
在 开发 Web 程序 时 ， 经 常 需要 实现 一 些 投票 功能 。 有 些 用 户 在 使 用 时 为 了 某 种 特殊 的 需求 会 恶意 地 投票 ， 
这 样 会 严重 影响 投票 结果 的 准确 性 。 为 了 防止 这 种 情况 的 发 生 ， 就 要 在 程序 中 进行 控制 ， 让 一 个 用 户 只 能 进行 
-次 投票 。 运 行 本 实例 ， 如 图 23.1 所 示 ， 没 有 投 过 票 的 用 户 第 一 次 可 以 正常 进行 投票 。 当 用 户 退 回 到 投票 页 面 

想 再 次 进行 投票 时 便 会 出 现 提示 ， 如 图 23.2 所 示 。 
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图 关键 技术 
在 实现 本 实例 时 主要 用 到 了 用 户 会 话 对 象 session。 该 对 象 为 JSP 内 置 对 象 ，Web 服务 器 会 为 每 个 用 户 创建 
-个 单独 的 session 对 象 ， 在 本 实例 中 把 用 户 投票 结果 保存 在 该 对 象 的 属性 中 ,在 用 户 投票 时 通过 该 属性 就 可 以 
判断 出 用 户 是 否 已 经 投 过 票 了 。 
图 设计 过 程 
(1) 创建 JDBConnection ,java 类 文件 ， 作 用 是 取得 对 数据 库 的 操作 ， 读 者 可 参考 光盘 中 的 源 程序 。 
(2) 创建 resultjsp 页 面 文件 ， 用 来 处 理 用 户 的 投票 操作 ， 关 键 代 码 如 下 : 


<jsp:useBean id="connection" scope="request" class="com.dao.JDBConnection'" /> 


<% 
String id = request.getParameter("id"): /获取 用 户 选择 的 内 容 
if(id—=nul) { /如 果 用 户 没有 选择 
Tesponse.sendRedirect("index.jsp"): /1/ 返 回首 页 面 
} else { 
String sql = "update tb_voteOneTime set number=number+1 where id=" +id+ "":// 生 成 SQL 语句 
connection.executeUpdate(sql); // 调 用 执行 SQL 语句 的 方法 
connection.closeConnection(); /1/ 关 闭 数据 库 连 接 
session.setAttribute("id",id); // 将 用 户 选择 的 内 容 存 入 session 对 象 
response.sendRedirect("showjsp"): /处 转 到 显示 结果 页 面 
上 
%> 


(3) 创建 showjsp 页 面 文件 ， 用 于 显示 投票 结果 ， 关 键 代码 如 下 : 
<jspuseBean id="connection" scope="request" class="com.dao.JDBConnection"/> 
<table width="373" height="37" cellpadding="0" cellspacing="0"> 

<t> 


<td background="image/vote_info.gif">&nbsp:</td> 
< 
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</table> 
<table width="373" height="57" cellpadding="0" cellspacing="0"> 
<tr align="center"> 
<td width="122" height="33"><div align="left"> 序 号 </div></td> 
<td width="138"><div align="center"> 投 票 百 分 比 </div></td> 
<td width="121"><div align="center"> 投 票 人 数 </div></td> 


</tr> 
<% 
String selectNumber="select sum(numiber) as number from tb_voteOneTime"; // 生 成 计算 总 投票 人 数 的 SQL 语句 
ResultSet ret=connection.executeQuery(selectNumber); /| 执行 SQL 语句 ， 获 取 结 果 集 
String strNumber=""; /声明 用 于 保存 投票 人 数 的 变量 
while(ret.nextO){ 
strNumber=ret.getString("number"): /获取 总 投票 人 数 
} 
ResultSet rs=connection.executeQuery("select * from tb_voteOneTime order by id"); /查询 数据 表 
while(rs.nextO){ 
float singleNumber=Float parseFloat(rs.getString("number")): // 当 前 项 的 票数 
float allNumber=Float.valueOf(strNumber); // 总 投票 人 数 
float result=singleNumber/alINumber* 100; 1/ 计算 出 百分比 
%> 
<tr align="center"> 
<td height="20"><div align="left"><%=rs.getString("id")%>.<%=rs.getString("name")%></div></td> 
<td><%=result96>%</td> 
<td><%=rs.getString(“number")%></td> 
<ltr> 
<% 
connection.closeConnection(); 
%> 
</table> 


<table width="373" height="24" cellpadding="0" cellspacing="0"> 
<t> 
<td> 共 有 [<%=strNumber%6>] 人 参加 投票 </td> 


<t> 
</table> 


图 秘笈 心 法 
本 实例 主要 利用 session 对 象 实现 ， 如 果 同 一 时 刻 有 多 个 客户 与 服务 器 在 进行 会 话 ， 那 么 在 Servlet 容器 中 
会 存在 多 个 HttpSession 对 象 。 针 对 这 一 特点 ， 可 以 利用 session 来 实现 在 线 投票 系统 ， 还 可 以 实现 购物 车 。 


实例 582 只 能 投票 一 次 的 投票 系统 初级 
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图 实例 说 明 

很 多 网 站 的 开发 者 都 想 了 解 浏览 者 对 该 网 站 的 一 些 看 法 和 意见 ， 这 个 功能 可 以 通过 用 户 投 票 来 实现 。 本 实 
例 是 一 个 对 编程 语言 使 用 率 的 调查 。 运 行 本 实例 ， 如 图 23.3 所 示 ， 选 择 所 使 用 的 一 种 编程 语言 后 ， 单 击 “ 我 要 
投票 ”按钮 进行 网 络 投票 。 单 击 “ 投 票 结果 ”按钮 即 可 查看 网 上 投票 情况 。 当 客户 端 已 经 投 过 票 后， 再 次 单 击 
“我 要 投票 ”按钮 时 将 弹出 提示 信息 ， 如 图 23.4 所 示 。 
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图 关键 技术 


本 实例 主要 应 用 Cookie 实现 一 个 人 P 地 址 每 月 只 能 投 一 次 票 的 功能 。 通 过 request.getRemoteHost0 方 法 取得 客 
户 端的 瑟 地址 后 ， 将 其 存放 在 Cookie 对 象 中 ， 并 且 通 过 cookie.setMaxAge (60*60*24*30) 方 法 设置 存储 的 时 间 。 


图 设计 过 程 
(1) 创建 JDBConnection java 类 文件 ， 作 用 是 取得 对 数据 库 的 操作 ， 读 者 可 参考 光盘 中 的 源 程序 。 
(2) 实现 投票 处 理 的 关键 代码 如 下 : 
<% 


String IP = request.getRemoteHostO; // 获 得 当前 客户 端的 下 地址 
Cookie[] cookies =request.getCookies0; 。 // 取 得 客户 端 Cookie 
boolean flag = true; 
for (inti= 0; i < cookies length: i++) { 
if (IP.equals(cookies[i].getValueO0)) { 
flag = false; // 如 果 当 前 他 与 存放 在 Cookie 对 象 中 的 耳 一 致 ， 则 将 对 象 flag 设置 为 false 
} 
if(flag){ // 和 如 果 不 一 致 ， 新 建 一 个 Cookie 
String id = request.getParameter("id"); /获取 用 户 选 择 的 内 容 编号 
String sqlVote = "update tb_VoteIP set number=number+1 where id=" + id + ""; /生成 SQL 语句 


connection.executeUpdate(sqlVote); /| 执行 SQL 语句 

connection.closeConnection(); /关闭 数据 库 连接 

Cookie cookie = new Cookie("IP", IP); /声明 Cookie 对 象 

cookie.setMaxAge(60*60*24*30); // 设 置 保存 Cookie 的 时 间 

Tesponse.addCookie(cookie); /添加 Cookie 对 象 

Tesponse.sendRedirect("show.jsp"); /| 转 到 显示 结果 页 面 

Jelse{ // 如 果 一 致 ， 提 示 用 户 已 经 投 过 票 了 

outprint("<script language=javascript>alert(' 同 一 台电 脑 使 用 同一 人 P 地 址 每 月 只 能 投 一 次 票 );window.location.href='index.jsp';</script>"); 

国 秘笈 心 法 


本 实例 主要 利用 Cookie 技术 实现 。 在 实现 本 实例 时 ， 首 先 获取 到 当前 客户 端的 瑟 地 址 ， 然 后 再 与 Cookie 
中 保存 的 下 进行 比较 ， 如 果 相同 ， 则 提示 已 经 投 过 票 了 ， 否 则 将 当前 客户 端的 他 存放 在 Cookie 中 。 


23.2 用 户 注 册 


如 果 要 提高 网 站 的 安全 性 ， 防 止 非法 用 户 进入 网 站 ， 可 在 用 户 进入 网 站 前 先进 行 注册 ， 只 有 注册 成 功 的 用 
户 才 可 以 进入 网 站 。 下 面 将 通过 几 个 实例 介绍 如 何 设计 用 户 注册 。 


实例 583 


力 实例 说 明 

在 开发 用 户 注册 模块 时 ， 用 户 名 是 用 来 标识 用 户 身份 的 ， 所 以 在 数据 库 中 要 确保 用 户 注册 的 用 户 名 是 唯一 
的 。 用 户 可 以 在 输入 完 用 户 名 后 ， 对 自己 输入 的 名 称 进行 检测 。 运 行 本 实例 ， 在 “用 户 名 ”文本 框 中 输入 用 户 
名 ， 单 击 “检测 用 户 ” 超 链接 对 输入 的 用 户 名 进行 检测 ， 判 断 该 用 户 名 是 否 已 经 存在 。 如 果 已 经 存在 ， 则 提示 
用 户 重新 输入 用 户 名 ， 和 否则 用 户 可 以 进行 其 他 相关 信息 的 注册 ， 程 序 运 行 界面 如 图 23.5 所 示 。 


Java Web 开发 实例 大 全 (基础 卷 ) 
OQ na 


*[ 恰 测 用 户 ] ”次 可 以 使 用 此 二 户 各 
*[ 由 6-20 位 内 的 于 母 和 于 于 想 成 》 


*#[ 加 : 1960/07/17 或 1980-07-17) 


ee 到 
图 23.5 ” 带 检测 用 户 名 的 用 户 注册 


图 关键 技术 


实现 本 实例 的 设计 思路 是 ， 在 “用 户 名 ”文本 框 中 输入 要 注册 的 用 户 名 ， 单 击 “ 检 测 用 户 ” 超 链接 ， 链 接 到 
checkjsp 页 面 中 检测 用 户 名 是 否 存 在 ， 并 且 把 检测 结果 传递 到 首页 面 中 ， 在 “检测 用 户 ” 超 链接 后 面 显示 出 来 。 
图 设计 过 程 

(1) 单 击 “检测 用 户 ” 超 连 链 将 调用 JavaScript 脚本 ， 关 键 代码 如 下 : 

<script language="javascript" type=""> 

function openwinO{ 

if (forml.account.value—""){ 


alert(" 请 输入 用 户 名 !"); 
Teturn false; 


} 
Var str="check.jsp?account="+form1.account.value; 
window.location.href=str; 
} 
</script> 
+[<a href="#" onClick="openwin0"> 检 测 用 户 </a>] 

(2) 判断 注册 的 用 户 名 是 否 已 经 存在 的 关键 代码 如 下 : 
<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/> 
<% 

Tequest.setCharacterEncoding("GBK"); 

String account=request.getParameter("account"); 
String sql="select * from tb_checkUpName where account="+account+™™"; 
ResultSet rs=connection.executeQuery(sql); 
boolean flag=true; 

String result=" 您 可 以 使 用 此 用 户 名 "; 

try{ 

while(rs.nextO){ 

flag=false; 

result=" 访 用 户 名 已 经 被 使 用 "; 

} 

jcatch(Exception e){} 
connection.closeConnection(O; 

这 flag){ 

%> 


<script language="javascript" type=">window.location href-index jsp?account—<%=account96>&result—<9%=result96>"</script> 
<%}else{%> 
<script language—"javascript" type="">window.location href-—"index.jsp?result—<%=result96>"</script> 
<%}%> 
(3) 将 新 注册 的 用 户 信息 添加 到 指定 的 数据 表 中 的 关键 代码 如 下 : 
<jsp:useBean id="connection" scope="request" class="com JDBConnection"/> 
<% 
Tequest.setCharacterEncoding("GBK"); /1/ 设 置 字符 集 
String account = request.getParameter("account"); /获取 表单 中 的 信息 
String password = request.getParameter("password1"); 


String sql = "insert into tb, a "+knowledge + "," + 
address + ™," + post + ™," +tel + ™," + email + ")"; /生成 SQL 语句 
String success 一 "": 
if (connection.executeUpdate(sqD)) { // 执 行 SQL 语句 ， 并 判断 是 否 执行 成 功 
success= "用 户 注册 成 功 "; 
Jelse { 
success = "用户 注 册 失 败 "; 
}%> 
‘<script language="javascript" type="">window.location href="index.jsp?success—<%=success90>"</script> 


图 秘笈 心 法 
需要 注意 的 是 ， 在 tb_checkUpName 表 中 ， 把 account 字段 设置 为 主键 ， 当 新 用 户 注册 时 ， 主 键 值 不 能 有 重 
复 的 ， 输 入 相同 的 用 户 名 时 ， 对 数据 表 添 加 的 操作 会 失败 。 
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国 实例 说 明 


用 户 注册 的 形式 有 很 多 种 ， 本 实例 实现 了 用 户 的 分 步 注 册 功能 。 用 户 的 分 步 注册 可 以 让 用 户 更 清楚 地 知道 
用 户 具有 哪些 权限 或 哪些 特殊 的 能 力 。 运 行程 序 ， 单 击 “ 我 接受 ”按钮 ， 表 示 在 注册 成 为 用 户 时 已 经 确认 该 服 
务 条 款 ， 并 进入 下 一 页 面 ， 如 果 单 击 “ 我 拒绝 ”按钮 ， 将 不 能 再 进行 用 户 注册 。 进 入 “选择 用 户 名 ”页 面 时 ， 
输入 用 户 的 相关 信息 后 单 击 “ 提 交 表 单 ” 按 钮 ， 将 进入 “填写 个 人 资料 ”页 面 ， 在 此 页 面 中 将 添加 个 人 的 详细 
信息 。 程 序 运行 结果 如 图 23.6 一 图 23.8 所 示 。 


ee 胃 朋 送行 开拓 务 条 著 ， 
注册 步 要 : 1、 确 认 服 备 条 寺 ->e、 过 拓 用 户 名 -3、 吉 写 个 人 潜 科 


本 
明日 编 得 省 之 容 问 在 此 将 儿 委 眶 ， 用 户 【您 】 欲 访问 和 使 用 明日 编程 者 容 风 站， 
一 所 用 户 购 严明 日 科技 或 明日 坊 程 者 之 宏 亲 的 相关 产品 ， 到 可 注册 成 为 二 日 编程 者 
据闻 要 天 由 户 中 级 活动 和 事件 失主 页 。 录 可 随 叶 根 大 指头 改 到 娄 斩 记 码 。 


明日 编 各 者 之 家 风量 前 向 用 户 是 俯 诗 窗 的 同上 及 执 下 资源 服务 ， 也 活 但 不 基于 各 种 
明日 编程 者 之 窜 网 提供 的 部分 网 终 服 务 【 便 共 手机 图片 淮 声 下 载 、 电 子 邮 件 等 ) 为 收费 
之 守 亲 汉 提 供 由 类 的 由 经 服务， 内 此 之 站 与 交 关 总 服务 有 关 的 
鉴于 网 闪 服务 的 将 剑 性 ， 用 户 同意 明日 编程 者 之 富有 权 随时 变更 、 中 汤 式 终止 部 从 或 
明日 编程 者 之 窑 网 务 间 定期 或 不 定期 地 对 惟信 网络 甫 生 的 平台 (如 互 联网 网 站 等 ) 或 入 
如 发 生 下 列 证 何 一 种 情形 ， 明 日 编程 者 之 守 网 有 如 隔 时 中 断 或 终止 向 用 户 提供 本 协议 项 


攻 须 : 
之 家 
用 户 
信息 


使 用 规则 ， 
节 用 户 在 使 月 权 我 四 红 服 务 时 : 林 丢 直 定 向 明 昌吉 程 者 之 家 两 去 付 相 碳 多 服务 : 
了 二 有 过 风 大 民 志 访客 吉 全 则 旺 失误 广 村 衬 基 下 和 入 本本 的 二 


洪 用 明日 如 程 者 之 穿 风 网络 服务 对， 必须 向 明日 编程 者 之 窜 网 提供 准确 的 个 
其 帐号 、 定 码 转 让 或 出 信子 他 人 使 月 。 刘 用户 发 现 其 帐 豆 遭 他 人 非法 会 月 ， 

Pv 户 发 送 两 品 促 宵 或 豆 - 

用 日 和 志和 网 不 从 并、 和 到 全 用 户 的 往 拓 信 息 ， 除 非 有 法 委 放 可 天 农机 明 


合法 服务 


思 
轩 
| 3 


程序 。 
社会 大 众 的 隐私 安全 、 


| 负责 争 束 
用 户 明 确 同意 其 使 用 明 晶 编程 考 之 四 现 网 络 服 务 所 存 宇 的 风险 将 完 全 由 其 个 人 承担 司 
Li D 


有 | 于 三 


23.6 “分 步 用 户 注册 1 
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:4 确 ) 2、 和 连 择 用 户 各 ~、 二 写 个 人 资料 
广角 步 台 :1、 确 这 服务 条 款 -2、 注册 步 李 :1、 兢 认 服 务 条 款 - 交 、 沈 择 用 户 各 -、 寺 写 个 人 溢 料 


请 和 总 :大 有 “yw 且 项 目 必须 . ET 
请 境 写 您 的 用 户 各 : 
5: ] : Ew 
通行 下 用 户 名 : [sse7 竹本 == 二 J 
:|© cd| 
请 请 写 安全 设置 :全 设置 用 于 验证 帐号 和 找 回 灾 码 ) [性 由 辐 生 记 广 
号 的 安全 极为 二 要 ， 请 个 务必 认真 填写 出 生日 期 : [5691708717 ”| 请 输入 标准 日 期 ( 如 : 1980/07/17 或 1980-07-17》 
* 证 牢 类 到 ; [身份 证 到 
AiE# 呈 码 : nOBI08IT 


+ 密码 提 寺 问题 : 末末 的 生 百 


rr + [T1377 TEE 入 入 文本 杠 中 相对 的 随机 数 ， 作 为 验 省 码 
+ 密码 提示 答案 : [S3115 


4 保守 邮 答 : ieeeabo tnail con] 这 是 找 回 密码 的 另 一 种 渤 择 ， 比 扣 : + 


所 交 表 间 | 
图 23.7 分 步 用 户 注册 2 图 23.8 分 步 用 户 注册 3 


图 关键 技术 


本 实例 主要 应 用 INSERT INTO 语句 将 用 户 注册 的 相关 信息 添加 到 数据 表 中 。 本 实例 的 实现 过 程 是 : 首先 进 
入 服务 条 款项 目 ， 当 用 户 接受 服务 条 款 之 后 ， 将 进行 用 户 名 、 登 录 密 码 、 确 认 密码 和 密码 问题 等 相关 信息 的 输入 ， 
输入 完成 后 提交 表单 ， 最 后 进入 输入 个 人 信息 的 页 面 ， 输 入 结束 后 再 次 提交 表单 ， 至 此 完成 用 户 的 分 步 注 册 。 
图 设计 过 程 

(1) 首先 确认 用 户 是 否 接受 服务 条 款 ， 单 击 “我 接受 ”按钮 将 进入 用 户 注册 的 相关 页 面 。 

(2) 通过 JavaScript 脚本 对 输入 的 相关 信息 格式 进行 限定 ， 必 须 输 入 正确 的 格式 ， 其 关键 代码 如 下 : 

<script language="javascript" type= "text/javascript"> 

function MycheckO{ 

if(forml.username.value—""){ 
alert(" 请 输入 正确 的 用 户 名 !! "); 


forml.username.focus(): 
Tetumn; 


} 
if(form!1.passl.value—""){ 
alert(" 请 您 正确 地 输入 登录 密码 ( 仅 可 用 英文 、 数 字 !)"); 
forml.pass1 focus(); 
Teturn; 
人 
alert(" 请 输入 登录 密码 确认 ! "); 
forml.pass2.focus(); 
Teturn; 
人 
alert(" 您 两 次 输入 的 密码 不 一 致 ， 请 重新 输入 ! 
forml.pass1 .focus(); 
Teturn: 
} 
if(form1.question.value—"") 
alert(" 请 输入 提示 问题 ， 当 您 忘记 密码 时 可 根据 该 问题 提示 密码 !"): 
forml.question.focusO: 
Teturn; 


if(forml.answer.value—""){ 
alert(" 请 输入 问题 答案 ! "): 


forml.answer. focusO: 
Teturmn; 


. 
forml.submit|: 
} 
</script> 
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(3) 实现 分 步 用 户 注册 2 页 面 的 添加 用 户 的 操作 ， 以 添加 数据 是 否 成 功 为 条 件 判 断 用 户 名 是 否 存在 的 关键 


代码 如 下 : 
<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/> 
<% 
Tequest.setCharacterEncoding("GBK"): // 设 置 字符 集 
String username=request.getParameter("username"); /获取 页 表单 中 的 信息 


String passwordrrequest getParameter( ee 


String answer=request. ‘ter("answer"): 

String sql="insert into tb_rPartEnroll (account,password.question.answer) values ("+usemame+","+password+","+question+", "+answert+")"; 
这 connection executeUpdate(sqD)){ /执行 SQL 语句 ， 并 判断 是 否 执行 成 功 

%> 

<script language="javascript" type="text/javascript">window.location.href='resNext.jsp?usemame—<%=username%6>"</script> 

<%}else{%> 

‘<script language="javascript" type="text/javascript">window.location.href='res.jsp?usemame—<%=username%%>"</script> 

<%}%> 


(4) 实现 对 分 步 用 户 注册 3 页 面 的 用 户 做 修改 操作 的 关键 代码 如 下 : 


<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/> 


Tequest.setCharacterEncoding("GBK"): /设置 字符 集 

String username = request.getParameter("usermame”); /获取 表单 信息 

String realName = Iequest.getParameter("realName'"): 

String sex = request.getParameter("sex"); 

String bron = request.getParameter("bron"); 

String number = request.getParameter("number"); 

String email = request.getParameter("email"); 

String sql ="update tb_rPartEnroll set realName=" + realName + "sex=" + sex + mbron=" + bron + ".number=" + number + ", email=" + email + " 


Where account=" + username + "™"; // 生 成 SQL 语句 
String result = ""; 
if (connection.executeUpdate(sql)) { // 执 行 SQL 语句 
result= "注册 成 功 !11 "; 


jelse{ 
result= "注册 失败 111 "; 
} 


%> 
<script language="javascript" type="text/javascript">window.location.href='index.jsp?result=<%=result%6>"</script> 


图 秘笈 心 法 
分 步 用 户 注册 其 实 并 不 难 ， 主 要 就 是 将 每 一 步 的 表单 信息 都 更 新 到 数据 库 表 中 即 可 。 例 如 ， 本 实例 首先 将 


步骤 (2) 中 的 表单 信息 添加 到 数据 库 的 tb_rPartEnroll 表 中 , 然后 在 步骤 (3) 中 应 用 update 语句 更 新 tb_rPartEnroll 
表 的 其 他 字段 数据 。 
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图 实例 说 明 

为 了 防止 别有用心 的 人 恶意 注册 ， 可 以 使 用 通过 E-mail 激活 注册 用 户 的 方法 来 激活 新 注册 的 用 户 。 运 行 本 
实例 ， 单 击 “ 新 用 户 注册 ”链接 后 如 图 23.9 所 示 。 输 入 注册 信息 后 单 击 “ 提 交 信 息 ” 按 钮 ， 激 活 注 册 用 户 的 邮 
件 将 会 被 发 送 到 用 户 填写 的 邮箱 中 ， 如 图 23.10 所 示 。 通 过 访问 邮件 中 的 地 址 就 可 以 实现 激活 用 户 的 操作 。 


图 关键 技术 


要 运行 本 实例 ， 首 先 应 该 构建 JavaMail 的 开发 环境 ， 在 JDK 中 配置 JavaMail 的 相关 类 和 包 。 
在 构建 JavaMail 开发 环境 中 ， 需 要 mailjar 和 activation jar 两 个 文件 。 这 两 个 文件 的 获得 可 以 通过 SUN 公 
司 的 官方 网 站 下 载 。 本 实例 在 WEB-INF\lib 文件 夹 中 存放 的 就 是 这 两 个 文件 。 
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E> 


sl tm NE | 3 | 3 1a 站 


“教学 光 各 实例 解决 网 上 论坛 


天 站 的 目标 号 中 国 和 人 的 加 和 
i 


CTTTTTTTTTT 


通过 邮箱 激活 注册 用 户 


ma 
mr [CC 


[ESE [ER 
= 请 点 击 下 面 的 连接 流 活 用 户 ， 加 果 不 能 点 击 请 手动 复制 到 地 址 栏 中 执行 
http://132. 168. 1. 42:8080/453/Activation?id=1&name=111 
图 23.9 用 户 注册 页 面 图 23.10 ”激活 用 户 邮件 内 容 


JavaMail 对 SMTP、POP3、IMAP 提供 支持 ， 封 装 了 电子 邮件 功能 中 的 邮件 对 象 、 发 送 、 身 份 验 证 、 接 收 
等 功能 。 

在 发 送 各 种 类 型 的 邮件 时 ， 主 要 应 用 到 下 面 几 个 类 。 

(1) Session 类 。 用 户 要 想 发 送 邮件 首先 需要 创建 Session 类 的 对 象 ， 利 用 该 对 象 创建 邮件 对 象 、 指 定 邮 件 
服务 器 认证 的 客户 端 属性 。 其 类 层次 结构 为 javax.mail.Session。 

(2) InternetAddress 类 。 邮 件 发 送 的 地 址 类 ， 其 类 层次 结构 为 javax.mail.internet.InternetAddress， 它 继承 自 
抽象 类 javax.mail.Address。 

(3) MimeMessage 类 。 邮 件 消息 类 ， 其 类 层次 结构 为 javax.mail.intermet.MimeMessage， 继 承 自 抽象 类 
javax.mail.Message。 

(4) Transport 类 。 邮 件 发 送 类 ， 其 类 层次 结构 为 javax.mail.Transport。 

(5) Authenticator 类 。 授 权 者 类 ，JavaMail 通过 使 用 Authenticator 类 以 用 户 名 、 密 码 的 方式 访问 那些 受到 
保护 的 资源 ， 在 这 里 “资源 ”就 是 指 邮件 服务 器 。 其 类 层次 结构 为 javax.mail. Authenticator。 

(6) Store 类 。 用 来 从 邮件 服务 器 上 接收 邮件 ， 其 类 层次 结构 为 javax.mail.Store。 

(7) Folder 类 。 邮 件 文件 夹 类 ， 其 类 层次 结构 为 javax.mail. Folder。 
用 设计 过 程 

(1) 创建 DBConnection 类 ， 用 于 获取 数据 库 连 接 。 创 建 ActivUserDto 类 ， 用 于 封装 数据 信息 。 

(2) 创建 ActivUserDto 类 ， 用 于 对 数据 表 进 行 操作 。 在 该 类 中 编写 insert0 方 法 ， 用 于 注册 新 用 户 ， 并 将 
新 用 户 的 编号 返回 ， 关 键 代 码 如 下 : 

/用 户 注册 ， 发 送 激活 用 户 邮件 

public int insert(ActivUserDto dto) { 

Connection con = null; 


con = DBConnection.getConnection(): 

ps = con.prepareStatement("INSERT INTO tb_activuser values (default.?.?.7.0")", PreparedStatement. RETURN_GENERATED KEYS); 
Ps.setString(1. dto.getNameO): 

Ps.setString(2. dto.getPwdO): 


二 DT{ /如 果 插 入 成 功 


Is=ps.getGeneratedKeys(); /得 到 自动 生成 的 主键 编号 
while (rs.nextO) { 


入 
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} 
ee, /省 略 部 分 代码 
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另外 在 该 类 中 编写 activUser0 方 法 ， 用 于 按照 (id,name) 将 数据 表 中 的 用 户 账号 激活 ， 关 键 代码 如 下 : 


public void activUser(Integer id, String name) { 
Connection con = null; 
PreparedStatement ps =null: 
ty{ 
con = DBConnection. getConnection(); 


ps = con.prepareStatement("UPDATE tb_activuser SET state=1 WHERE id=? and name=?"); 


ps.setInt(1, id); 
ps.setString(2, name): 
ps.execute(); 
Ps.close|; 
con.closeO; 

eee /省 略 部 分 代码 


(3) 创建 SendMail 类 ， 在 该 类 中 编写 sndMail0 方 法 ， 发 送 用 于 从 资源 文件 中 读 取 要 发 送 激活 邮件 所 用 到 
的 邮箱 配置 信息 ， 并 向 用 户 发 送 激活 邮件 ， 关 键 代 码 如 下 : 


public void sendMail(String mail,String urD { 


InputStream is = this.getClass().getResourceAsStream("/mailinfo.properties"); 


Properties prop = new Properties(); 
ty{ 
prop.load(is); 
} catch (IOException el) { 
el.printStackTraceO; 
} 


// 加 载 资源 文件 


String msgText = "请 点 击 下 面 的 连接 激活 用 户 ， 如 果 不 能 点 击 请 手动 复制 到 地 址 栏 中 执行 m" + url; 


String smtpHost = prop.get("smtpHost").toStringO; 
String from = prop.get("mailName'").toString0; 
String pwd = prop.get("pwd").toStringO; 
String to = mail; 
Properties props = new Properties(); 
Props.put("mail.smtp.host", smtpHost); 
Session session = Session.getDefaultInstance(props, null); 
MimeMessage message = new MimeMessage(session); 
wy{ 

message.setFrom(new InternetAddress(from)); 


JSMTP 服务 器 名 

/发 信人 地 址 

/密码 

// 收 信人 地 址 

/创建 Properties 对 象 

/创建 邮件 服务 器 

/取得 默认 的 Session 

/创建 一 条 信息 ， 并 定义 发 信人 地 址 和 收 信人 地 址 


InternetAddress[] address = {new IntemetAddress(to)}: 
message.setRecipients(Message.RecipientType.TO., address); 


message.setSubject(" 激 活 注册 用 户 "); 
message.setSentDate(new DateO): 
message.setText(msgText): 
message.saveChanges(); 

Transport transport = session.getTransport("smtp"); 
transport.connect(smtpHost, from, pwd); 


// 设 定 主题 

// 设 定 发 送 时 间 

// 把 前 面 定义 的 msgText 中 的 文字 设 定 为 邮件 正文 的 内 容 
/保存 发 送信 息 

/协议 

/发 信人 地 址 、 用 户 名 、 密 码 


transport.sendMessage(message, message.getAllRecipients()); 


transport.closeO; 
} catch (Exception e) { 
e.printStackTraceO; 
} 
} 
(4) 创 


建 RegServlet 类 。RegServlet 类 是 向 数据 表 中 插入 新 用 户 信息 ， 同 时 发 送 激活 邮件 的 servlet。 该 类 


首先 实现 了 doGet0 与 doPost0 方 法 ， 它 们 分 别 执行 HITP 中 get 类 型 的 请 求 与 post 类 型 的 请 求 ， 在 本 实例 中 这 
两 种 类 型 的 请 求 都 通过 调用 processRequest0 方 法 来 实现 业务 逻辑 ，processRequest( 方 法 将 用 户 输入 的 注册 信息 


插入 数据 表 中 ， 并 为 用 户 发 送 激活 邮件 ， 关 键 代码 如 下 : 
Pprotected void processRequest(HttpServletRequest request, HttpServletResponse response) 


throws ServletException. IOException { 
Tesponse.setContentType("text/html:charset=GBK"); 
ActivUserDto dto = new ActivUserDto0: 
dto.setName(request. getParameter("name")): 
dto.setPwd(request.getParameter("pwd1")); 
dto.setMail(request.getParameter("mail")): 


String url=" 
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urH=requestgetLocalPortO: 
urlH=request.getContextPathO: 
mrlt="/Activation"; 

wl 4= "id="+idt"&name="+dto.getName(); 
new SendMailO.sendMail(dto.getMailO.urD: 


PrintWiiter out = response. get Writer(); 
out.print("<h3 align='center> 用 户 注册 完成 ， 激 活 账号 邮件 已 经 发 出 ， 请 您 登录 您 的 邮箱 按照 信 中 地 址 激活 您 的 账号 </h3>"); 
out.print("<br><center><a href='index.jsp> 返 回首 页 </a></center>"); 

out,close0: 


(5) 创建 Activation 类 , Activation 类 是 用 来 处 理 用 户 激活 请 求 的 servlet。 该 类 首先 实现 了 doGet0 与 doPostO 


方法 ， 它 们 分 别 执行 HTTP 中 get 类 型 的 请 求 与 post 类 型 的 请 求 ， 在 本 实例 中 这 两 种 类 型 的 请 求 都 通过 调用 
processRequest() 方 法 来 实现 业务 逻辑 ，processRequest() 方 法 通过 获取 URL 中 的 参数 激活 用 户 ， 关 键 代码 如 下 : 


Protected void processRequest(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 


} 


response.setContentType("text/html;charset=GBK"); 

Integer id = Integer.valueOf(request.getParameter("id")): 

String name = request.getParameter("name"); 

new ActivUserDao().activUser(id, name); 

PrintWriter out = response.getWriter(); 

out.print("<br><br>"); 

out.print("<center> 用 户 "+name+" 已 被 激活 </center>"); 

out print("<br><center><a href='index.jsp> 进 入 登录 页 面 </a></center>"); 
out.close(); 


(6) 在 web.xml 文件 中 配置 RegServlet 类 和 Activation 类 ,首先 使 用 <servlet-name> 与 <servlet-class> 标 签 配 


置 servlet 的 名 称 与 所 在 的 包 名 类 名 ， 然 后 再 通过 <url-pattern> 标 签 配置 servlet 的 映射 路 径 ， 关 键 代码 如 下 : 


<servlet> 


<servlet-name>RegServlet</servlet-name> 
<servlet-class>com.jwy.servlet.RegServlet</servlet-class> 


</servlet> 
<servlet> 


<servlet-name>Activation</servlet-name> 
<servlet-class>com.jwy.servlet.Activation</servlet-class> 


/servlet> 
<servlet-mapping> 


<servlet-name>RegServlet</servlet-name> 
<url-pattern>/RegServlet</url-pattern> 


</servlet-mapping> 
<servlet-mapping> 


<servlet-name>Activation</servlet-name> 
<url-pattern>/Activation</url-pattern> 


</servlet-mapping> 


(7) 编写 index.jsp 页 面 ， 用 于 登录 或 进入 新 用 户 注册 页 面 ， 关 键 代码 如 下 : 


<form name="f1" method="post" action="login jsp" onsubmit="return checkO"> 


<table border="1" align="center"> 
<tr> 
<td> 用 户 名 : </td> 
<td><input type= "text" name="name"></td> 
</tr> 
<t> 
<td> 密 &nbsp:&nbsp:&nbsp:&nbsp: 码 : </td> 
<td><input type="password" name="pwd"></td> 
</tr> 
<tr> 
<td colspan="2" align="center> 
<input type="submit" value=-" 登 录 ">&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
<a href="regjsp"> 注 册 新 用 户 </a> 
<td> 
</> 
</table> 


</form> 


872 


(8) 编写 regjsp 页 面 ， 用 于 注册 新 用 户 ， 关 键 代码 如 下 : 
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<form name="f1" method="post" action="RegServiet" onsubmit="return checkO"> 
<table align="center" border="1"> 

<t> 
<td> 用 户 名 : </td> 
<td><input type="text" name="name"></td> 

</t> 

<t> 
<td> 密 码 : </td> 
<td><input type="password" name="pwd1"></td> 


4 


<td> 确 认 密码 : </td> 
<td><input type="password" name="pwd2"></td> 


$4 


<td> 电 子 邮 箱 : </td> 
<td><input type="text" name="mail"></td> 


$$ 


<td colspan="2" align="center"> 
<input type="submit" value=" 注 册 " />&nbsp:&nbsp:&nbsp:&nbsp:&nbsp:&nbsp: 
<input type="reset" value=" 重 置 "/> 
<t> 
</r> 
</table> 
</form> 


(9) 在 mailInfo.properties 资源 文件 中 配置 用 户 自 己 发 送 激 活 邮 件 所 用 的 邮箱 的 主机 地 址 、 邮 箱 账 号 及 邮 
箱 密码 ， 关 键 代码 如 下 : 
smtpHost=192.168.+.+* 
mailName=jing***(@163.com 
md 


图 秘笈 心 法 

本 实例 在 通过 邮件 激活 用 户 时 , 给 用 户 填 写 的 邮箱 地 址 中 发 送 了 一 封 含有 URL 地 址 的 电子 邮件 , 将 用 户 ID 
与 用 户 名 作为 参数 保存 在 URL 地 址 中 ， 当 用 户 通过 此 URL 地 址 访问 指定 页 面 时 ， 该 页 面 通过 获取 URL 中 的 参 
数 来 实现 激活 用 户 的 功能 。 


23.3 论 坛 
随 着 网 络 的 普及 ， 论 坛 的 内 容 越 来 越 丰富 ， 论 坛 也 由 此 深 受 广大 网 民 的 喜爱 。 因 此 ， 商 业 网 站 对 论坛 也 重 


视 起 来 ， 纷 纷 在 自己 的 网 站 上 开辟 论坛 ， 提 供与 网 民 交 流 的 平台 ， 同 时 在 线 技术 支持 和 在 线 服 务 也 在 论坛 中 开 
展 起 来 。 下 面 通过 5 个 典型 实例 对 论坛 中 的 相关 技术 进行 详细 介绍 。 
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国 实例 说 明 

帖子 信息 就 是 供 别 人 浏览 查看 并 分 享 自己 的 想法 和 经 验 的 信息 。 进 入 关于 “明日 科技 出 版 的 [JSP] 类 图 书 专 
区 ”论坛 首页 ， 单 击 讨论 主题 超 链接 ， 将 进入 到 查看 主题 信息 的 页 面 ， 该 页 面 主要 以 列表 形式 浏览 帖子 的 主题 
和 帖子 的 全 部 内 容 。 运 行 结果 如 图 23.11 所 示 。 
图 关键 技术 


正 地 址 栏 中 的 id 值 为 主题 信息 表 〈tb_forumSend) 中 的 字段 id 值 ， 例 如 ， 程 序 发 布 后 ， 在 正 地 址 栏 中 输 
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入 “http://localhost:8080/forum/showContent.jsp?id=1”， 将 值 1 传递 到 showContentjsp 页 面 ， 然 后 通过 Request 对 
象 获取 地 址 栏 中 的 id 值 ， 最 后 应 用 SQL 语句 查询 id 值 所 对 应 的 主题 信息 。 执 行 SQL 语句 的 关键 代码 如 下 : 


String sqlSend="select * from tb_forumSend where id="+request.getParameter("id")+"™"; 


i 合同 ;20 二 拓 加 是 国 回扣 
在 和 的 第 十 一 间 间 上 力 公 基本 中 ,12 1 ?各 要 用 计划 | :ent nl 中 覃 扣 下 卫 要， 庄 问 :ervlet nl 文 半 在 
天 于 ,二 和 汪 有 扰 到 ， 如果 是 如 填 的 活 ， 兴 此 永生 于 下 ， 计 谢 
于 
sr 
sara : a00-3-28 
m 
; re 
匠 是 :和 


23.11 查看 帖子 信息 


图 设计 过 程 


(1) 创建 DBConnection.java 类 文件 , 主要 作用 是 取得 对 数据 库 的 操作 , 代码 读者 可 参考 光盘 中 的 源 程序 。 
(2) 检索 数据 库 中 的 数据 ， 根 据 用 户 选 择 的 主题 id 显示 主题 信息 ， 关 键 代码 如 下 : 


<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/> /应 用 JavaBean 

<% 

String right=(String)session.getAttribute("right"); /获取 保存 在 session 对 象 中 的 数据 
iftright 一 aulD){f /如 果 该 对 象 不 存在 

right=""; 


} 
String sqlSend="select * from tb_forumSend where id="+request.getParameter("id")+""; // 根 据 编号 获取 指定 留言 信息 
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ResultSet rsSend=connection.executeQuery(sqlSend); /| 执行 SQL 语句 
String title=""; 

String account="MrFriend"; 

while(rsSend.nextO){ /循环 遍历 查询 结果 集 
title=rsSend.getString("title"); /获取 主题 信息 
content=rsSend.getString("content"); /获取 内 容 信息 
account=rsSend.getString("account"); // 获 取 留 言 者 信息 
ip=rsSend.getString("ip"); /获取 编号 信息 
creatime=rsSend.getString("creatime"); /获取 时 间 信 息 


String sqlUser="select * from tb_forumUser where account= "+account+ 


ResultSet rsUser=connection.executeQuery(sqlUser): 
while(rsUser.nextO){ 

Sex=rsUser. getString("sex"); 

} 

%> 


<%}}catch(Exception e){}%> 


(3) 检索 数据 库 中 的 数据 ， 根 据 用 户 选择 的 主题 id 查询 回复 信息 ， 关 键 代码 如 下 : 


String sqlReyle="select tb_forumBack.*.tb_forumUser.sex from tb forumBack inner join tb foramUser on tb forumBack id- tb_forumUserid where 


tb_forumUserid="+request.getParameter("id")}+™"; 


ResultSet rsReyle=connection.executeQuery(sqlReyle); 


by{ 


/查询 回复 信息 SQL 语句 
/执行 SQL， 获取 查询 结果 集 
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while(rsReyle nextO){ /循环 遍历 查询 结果 集 
TeSign=rsReyle.getString("sign"); /获取 了 b forumBack 表 中 的 sign 属性 
reTitle=rsReyle.getString("title"); /获取 论坛 回复 主题 
TeContent=rsReyle.getString("content"); /获取 论坛 回复 内 容 
TeAccount=rsReyle.getString("account"); /获取 论坛 回复 人 
Tecreatime=rsReyle.getString("creatime"): /获取 回复 时 间 
reSex=rsReyle.getString("sex"): /获取 回复 人 性 别 
%> 
<%}}catch(Exception ©){}%> 

图 秘笈 心 法 


实现 本 实例 ， 主 要 是 根据 用 户 选 择 相应 的 帖子 主题 ， 然 后 根据 帖子 主题 的 id 查询 数据 库 中 主题 表 的 信息 ， 
并 查询 对 应 的 回复 信息 。 
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实用 指数 ， 友 要 去 


图 实例 说 明 

发 表 主题 信息 是 为 了 在 论坛 中 互相 讨论 话题 而 产生 的 ， 发 表 主题 信息 就 是 表达 自己 的 看 法 ， 与 他 人 进行 讨 
论 ， 因 此 发 表 主题 是 论坛 首要 的 功能 。 用 户 在 查看 主题 信息 页 面 中 单 击 “发 表 主题 ” 超 链 接 ， 可 进入 “发 表 主 
题 ” 页 面 发 表 主 题 信 息 ， 运 行 结果 如 图 23.12 所 示 。 


| 
进发 现在 ck njars 中 : 
A 


副 m:iarool 
字 节 :最多 尼 放 1600 人 字 节 


Cs |] S40 | EEN 


图 23.12 ”发 表 主题 


图 关键 技术 
在 开发 专业 论坛 网 站 的 过 程 中 需要 考虑 到 发 布 主题 的 人 以 及 发 布 时 间 。 在 实际 操作 中 ， 这 些 不 需要 用 户 输 
入 ， 系 统 会 根据 实际 情况 自动 填写 。 
图 设计 过 程 
(1) 创建 ShowTime.java 类 文件 ， 主 要 作用 是 通过 showTodayTime() 方 法 取得 系统 的 时 间 ， 程 序 代 码 如 下 : 
Ds 
import java.util.Date; 
public class ShowTime { 
public String showTodayTimeO{ 
Date date=new Date0: 
retum DateFormat.getDateInstance( format(date): 
} 
} 


// 导 入 需要 的 类 包 
// 创 建 获取 系统 时 间 方 法 
// 系 统 时 间 格 式 化 返回 
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(2) 利用 JSP 内置 对 象 Request 接收 发 表 的 主题 信息 ， 然 后 将 用 户 发 表 的 信息 保存 在 主题 表 中 ， 程 序 代 码 
如 下 : 


<jsp:useBean id="connection" scope="request" class="com.JDBConnection"/> 
<jsp:useBean id="showTime" scope="request" class="com. ShowTime"/> /应 用 JavaBean 


Tequest.setCharacterEncoding("gbk"):; // 设 置 请 求 信息 编码 
String url=request. getParameter("url"); /获取 请 求 参 数 


String content=request.getParameter("content"); 

String sql="insert into tb forumSend values ("+sort+™,"+titlet™","+content+™,"+account+™,"+ip+","+show Time.showTodayTimeO)+")"; connection. 
executeUpdate(sql) // 执 行 SQL 语句 

connection.closeConnection(); /关闭 连接 

%> 


图 秘笈 心 法 
发 表 主题 信息 ， 也 就 是 向 主题 信息 表 中 插入 一 条 数据 ， 用 户 只 需要 输入 主题 和 内 容 ， 其 他 字段 信息 会 自动 
添加 ， 如 下 地址 和 发 表 时 间 等 。 


实例 588 
实例 实用 指数 ， 良 朗朗 


图 实例 说 明 
当 用 户 浏览 主题 时 ， 可 能 会 对 该 主题 有 自己 的 看 法 ， 此 时 用 户 可 以 在 查看 主题 信息 页 面 上 单 击 “ 回 复 ” 超 
链接 ， 进 入 到 “回复 主题 ”页 面 来 发 表 自 己 的 意见 和 想法 。 运 行 结果 如 图 23.13 所 示 。 


> 大 主题: 请 才 问 是 
me 回复 主题 : 回复 : 1 
上 回复 内 容 : 乓 委 单 中 加 090 正确 的 所 壹 码 格 却 即 可 , 请 检查 你 的 代码 中 的 司 
Lr 了 | 护 码 格式 是 G82312j 下 是 GBk 或 者 是 其 地 的 , 请 与 书籍 内 容 相符 
| 
我 是 : 男 
79wy1638163. com 
全 maoaseoo 
Po 习 
字 节 : 最 多 区 许 1600 个 字 节 
提交 回复 重 写本 复 美加 主题 


23.13 ”回复 主题 信息 
图 关键 技术 


将 参数 id 值 作为 回复 信息 表 (tb_forumBack) 中 的 id (字段 id) 值 应 用 到 程序 中 ， 例 如， 在 下 地址 栏 中 输 
入 “http://localhost:8080/forum/backInformation.jsp?id=5”, 将 值 5 传递 到 backInformation.jsp 页 面 后 , 通过 Request 
对 象 获取 地 址 栏 中 的 id 值 .最 后 应 用 INSERT 语句 将 回复 信息 添加 到 数据 库 中 。 回复 主题 信息 的 SQL 语句 的 代 
码 如 下 : 


String sqlReyle="select tb_forumBack.*.tb_forumUser.sex from tb_forumiBack inner join tb_forumUser on tb_forumBack.account= tb_forumUseraccount 
Where tb forumBack.id="+request.getParameter("id")+""; 
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图 设计 过 程 


通过 Request 对 象 获取 回复 主题 信息 的 内 容 ， 利 用 INSERT INTO 语句 向 回复 信息 表 中 添加 回复 信息 ， 
面 中 实现 回复 成 功 的 提示 信息 ， 并 将 网 页 重 定向 到 查看 主题 信息 页 面 ， 程 序 代码 如 下 : 


spruseBean id="showTime" scope="request" class="com. ShowTime"/> /应 用 JavaBean 
<% 
Tequest.setCharacterEncoding("gbk"): /1/ 设 置 请 求 编码 
String title=request.getParameter("title”); // 著 取 回复 主题 信息 
String content=request.getParameter("content"); /获取 回复 内 容 信 息 
String id=request. getParameter("id"): 
String account-=(String)session.getAttribute("account"); /获取 session 范围 内 对 象 
String sql= "insert into tb forumBack values ("+titlet","+content+","+id+","+account+","+showTime.showTodayTimeOQ+")"; 

%> 
connection.executeUpdate(sqD); 1/ 执行 SQL 语句 
connection.closeConnection(); /关闭 连接 

图 秘笈 心 法 


回复 主题 信息 时 ， 首 先 需要 获取 主题 信息 的 id， 然后 将 主题 id 和 回复 信息 插入 到 回复 信息 表 中 ， 这 样 在 查 
询 主题 信息 时 ， 可 以 根据 主题 信息 的 id 查询 该 主题 相应 的 回复 信息 。 


实例 589 彻 肥 
5 实用 指数 : 会 食 食 

图 实例 说 明 

版 主 在 论坛 中 具有 最 高 权限 ， 版 主 登 录 后 ， 可 以 对 没有 价值 的 主题 进行 删除 操作 。 如 果 版 主 是 该 主题 的 发 
布 者 ， 那 么 版 主 同样 拥有 删除 此 主题 的 权利 。 在 开发 专业 论坛 网 站 的 过 程 中 ， 版 主 拥有 删除 论坛 主题 及 回复 信 
息 的 权利 。BBS 的 版 块 有 公共 和 私有 之 分 。 公 共 的 版 块 是 任何 登录 本 系统 的 用 户 都 能 看 到 的 ， 私 有 的 版 块 则 只 
有 指定 的 成 员 能 够 进入 。 运 行 本 实例 ， 以 版 主 身份 登录 论坛 ， 在 查看 主题 信息 页 面 时 ,“ 删 除 主 题 ” 和 “删除 回 
复 ” 超 链接 处 于 可 用 状态 。 单 击 “ 删 除 主题 ” 超 链 接 的 同时 会 删除 与 该 主题 绑 定 的 回复 信息 ， 单 击 “删除 回复 ” 
超 链接 直接 删除 回复 信息 。 运 行 结果 如 图 23.14 所 示 。 
国 关键 技术 


版 主 登 录 论坛 后 有 删除 主题 信息 以 及 删除 回复 主题 信息 的 权利 ， 主 题 信息 表 〈tb_forumSend) 和 回复 主题 
表 (tb_forumBack) 存在 主键 表 和 外 键 表 的 关系 ， 关 系 图 如 图 23.15 所 示 。 
a (mara 2006-92T 最 卫 主题 。 返回 主题 国 固 乞 
区 挫 妓 物 Es 
” | i jj 可 中 通过 Stri trine)session te ee ; 二 
我 是 :男生 
ag eT 
外 加 时 间 : zo00-s-27 回复 
FD, WER Ee 
我 是 :男生 


23.14 ”删除 主题 及 回复 信息 23.15 ”主题 信息 表 和 回复 主题 表 的 关系 图 
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图 设计 过 程 

(1) 删除 回复 信息 的 程序 代码 如 下 : 
<isp:useBean id="connection" scope="request" class="com.JDBConnection"/> // 应 用 JavaBean 
<% 
String sign=request.getParameter("sign"); // 获 取 请 求 参数 
String id=request.getParameter("id"): 
String sql="delete from tb_forumBack where sign="+sign+™"; /执行 删除 操作 的 SQL 语句 
connection.executeUpdate(sql); /执行 SQL 语句 
connection.closeConnection0: 1/ 关闭 连 接 
%> 
<script language="javascript" type= "text/javascript"> 
window.location.href='showContent.jsp?id=<%=id%>"; 
</script> 

(2) 删除 主题 信息 的 程序 代码 如 下 : 
<isp:useBean id="connection" scope="request" class="com.JDBConnection"/> /应 用 JavaBean 
<% 
String id=request.getParameter("id"); // 获 取 请 求 参 数 
String sqlBack="delete from tb_forumBack where id="+idt"™™"; /删除 操作 的 SQL 语句 
connection.executeUpdate(sqlBack); /执行 SQL 语句 
String sqlSend="delete from tb_forumSend where id="+id+ 
connection.executeUpdate(sqlSend): 
connection.closeConnection0: /关闭 连接 
%> 


‘<script language="javascript" type="text/javascript"> 
window.location.href='showInformation.jsp'; 
</script> 


图 秘笈 心 法 


由 于 主题 信息 表 与 回复 主题 表 是 存在 外 键 关 联 的 ， 所 以 在 删除 主题 信息 表 某 个 主题 信息 时 ， 需 要 同时 删除 
回复 主题 表 中 对 应 的 回复 信息 。 


力 实例 说 明 


进入 本 论坛 后 ， 如 果 用 户 没有 进行 注册 或 登录 ， 那 么 此 时 用 户 为 游客 身份 。 而 本 实例 只 有 成 功 注册 后 才 可 
以 回复 留言 信息 ， 当 游客 单 击 “ 回 复 主题 ” 超 链 接 时 ， 将 会 重 定向 到 系统 首页 。 为 方便 用 户 注册 ， 在 首页 中 提 
供 了 用 户 注册 以 及 登录 的 功能 。 单 击 “ 用 户 注 册 ” 超 链接 可 以 注册 一 个 新 的 用 户 。 单 击 “ 登 录 ” 超 链接 ， 以 注 
册 的 用 户 身份 登录 本 论坛 ， 从 而 具备 删除 主题 及 回复 信息 权限 〈 只 有 管理 员 具 备 该 权限 ) 以 外 的 所 有 权限 ， 并 
享有 一 个 离线 的 功能 ， 即 “注销 用 户 ” 功 能 。 运 行 本 实例 ， 以 注册 用 户 的 身份 登录 本 论坛 进行 发 表 、 查 看 或 回 
复 主题 等 操作 。 单 击 “ 注 销 用 户 ” 超 链接 ， 即 可 以 游客 的 身份 重新 定向 到 论坛 首页 。 如 果 没 有 安全 退出 ， 非 注 
册 用 户 也 可 以 通过 当地 浏览 器 以 当前 用 户 的 身份 进入 本 论坛 。 运 行 结果 如 图 23.16 所 示 。 


图 只 0 科技 在 线 论坛 = ~ 


neo 有朋 避 三 0 汪 汉 EE 


E77 
EN 

和 
EE 


23.16 ”注销 用 户 


图 关键 技术 


利用 JSP 中 的 内 置 对 象 session, 只 要 客户 端 session 变量 有 数据 ,这 些 保存 的 数值 就 可 以 被 调用 .通常 , session 
变量 将 在 用 户 最 后 一 次 请 求 页 面 后 保持 20 分 钟 的 时 间 。 为 了 避免 闲置 的 session 变量 消耗 计算 机 资源 并 防止 他 
人 盗 取 用 户 信息 ， 程 序 提供 了 一 个 退出 的 功能 ， 让 用 户 在 关闭 窗口 之 前 ， 先 清除 已 经 存在 的 session 变量 。 
图 设计 过 程 

利用 session.invalidate0 语 句 清除 session 对 象 ， 并 释放 其 所 占用 的 资源 ， 然 后 重新 定向 到 系统 首页 ， 程序 代 
码 如 下 : 

<% 

session.invalidateO; /清除 session 对象 


Tesponse.sendRedirect("index.jsp"); /请求 重 定向 地 址 
%> 


图 秘笈 心 法 


在 用 户 登 录 时 ， 将 用 户 对 象 存放 在 session 中 。 所 以 在 用 户 退出 系统 时 ， 应 该 调用 session.invalidateO 语 句 清 
除 session 对 象 。 


23.4 购 物 车 


电子 商务 系统 中 的 购物 车 同 实际 生活 中 的 购物 车 一 样 ， 都 是 方便 用 户 暂 时 保存 挑选 的 商品 的 。 购 物 车 程序 
主要 包括 添加 所 选 商品 、 查 看 购物 车 、 修 改 单 件 商品 购买 数量 、 从 购物 车 中 移 去 指定 商品 和 清空 购物 车 5 个 部 
分 。 用 户 登录 后 ， 单 击 商品 展台 中 的 “购买 ”按钮 ， 可 以 将 对 应 的 商品 添加 至 购物 车 ， 购 物 车 中 将 保存 商品 的 
id 号 、 商 品名 称 、 单 价 、 购 买 数 量 、 单 种 商品 的 金额 以 及 购物 车 内 全 部 商品 的 合计 金额 。 在 查看 购物 车 页 面 中 
在 “数量 ”文本 框 中 输入 购买 数量 后 ， 单 击 “修改 ”按钮 即 可 修改 指定 商品 的 购买 数量 ， 单 击 “ 清 空 购物 车 ” 
超 链接 ,将 退回 购物 车 中 的 全 部 商品 ; 如 果 用 户 确定 购买 当前 购物 车 中 的 全 部 商品 ， 可 以 单 击 “ 去 收银 台 结账 ” 
超 链 接 进 行 订单 处 理 。 
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图 实例 说 明 

添加 至 购物 车 页 面 主要 用 于 将 商品 信息 暂时 保存 到 购物 车 中 , 在 一 些 
商品 进 销 存 网 站 中 ,“ 添 加 至 购物 车 ”是 客户 端 程序 中 一 个 非常 关键 的 功 
能 ， 主 要 用 来 帮助 用 户 完成 商品 的 选 购 。 单 击 “ 购 买 ”按钮 即 可 将 商品 添 
加 到 购物 车 中 。 运 行 结果 如 图 23.17 所 示 。 a . 
| | 关键 技术 图 23.17 添加 至 购物 车 

将 商品 信息 添加 至 购物 车 ， 可 以 分 为 以 下 两 种 情况 : 

(1) 当 shop 为 空 时 ， 也 就 是 当 用 户 每 次 向 购物 车 中 添加 第 一 件 商品 时 需要 新 建 一 个 shop， 然 后 将 商品 信 
息 保 存 到 shop 中 。 

(2) 当 shop 不 为 空 时 ， 说 明 购 物 车 中 已 经 有 选 购 的 商品 了 ， 这 时 不 需要 新 建 shop， 直 接 向 购物 车 中 添加 
商品 信息 即 可 。 如 果 商 品 重复 ， 可 修改 shop 中 的 商品 数量 。 


Java Web 开发 实例 大 全 (基础 卷 ) 


图 设计 过 程 
(1) 创建 BuyListjava 类 文件 ， 它 通过 属性 对 象 保存 购物 车 中 的 商品 信息 ， 具 体 代 码 如 下 : 
public class BuyList { 
public String warename: 
public float price; 
public int number: 
public String photo: 
public String id: 
了 
(2) 创建 addProduction.jsp 页 面 文件 。 


首先 ， 通 过 session 判断 客户 端 用 户 是 否 已 经 购物 ， 如 果 还 没有 购买 商品 ， 则 首先 将 商品 信息 (商品 id、 商 
品 价格 等 信息 ) 存储 到 BuyList 类 的 对 象 属性 中 , 使 用 session 保存 该 对 象 。 如 果 商 品 已 经 被 购买 , 则 要 将 session 
参数 内 的 购物 信息 赋 给 新 的 BuyList 类 对 象 。 其 次 ， 判 断 用 户 当前 购买 的 商品 是 否 已 经 存在 ， 如 果 存 在 则 将 该 


商品 的 购物 数量 加 1， 如 果 不 存 在 ， 则 在 数组 中 添加 新 的 数据 。 最 后 再 赋 给 session 参数 ， 主 要 程序 代码 如 下 : 
<%@page contentType="text/html; charset=GBK" language= "java" import="java.sql.*" errorPage=""%> 
<%(Wpage import="com.dao.BuyList"%> 
SE import="java.util.+"96> 


Tequest.setCharacterEncoding("GBR"); 
String name = request.getParameter("name"); 
String price = request.getParameter("price"); 
String photo = request.getParameter("photo"); 
String id=request.getParameter("id"); 
/以 上 代码 是 从 页 面 中 取出 数据 
BuyList buyList= new BuyListO; 
buyListid=id; 
buyListnumber = 1; 
buyListphoto = photo; 
buyList price = Float.parseFloat(price); 
buyList.warename = name; 
boolean flag = 
/以 代码 是 向 BeyList 类 中 的 属性 赋值 
List shoplist=null; 
过 (session.getAttribute("shop")==nulD){ /判断 session 中 是 否 存在 shop 对 象 
shoplist=new ArrayListO; 
jelsef 
shoplist=(List)session.getAttribute("shop"); 
for(int 二 0:i<shoplist,sizeO:it+){ 
BuyList buyitem=(BuyList)shoplist.get(i); 
这 buyitem id.equals(buyListid)){ 。“”// 判 断 购物 车 中 是 否 已 经 存在 商品 
buyitem.number++; 
shoplist.set(i,buyitem); 
flag=false; 
} 
外 


} 

if(flag)shoplist.add(buyList); 
session.setAttribute("shop",shoplist); 

%> 

‘<script language="javascript" type="text/javascript"> 
alert(" 商 品 已 成 功 添加 到 购物 车 "): 
window.location.href="index.jsp"; 

</script> 


国 秘笈 心 法 

本 实例 主要 是 用 session 保存 用 户 的 商品 信息 ， 首 先 判断 session 中 是 否 存在 商品 列表 的 List 集合 ， 如 果 不 
存在 ， 则 创建 一 个 新 的 List 集合 ， 如 果 存 在 ， 则 判断 此 时 添加 的 商品 是 否 存在 于 List 集合 ; 如 果 集合 中 包含 此 
商品 ， 则 不 添加 ， 否 则 将 这 个 商品 添加 到 List 集合 中 ， 最 后 将 List 集合 保存 在 session 中 。 


初级 
实用 指数 ， 良 良友 
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力 实例 说 明 
为 了 方便 用 户 随 时 查看 购物 车 的 情况 ， 在 添加 至 购物 车 页 面 中 单 击 “ 购 买 ”按钮 ， 即 可 打开 “购物 车 ”页 
面 。 通 过 该 页 面 可 以 查看 已 经 放 入 购物 车 内 的 所 有 商品 信息 ， 运 行 结果 如 图 23.18 所 示 。 


: 购物 车 
| | EE EJ 
1 明 华电 讽 20000 名 20000 
2 验 6 电 疯 So 2 ] 10D00.0 
态 合 i 计 金村: 12000.0| 


Wm 


23.18 查看 购物 车 


图 关键 技术 
查看 购物 车 主要 是 将 存储 到 session 中 的 购物 信息 显示 到 页 面 中 ， 实 现 该 功能 的 程序 代码 如 下 : 


| shopList=(List)session.getAttribute("shop"); 
. 这 shopList 一 nulllshopListsizeO 一 0){ 
%> 


图 设计 过 程 
在 查看 购物 车 时 ， 首 先 需要 查看 购物 车 是 否 为 空 。 如 果 为 空 ， 则 需要 将 页 面 重 定向 到 购物 车 首页 面 ， 和 否则 
显示 购物 车 信息 ， 将 保存 在 session 中 的 购物 车 信息 利用 for 循环 语句 输出 到 浏览 器 中 ， 其 关键 代码 如 下 : 


<form name="form" method="post" action="addProductionNumberjsp"> 
<table width="562" border="1" align="center" cellpadding="0" cellspacing="0"> 
<tr align="center" bgcolor="#EFEFEF"> 
<td width="39" height="22"> 序 号 </td><td width="112"> 商 品名 称 </td> 
<td width="98"> 价 格 </td><td width="112"> 数 量 </td> 
<td width="109"> 总 金额 </td> 
</tr> 
<% 
List shopList= (List) session.getAttribute("shop"): 
证 (shopList 一 nulllshopListsizeO 一 0) { 
Re 
ipt language="javascript" type="text/javascript"> 
ee 购物 车 中 没有 物品 "); 
window.location.href="index.jsp"; 
</script> 
<% 
} else { 
float num=0; 
int pric=0; 
for (inti= 0; i< shopList sizeO: i++) { 
BuyList shop = (BuyList) shopList.get(i): 
num=numt shop.number*shop.price; 
%> 
‘<script language="javascript" type="text/javascript"> 
function checkO{ 
value){ 


if(isNaN(form.number<%=i%>. 
le 请 要 栓 入 非法 字符 
Tetum false; 

history.backO: 

De 
alert(" 请 输入 修改 的 数量 "): 
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Tetum false; 
historybackO: 
} 
} 
‘</script> 
<tr align="center" bgcolor="#EFEFEF"> 
<td height="21"><9-i+1%></td> 
<td><%=shop.warename%></td> 
<td><%=shop .price%><input name="id<%=i%%>" type="hidden" size="10" value="<%=shop.id%>"></td> 
<td><input name= "number<9b=i96>" type="text" size="10" value="<%=shop.number%>"></td> 
<td><%=shop number*shop.price%></td> 
</tr> <%}%> 
</table> 
<table width="562" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr align="right"> 
<td height="31" bgcolor="#EFEFEF"> 总 合计 金额 <%=-num96></td> 
</t> 
</table> 
<table width="303" border="0" align="center"> 
<tr align="center" bgcolor="#EFEFEF"> 
<td width="61" height="27"> 
<input type="submit" name="Submit" value=" 修 改 数量 " onClick="return check0"> </td> 
<td width="75"><a href="index.jsp"> 继 续 购物 </a></td> 
<td width="74"><a href="putinjsp"> 清 空 购物 车 </a></td> 
<td width="75"><a href="checkoutjsp"> 去 收银 台 </a></td> 
</tr> 
</table> </form> 
<%}%> 


图 秘笈 心 法 


查看 购物 车 ， 主 要 是 从 session 中 取出 商品 列表 的 List 集合 ， 然 后 循环 这 个 集合 ， 将 所 有 商品 信 


面 中 即 可 。 


实例 593 炊 量 及 从 购物 车 中 移 除 指 定 商品 初级 


息 显示 在 页 


实用 指数 :去 丰 页 


国 实例 说 明 


为 了 满足 用 户 的 不 同 需 要 ， 购 物 车 中 还 需要 加 入 指定 商品 购买 数量 的 功能 。 在 购物 车 中 ， 由 于 


商品 的 数量 


被 存放 在 文本 框 中 ， 用 户 只 需要 在 某 种 商品 后 面 的 “数量 ”文本 框 中 输入 相应 的 数量 ， 单 击 “ 修 改 数量 ”按钮 
即 可 修改 数量 。 当 在 “数量 ”文本 框 中 输入 数字 0 时 ， 则 为 移 去 该 商品 。 程 序 运行 结果 如 图 23.19 所 示 。 


购物 车 
Ga 商品 名称 2 | E 
1 EE 0000 | 下 | 000.0 
日 珊 B 讨 | 5%00 | EE 10000 0 


入 避 匠 和 总 六 由 。 洁 全 兴 物 车 。 去 r 扩 


图 23.19 ”修改 商品 购买 数量 及 从 购物 车 中 移 去 指定 商品 


图 关键 技术 


当 在 文本 框 中 输入 0 时 ， 则 是 从 购物 车 中 移 去 该 商品 。 移 去 该 商品 的 程序 代码 如 下 : 
listremove(buyLisb: 
list 是 List 类 的 对 象 ， 它 存在 于 javautil.* 包 中 。 


图 设计 过 程 
单 击 “ 修 改 数量 ”按钮 触发 的 是 addProductionNumberjsp 页 面 ， 该 页 面 主要 实现 修改 商品 数量 的 功能 ， 主 
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要 程序 代码 如 下 : 
<%@ page contentType="text/html; charset-GBK" language="java” import="java.sql.*" errorPage="" 9%6> 
<%@ page import="java.util.+"9%6> 
区 page import="com.dao.BuyList"%> 
List list=(List)session.getAttribute("shop"); 
for(int i=0;i<list.sizeO:i++){ 
String number-request.getParameter("number"+i); 。 // 通 过 for 循环 取得 文本 框 的 数据 
int changeNumber=Integer.parseInt(number); 
这 changeNumber<0){ // 如 果 取 出 的 数据 小 于 0， 则 返回 上 一 页 面 
%> 


<script language="javascript" type="">history.backO:</script> 
< 
} else{ 


String id=request.getParameter("id"+ti); 
BuyList buyList=(BuyList)list.get(D); 
ii Tistid)){ 


int newnum=IntegerparseInt(request.getParameter("number"+i): 
if(newnum!=0){ 
buyList.number=newnum:; 
Jelse{ 
list.remove(buyList); 
} 
jcatch(Exception e){ 
out.printin("<script language=javascript>alert( 您 输入 的 数量 不 是 有 效 的 整数 '"):history.backO;</script>"); 
Tetumn; 
} 
}} 
session.setAttribute("shop",list); 
>: 


图 秘笈 心 法 
从 购物 车 中 移 除 商品 ， 也 就 是 从 List 集合 中 移 除 某 个 元 素 ， 首 先 从 session 中 取出 购物 车 的 List 集合 ， 然 后 
再 根据 用 户 选择 的 要 移 除 的 商品 ， 从 List 集合 中 移 除 相对 应 的 元 素 


实例 594 初级 


实用 指 效 : 女 亦 页 


图 实例 说 明 


在 实例 593 中 已 经 介绍 了 如 何 从 购物 车 中 移 除 指定 的 商品 ， 下 面 将 介绍 一 种 
将 购物 车 中 的 全 部 商品 一 次 性 清空 的 方法 ， 即 清空 购物 车 。 清 空 购物 车 的 实现 方 
法 很 简单 ， 只 需要 将 保存 在 session 中 的 购物 信息 清空 即 可 。 运 行 结果 如 图 23.20 
所 示 。 Ee 


关键 技术 23.20 清空 购物 车 


除了 设 定 session 变量 的 生命 周期 ， 用 户 暂 停 浏览 动作 超过 一 定时 间 后 ， 变 量 中 的 存储 值 就 会 自动 消失 外 ， 
还 可 以 使 用 invalidate0 方 法 将 所 有 的 session 变量 清除 。 本 实例 应 用 invalidate0 方 法 ， 语 法 如 下 : 

共 中 。iaaliaale0 用 于 销毁 session 对 象 。 
图 设计 过 程 

将 session 中 的 购物 信息 清空 的 程序 代码 如 下 : 


<% session invalidate096> 


/NN mete 


Java Web 开发 实例 大 全 (基础 卷 ) 


图 秘笈 心 法 
清空 购物 车 ， 也 就 是 将 session 对 象 中 保存 的 List 集合 清除 ， 应 用 session 对 象 的 mvalidate( 方 法 可 以 将 所 
有 的 session 变量 清除 。 


高 级 


实例 595 
实用 指数 : 食 食 食 


图 实例 说 明 

如 同 在 超市 中 购物 一 样 ， 将 商品 保存 到 购物 车 中 并 不 是 网 上 购物 的 最 终 目 的 ， 而 到 收银 台 结 账 后 ， 才 算 一 
次 购物 的 最 终 完 成 。 前 面 所 有 功能 都 是 为 最 后 生成 一 个 用 户 满意 的 订单 
做 准备 。 生 成 订单 时 ， 不 仅 要 保存 用 户 订单 中 所 购买 的 商品 信息 和 订单 
信息 ， 同 时 还 需要 返回 一 个 可 供用 户 随时 查询 的 订单 号 。 用 户 单 击 查看 
购物 车 页 面 中 的 “去 收银 台 ” 超 链接 即 可 进入 到 收银 台 结 账 页 面 输入 订 
单 信息 ， 订 单 信息 输入 完成 后 ， 单 击 “ 提 交 ” 按 钮 即 可 保存 订单 信息 到 
数据 表 中 。 运 行 结果 如 图 23.21 所 示 。 


] 
] 
] 
Enail lewSwy163S8163 com ] 
用 户 地 站 EX] 

] 

] 


电话 15166767677687675 
图 关键 技术 上 区 
在 收银 台 结账 页 面 中 ， 首 先 应 该 判断 用 户 是 否 已 经 购物 ， 然 后 判断 图 2321 收银 台 结 几 


用 户 是 否 已 经 登录 ， 如 果 用 户 没 有 购物 或 没有 登录 都 将 给 予 提示 并 返回 
到 网 站 首页 ， 否 则 显示 输入 订单 信息 的 表单 。 

用 户 在 收银 台 页 面 输入 订单 信息 后 ， 单 击 “ 提 交 ” 按 钮 将 进入 到 保存 订单 页 面 ， 将 订单 信息 分 别 保存 到 订 
单 主 表 和 订单 明细 表 中 。 保 存 订单 信息 页 面 可 以 通过 以 下 步骤 实现 : 

(1) 为 保存 订单 信息 做 准备 。 判 断 购物 车 是 否 为 空 ， 判 断 用 户 是 否 已 经 登录 。 

(2) 获取 订单 信息 。 首 先 通过 session.getAttribute("shop") 获 取 商 品 信 息 , 然后 保存 到 订单 主 表 和 明细 表 中 。 
图 设计 过 程 

单 击 “提交 ”按钮 将 进入 到 保存 订单 页 面 。 首 先 将 订单 的 概要 信息 保存 到 订单 主 表 中 ， 同 时 返回 该 订单 纺 
号 ， 然 后 通过 for 循环 语句 插入 订单 明细 表 信 息 ， 关 键 代 码 如 下 : 

<9%GQpage contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage=""%> 

<%@page import="com.dao.BuyList"%> 


<%@page import="java.util.*"%%> 
<jsp:useBean id="connection" scope="request" class="com.tool.JDBConnection"/> 


<% 
request.setCharacterEncoding("GBK"): 
String orderNumber = "orderNumber"): 


String post = request.getParameter("post"); 
String sqlOrderMan = "insert into tb shop orderMan values(" + orderNumber + "." + name + "."+realName + "." + email+"™,"+ post+"."+tel 


List list = (List) session. getAttribute("shop"): 
for (inti= 0; i< list.size|; it+) { 
BuyList buy = (BuyList) list.get(); 
String sqlOrderPr = "insert into tb_shop_orderProduction values (" + orderNumber + "." + buy.warename + "," + buy.id + "." + buy.photo + ™," 4 
buyprice + ™," + buy.number + ")"; 
connection.executeUpdate(sqlOrderPr); 


%> 
国 秘笈 心 法 
收银 台 结账 ， 主 要 就 是 将 用 户 的 联系 信息 作为 订单 ， 保 存 到 数据 库 中 即 可 。 


23.5 聊 天 室 


随 着 互联 网 的 飞速 发 展 ， 聊 天 室 这 种 比较 古老 的 交流 方式 已 经 被 众多 人 所 认可 。 通 过 聊天 室 在 线 聊 天 已 成 
为 网 络 上 人 与 人 之 间 沟 通 、 交 流 和 联系 的 一 种 方式 。 为 此 ， 越 来 越 多 的 网 站 开始 提供 在 线 聊 天 的 功能 。 下 面 通 
过 几 个 实例 介绍 如 何 设计 不 同 风格 、 不 同 功 能 的 聊天 室 。 


图 实例 说 明 


说 到 聊天 室 ， 大 家 都 不 会 陌生 ， 相 信 许 多 人 都 有 过 上 网 聊天 的 经 历 ， 那 么 该 如 何 制作 自己 的 聊天 室 呢 ? 本 
实例 主要 应 用 Application 对 象 实现 聊天 室 程序 。 运 行程 序 ， 首 先 登录 聊天 室 ， 在 “昵称 ”文本 框 中 输入 用 户 登 
录 的 昵称 ， 单 击 “我 要 聊天 ”按钮 进入 聊天 室 ， 此 时 就 可 以 看 到 聊天 室 中 所 有 人 的 相关 信息 。 程 序 运行 结果 如 
图 23.22 和 图 23.23 所 示 。 


信 什 么 也 


人 TM 
: 淮 汪 是 近 投 见 到 你 虽 1 


] | au | 


图 23.22 ”聊天 室 登 录 页 面 图 23.23 ”聊天 室 主 界面 


国 关键 技术 


在 本 实例 中 主要 应 用 Application 对 象 的 3 个 方法 。 

口 ” application.getAttribute(String name): 返回 由 name 指定 名 字 的 Application 对 象 的 属性 值 。 

口 application.setAttribute(String name,Object objecb: 设置 由 name 指定 名 字 的 Application 对 象 的 属性 值 
object。 

口 application removeAttribute(""): 清除 Application 指定 对 象 。 


图 设计 过 程 
〈1) 当 用 户 输入 自己 的 昵称 后 ， 单 击 “我 要 聊天 ”按钮 直接 进入 聊天 室 的 页 面 ， 如 图 23.23 所 示 。 该 页 面 


主要 由 4 部 分 组 成 ， 上 侧 页 面 (left_ topjsp)、 显 示 聊 天 内 容 的 页 面 (leftjsp)、 发 送 聊 天 信息 的 页 面 (downjsp) 
以 及 显示 在 线 聊 友 的 页 面 (rightjsp)， 这 些 页 面 的 导入 代码 在 main.jsp 页 面 中 ， 该 页 面 的 代码 如 下 : 
全” 


外 
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<frameset rows="+*" cols="1*.1024.1*" framespacing="0" frameborder="no" border="0"> 
<frame ste="blank. htm" name="BLFrame” scrolling="no" noresize="noresize"> 
<frameset rows="+*" cols="*,182" framespacing="0" frameborder="no" border="0"> 
<frameset rows="*.95" cols="*" framespacing="0" frameborder="no" border="0"> 
<frameset rows="103,+" cols="*" framespacing="0" frameborder="no" border="0"> 
<frame sre="left_topjsp" name="leftTopFrame"> 
<frame sre="leftjsp" name="mainFrame"> 
</frameset> 
<frame ste="down jsp" name="bottomFrame" scrolling="NO" noresize> 
</frameset> 
<frame src="rightjsp" name="rightFrame" scrolling="NO" noresize></frameset> 
<frame src-"blank htm" name="BLFrame" scrolling="no" noresize="noresize"> 


</frameset> 
<noframes> 

(2) 显示 聊天 内 容 的 页 面 (leftjsp)， 主 要 通过 JavaSeript 代码 实现 刷新 页 面 ， 并 分 行 显示 聊天 的 记录 ， 关 

键 代 码 如 下 : 
<scriptlanguage="JavaScript" type="text/javascript"> 
function GetData(urD{ 
|="deal With.jsp?action=showMessage"; /调用 页 面 

ty{ 
Load .src =url; 
window.location.href="left.jsp#bottom"; // 刷 新 页 面 到 底部 
jcatch(e){ 
Tetum false; 
} 
Var timeoutid = setTimeout("GetData0",2000): /每 隔 2 秒 调用 一 次 GetData0 函 数 
} 
‘</script> 
<script id=" Load " language="JavaScript" type="text/javascript" defer></script> 
</head> 


<body onLoad="GetData0;" bgcolor="#FFEBB8"> 
<span id="loadContent"><br> 欢 迎 来 到 本 聊天 室 ! </span> 
<a name="bottom"> </a> 
(3) 发 送 聊天 信息 的 页 面 (downjsp)， 主 要 实现 用 户 在 文本 框 中 输入 内 容 后 ， 单 击 “ 发 送 ”按钮 将 信息 传 
递 到 leftjsp 页 面 ， 关 键 代 码 如 下 : 
<script language="javascript"> 
function check(forml){ 
让 (forml.contentvalue 一 "falert(" 请 输入 内 容 ! "Jretum false;} 1/ 判断 是 否 输入 聊天 内 容 
} 
</script> 
<form name="form1" method="post" action="dealWith.jsp?action=sendMessage" onSubmit="return check(form1)"> 
<table width="702" border="0" align="center" celipadding="0" cellspacing="0"> 
<tr> 
<td width="101" align="right"><9%=session.getAttribute("username") %> 说 : &nbsp:</td> 
<td width="434"><input name="content" type="text" size="70"> 
</td> 
<td width="167"><input name="Submit" type="submit" class="btn_grey" value=" 发 送 "> 
&nbsp; 
<input name="Submit2" type="button" class="btn grey” 
onClick="parent.location.href='deal With.jsp?action=loginOut:" value=" 退 出 聊天 室 "> 
</td> 
</tr> 
</table> 
</form> 


(4) 显示 在 线 人 数 的 页 面 (rightjsp) 的 关键 代码 如 下 : 
<scriptlanguage="JavaScript"> 
function GetData(url){ 
url="dealWith.jsp?action=showMsg"; /调用 页 面 
try{ 
DataLoad.sre = trl:; 
jcatch(ej{ 
Tetum false: 


机 
var timeoutid = setTimeout("GetData0".2000): /| 每 隔 2 秒 调 用 一 次 GetDate0 函 数 
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</script> 
<script 

</head> 
<body onLoad-"GetData0:” background="images/rightjpg"> 


id-"DataLoad" language="JavaScript" type="textjavascript" defer ></script> 


<div align="center"> 所 有 人 <span id="loadContent"> 数 据 加 载 中 ……</span> </div> 


9hiftsession.getAttribute("username")—null) { 


out.printin("<script language=javascript >parent location href"index jsp':</script>"); 


}%> 
<Jbody> 


(5) 业务 处 理 页 面 (dealWithjsp) 是 整个 聊天 室 的 关键 , 它 通 过 半 语 句 判断 action 参数 值 来 进行 不 同 的 操 


作 ， 关 键 代 码 如 下 : 


<%6@page contentType="text/html; charset-GBK" language="java"import="java.util.+" errorPage—""%6> 


<%!String msg:%> 
<% 
request.setCharacterEncoding("GBK"); 
String action = request.getParameter("action"); 
boolean flag = true; 
if (action.equals("login")) { 
application_setAttribute("flag" "true”); 
String username = request.getParameter("username"); 
List userList = (List) application.getAttribute("userList"); 
if (application.getAttribute("userList") 一 nulD) { 
UserList = new ArrayList(); 
}else{ 
for (int i= 0; i < userList.sizeO: it+) { 
String user = (String) userList.get(i); 
if (user.equals(username)) { 
flag = false; 


上 


} 

/以 上 代码 判断 用 户 是 否 在 线 

if (flag) { 
userList.add(username); 
application.setAttribute("userList", userList); 
session.setAttribute("usemame", username); 
Tesponse.sendRedirect("main.jsp"); 

}else { 


/获取 action 参数 值 
/用 户 登 录 


/从 Application 中 获取 用 户 列表 


// 通 过 循环 判断 登录 的 用 户 名 是 否 存在 
/ 苞 取 一 个 用 户 


/保存 用 户 列表 到 session 中 
/保存 用 户 名 到 session 中 
// 将 页 面 跳 转 到 聊天 室 主 界面 


out.println("<script language='javascript >parent.location.href="index.jsp?result=1";</script>"); 


} 
} 


if (action.equals("loginOut")) { 
application.setAttribute("flag", "false"): 
String usemame = (String) session.getAttribute("username"); 
List userLi 


= (List) application.getAttribute("userList"): 
i< UserList,sizeO; 计 +H) { 

String user = (String) userListget(D: 
if(user.equals(username)) { 

userList.remove(D): 

session_invalidateO: 


/离开 聊天 室 


1/ 从 用 户 列表 中 移 除 指定 用 户 
// 清 空 session 


out.printin("<script language='javascript>parent.location.href="index.jsp';</script>"); 


} 
if (userList.size| — 0) { 
application.removeAttribute(“"message”"); 
上 
; Tesponse.sendRedirect("index.jsp"); 
f(action.equals("showMsg")) { 
String mm = (String) application getAttribute("flag"); 
String usermame = ""; 
if (application. getAttribute("“userList") != null) { 
List userList = (List) application.getAttribute(“userList"); 
for (int i= 0: i < userList sizeO: tt) { 
String name = (String) userList.get(i): 


Usemame = usemame + "<br><br>" + name; 


/从 Application 中 删除 聊天 记录 


// 查 询 在 线 人 数 


/从 Application 中 获取 用 户 列表 


1/ 组 合 在 线 用 户 列表 
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} 
application.setAttribute("flag". "false 


‘out.printin("loadContent.innerHTMI=\"" + username + "\";"); // 显 示 在 线 用 户 列表 
} 
f(action.equals("sendMessage")) { /发 表 信息 

让 msg 一 nul) 


msg= "<br> 欢 迎 进入 聊天 室 ": 


} 
msg = (String) msg + "<br>" + session.getAttribute("usemame") 
+ ":" + (String) request.getParameter("content"); /组 合 聊天 内 容 

Tesponse.sendRedirect("downjsp"); // 将 页 面 重 定向 到 downjsp 页 面 
} 
if (action.equals("showMessage”)) { 

if (msg ‘=nulD) { 

out.printin("loadContent.innerHTML=\"" + msg + "\";"); // 显 示 聊 天 内 容 列 表 
} 


} 
%> 


图 秘笈 心 法 

由 于 该 聊天 室 是 应 用 Application 对 象 实现 的 ,所 以 聊天 信息 是 保存 在 Application 对 象 中 的 。 利 用 Application 
对 象 保存 信息 时 ， 当 服务 器 重新 启动 后 ，Application 对 象 中 的 数据 将 全 部 清空 。 这 个 是 Application 对 象 的 最 大 
特点 。 


高 级 


实例 597 | 
实用 指数 : 全 让 页 ， 


图 实例 说 明 

通常 的 聊天 室 都 会 带 有 私 聊 功能 。 所 谓 私 聊 就 是 私 聊 信 息 只 有 发 言 人 和 接收 入 可 以 看 到 该 信息 ， 其 他 用 户 
不 能 看 到 该 信息 ,这 样 可 以 保证 用 户 间 的 悄悄 话 不 被 其 他 人 看 到 。 本 实例 将 介绍 通过 JSP+Ajax 实现 带 私 聊 功能 
的 聊天 室 。 运 行 本 实例 ， 在 用 户 登录 页 面 中 输入 用 户 昵 称 ， 单 击 “ 登 录 ” 按 钮 ， 可 以 进入 到 聊天 室 的 主 界面 ， 
在 该 页 面 中 ， 用 户 之 间 可 以 进行 交流 ， 如 果 想 要 与 某 个 用 户 进 行 私 聊 ， 可 以 选中 “悄悄 话 ” 复 选 框 。 实 例 运 行 
结果 如 图 23.24 所 示 。 
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图 23.24 聊天 室 主 界面 


图 关键 技术 

本 实例 中 主要 应 用 的 技术 是 Ajax 重 构 、Application 对 象 和 Vector 类 的 相关 方法 。 关 于 Ajax 重 构 的 方法 请 
参见 第 10 章 ，Application 对 象 的 详细 介绍 请 参见 实例 596。 下 面 对 Vector 类 进行 详细 介绍 。 

Vector 类 是 一 元 集合 ， 可 以 加 入 重复 数据 ， 它 的 作用 和 数组 类 似 ， 可 以 保存 一 系列 数据 ， 它 的 优点 是 可 以 
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很 方便 地 对 集合 内 的 数据 进行 查找 、 增 加 、 修 改 和 删除 等 操作 。 下 面 介绍 Vector 类 的 常用 方法 。 
add(int index,Object element): 在 指定 的 位 置 添加 元 素 。 
addElementAt(Object obj,int index): 在 Vector 类 的 结尾 添加 元 素 。 
size0: 返回 Vector 类 的 元 素 总 数 。 
elementAt(int index): 取得 特定 位 置 的 元 素 ， 返 回 值 为 整 型 。 
setElementAt(object obj,int index): 重新 设 定 指定 位 置 的 元 素 。 
TemoveElementAt(int index): 删除 指定 位 置 的 元 素 。 
图 设计 过 程 
(1) 实现 登录 聊天 室 。 

编写 聊天 室 登 录 页 面 indexjsp。 该 页 面 主要 用 于 收集 用 户 输入 的 登录 信息 ， 以 及 通过 自 定 义 的 JavaScript 
函数 验证 输入 信息 是 否 为 空 和 是 否 包 括 非法 字符 ， 该 页 面 的 表单 元 素 只 包括 输入 用 户 名 的 文本 框 和 提交 表单 的 
按钮 ， 具 体 代 码 如 下 : 

<form name="form1" method="post" action="Messages?action=loginRoom" onSubmit="return check0"> 

用 户 名 : <input type="text" name="username" class="login"> 

<input name="Submit" type="submit" class="btn_bg" value=" 进 入 "> 

</form> 

编写 用 来 保存 在 线 用 户 和 对 在 线 用 户 进行 具体 操作 的 类 ， 这 里 为 UserInfo， 在 该 类 中 主要 包括 返回 外 界 使 
用 的 实例 对 象 、 添 加 用 户 、 获 取 用 户 列表 和 移 除 用 户 的 方法 。UserInfo 类 的 具体 代码 如 下 : 

package com.Wgh.model; 

import java.util. Vector' 

public class UserInfo { 

Private static UserInfo ee new UserInfo(); 

Private Vector vector = 

/利用 private 这 呈 站， 防止 被 外 界 产生 新 的 instance 对 象 


private UserInfoO { 
this.vector = new Vector(); 


OOOOOO 


} 

1/ 外 界 使 用 的 instance 对 象 

public static UserInfo getInstanceO { 
Tetum user; 


} 
1/ 增 加 用 户 
public boolean addUser(String user) { 
if (user !=nul) { 
this.vector.add(usern); 
Teturn true: 
}else { 
Teturn false; 
} 


} 

/获取 用 户 列表 

public Vector getListO { 
Tetum Vector: 


} 
// 移 除 用 户 
public void removeUser(String user) { 
if (user !=nul) { 
vectorremoveElement(user): 
} 
} 
创建 UserListener 类 ， 主 要 实现 valueBound(HttpSessionBindingEvent arg0) 和 valueUnbound(HttpSession 
BindingEvent arg0) 方 法 ， 用 于 监控 session 中 的 对 象 变化 情况 。 在 valueBound0 方 法 中 向 控制 台 输出 上 线 用 户 的 
信息 ， 在 valueUnbound0 方 法 中 向 控制 台 输 出 下 线 用 户 的 信息 。UserListener 类 的 具体 代码 如 下 : 


package com.wgh.servlet: 
import com.wgh.model.UserInfo; 
import javax.serviet.http. HttpSessionBindingEvent: 
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public class UserListener implements 
javax.servlet http HttpSessionBindingListener { 
private String user; 
private UserInfo container = UserInfo.getInstance0: 
public UserListenerO { 
User =""; 


} 

/设置 在 线 监听 人 员 

public void setUser(String user) { 
this.user 一 User: 


} 
/获取 在 线 监 听 
public String getUser() { 


} 

// 当 session 有 对 象 加 入 时 执行 的 方法 

public void valueBound(HttpSessionBindingEvent arg0) { 
System.out.printin(" 上 线 用 户 : “+ this.user); 


} 
// 当 session 有 对 象 移 除 时 执行 的 方法 
public void valueUnbound(HttpSessionBindingEvent arg0) { 
System.out.printin(" 下 线 用 户 :" + this.user); 
if(user !="") { 
container.removeUser(user); 
} 


} 
} 


/获得 UserInfo 类 的 对 象 


编写 聊天 室 的 Servlet 实现 类 ， 并 在 该 类 中 添加 登录 聊天 室 的 方法 loginRoom0， 在 该 方法 中 ， 首 先 获取 登 
录用 户 ， 然 后 判断 该 用 户 是 否 登录 。 如 果 已 经 登录 ， 给 出 提示 信息 ， 和 否则 将 该 用 户 添加 到 在 线 用 户 列表 中 ， 并 
且 向 Application 对 象 的 聊天 内 容 属 性 中 添加 一 条 系统 公告 信息 ， 最 后 将 页 面 重 定向 到 登录 成 功 页 。loginRoom() 
方法 的 具体 代码 如 下 : 
public void loginRoom(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 


response.setContentType("text/html;charset=GBK"); 
request.setCharacterEncoding("GBK"); 
Chstr chStr=new Chstr0; 
HttpSession session = request.getSession(); 
String username=chStr.toGBK (request.getParameter("username")); 
UserInfo user=UserInfo.getInstance(); 
session.set MaxInactiveInterval(600); 
Vector vector=user. getList(|; 
boolean flag=true; 
1/ 判断 用 户 是 否 登录 
这 Vector!=null&&vector.sizeO>0){ 
for(int i=0:i<vectorsizeO:i+H){f 
这 userequals(vectorelementAt(i))){f 
PrintWriter out: 
ty{ 
out = response.getWriter|; 


/获得 登录 用 户 名 
/[ 获 得 UserInfo 类 的 对 象 
/设置 session 的 过 期 时 间 为 10 分 钟 


1/ 标记 是 否 登 录 的 变量 


out.printin("<script language=javascript>alert(' 该 用 户 已 经 登录 ");window.location.href='index.jsp';</script>"); 


} catch (IOException e) { 
e.printStackTrace(); 
} 
flag=false; 
break: 
} 
六 


站 

/保存 用 户 信息 

if(flag){ 
UserListener ul-new UserListener(): 
ul.setUser(username); 
user.addUser(ul.getUserO): 
session.setAttribute("user".ul); 
session.setAttribute("usemame".username); 


session.setAttribute("loginTime".new DateO toLocalestring0): 


/创建 UserListener 的 对 象 

/添加 用 户 

/添加 用 户 到 UserInfo 类 的 对 象 中 

/将 UserListener 对 象 绑 定 到 session 中 
/保存 当前 登录 的 用 户 名 

/保存 登录 时 间 


ServletContext application=getServletContext(): 
Vector sourceMessage=null; 
if(null!=application.getAttribute("message")){ 
sourceMessage=(Vector)application.getAttribute("“message"); 
jelsef 
sourceMessage=new Vector0; 
本 
MessageForm ImessageForm=new MessageForm(); 
messageForm.setFrom(" 系 统 公告 : "); /1/ 发 言 人 
messageForm.setTo(" 系 统 公告 : "); // 接 收 者 
messageForm.setContent(" 系 统 公 告 : <font color='gray>" + usemame + " 走 进 了 聊天 室 ! </font><br>"); /发 言 内 容 
messageForm.setIsPrivate("false"); // 是 否 为 悄悄 话 
sourceMessage.add(messageForm); 
application.setAttribute("message".soUrceMessage); 
wy{ 
Tequest.getRequestDispatcher("login_ok.jsp").forward(request, response); 
} catch (Exception ex) { 
Logger.getLogger(Messages.class.getName()).log(Level.SEVERE. null, ex); 
} 


} 
编写 登录 成 功 页 login_okjsp, 在 该 文件 中 , 将 页 面 重 定向 到 聊天 室 的 主 界面 。 登录 成 功 页 的 具体 代码 如 下 : 


<%@page contentType="text/html" pageEncoding="GBK"%> 
<%oresponse.sendRedirect("main.jsp");%> 


(2) 编写 聊天 室 主 界面 main.jsp。 该 页 面 共 包括 页 面 头 部 、 聊 天 内 容 显示 区 、 在 线 人 员 列 表 区 和 用 户 发 言 
4 部 分 ， 具 体 布局 如 图 23.25 所 示 。 


able> 
页 面 头 部 
<jtable> 
<td> <td id="online"> 
<div id="content"> 
聊天 内 容 显示 区 在 线 人 员 列 表 区 
</div> 
</td> <ptd> 
<table> 
用 户 发 言 区 
</table> 
图 23.25 主 界面 的 布局 
布局 后 的 主 界面 的 关键 代码 如 下 : 


<!-- 此 处 省 略 了 页 面 头 部 的 HTML 代码 --> 
<table width="778" height="276" border="0" align="center" cellpadding="0" cellspacing="0"> 
<t> 
<td width="599" height="200" valign="top" bgcolor="#fcf5eb" style="padding:5px: "> 
<div style="height:290px: overflow:hidden" id="content"> 聊 天 内 容 </div> 


<td> 
<td width="171" valign="top" background="images/rightjpg" id="online" style="padding:5px"> 

在 线 人 员 列 表 
<td> 

<tr> 
</table> 
<table width="778" height="96" te " align="center" cellpadding="0" cellspacing="0" bordercolor="#D6D3CE" 
background="images/bottom.jpg' 
tie < 族人 省 路 了 基 记 发 言 区 的 代码 ， 该 代码 将 在 实现 用 户 发 言 时 进行 详细 介绍 --> 
</table> 


(3) 重 构 Ajax。 关 于 Ajax 重 构 的 方法 请 参见 第 10 章 。 
(4) 实时 获取 并 显示 在 线 人 员 列 表 。 
在 mainjsp 页 面 中 ,编写 自 定义 的 JavaScript 函数 showOnline0， 用 于 实例 化 Ajax 对 象 。showOnline0 函 数 
的 具体 代码 如 下 : 
function showOnlineO{ 
var loader=new net AjaxRequest("online .jsp?nocache= "十 
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new Date0.getTimeO.deal_online.onerror"GET"): 


} 
在 上 面 的 代码 中 , 一 定 要 加 代码 “?nocache="+new DateO.getTime0”， 和 否则 将 出 现在 线 人 员 列 表 不 更 新 的 情况 。 
创建 onlinejsp 文件 。 在 该 文件 中 ,主要 是 将 保存 到 集合 类 中 的 在 线 人 员 列 表 显 示 到 页 面 。onlinejsp 页 面 的 


代码 如 下 : 
<%@page contentType="text/html" pageEncoding="GBK" %> 
<%@ page import="com-wgh model.UserInfo"9%6> 
<96@ page import="java.util.*"96> 
<% 


UserInfo list=UserInfo.getInstance(); 
Vector vector=list.getList|; 
int amount=0; 
%> 
<table width="1009%" border="0" cellpadding="0" cellspacing="0"> 
<tr><td height="32" align="center" class="word_orange "> 欢迎 来 到 心 之 语 聊天 室 ! </td></tr> 
<t> 
<td height="23" align="center"><a href="#" onclick="set( 所 有 人 "> 所 有 人 </a></td> 
<tr> 
i size()>0){ 
String username="" 
amount=Vector.: ey 
for(int i=0;i<amount:;i++){ 
username=(String)vector.elementAt(i); 
%> 


Eg height="23" align="center"><a href="#" onclick="set("<%=username%>")"><%=username%></a></td> 
<tr> 
De align="center"> 当 前 在 线 [<font color="#FF6600"><%=amount96></font>] 人 </td></tr> 
</table> 
在 聊天 室 的 主 界面 中 ， 将 右 侧 用 于 显示 在 线 人 员 列 表 的 单元 格 的 id 属性 设置 为 online， 用 于 实时 显示 在 线 
人 员 列表 ， 有 具体 代码 如 下 : 
<td width="165" valign="top" bgcolor="#f6fded" id="online" style="padding:5px"> 在 线 人 员 列 表 </td> 
编写 Ajax 的 回调 函数 deal_online0, 用 于 将 获取 的 在 线 人 员 列 表 赋 值 给 id 为 online 的 <td> 标 记 的 innerHTML 
属性 。deal_onlineO 函 数 的 具体 代码 如 下 : 
function deal_onlineO{ 
online.innerHTML=this.req.responseText: 


} 

为 了 让 页 面 载 入 后 就 调用 Ajax 获取 在 线 人 员 列 表 ， 并 且 每 隔 10 秒 钟 便 获 取 一 次 数据 ， 还 需要 在 页 面 中 添 
加 以 下 JavaScript 代码 : 

window.setInterval("showOnlineO):",10000); 

window.onload=functionO{ 

showOnline|; // 当 页 面 载 入 后 显示 在 线 人 员 列 表 

} 

细心 的 读者 可 以 发 现 ， 聊 天 对 象 文本 框 被 设置 为 只 读 属 性 ， 这 样 用 户 就 不 能 手动 输入 聊天 对 象 ， 所 以 还 需 
要 提供 选择 聊天 对 象 的 功能 , 这 可 以 通过 在 主页 面 中 添加 选择 聊天 对 象 的 JavaScript 自 定义 函数 及 在 在 线 人 员 列 


表 上 添加 超 链 接 实现 。 实 现 将 选择 的 聊天 对 象 添 加 到 聊天 对 象 文本 框 的 JavaScript 代码 如 下 : 
<script language="javascript"> 
fanction set(selectPerson){ /自动 添加 聊天 对 象 
if(selectPerson!="$ {usermame}"){ 
forml.to.value=selectPerson: 


{ 
alert(" 请 重新 选择 聊天 对 象 !"); 


Jelse 


} 
} 
/script> 


在 在 线 人 员 列 表 上 添加 超 链接 的 具体 代码 如 下 : 


<a href="#" onclick="set(<%=username%>")"><%=username%></a> 
(5) 实现 用 户 发 言 。 
在 页 面 的 合适 位 置 添加 用 于 收集 用 户 发 言 信 息 的 表单 及 表单 元 素 ， 关 键 代码 如 下 : 
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<form action="" name="form1" method="post" > 
<input name="from" type="hidden" value="$ {username}">[$ {usermame} ] 对 
<input name="to" type="text" value="" size="35" readonly="readonly"> 
表情 
<select name="face" class—"wenbenkuang"> 
<option ”value=" 无 表情 的 "> 无 表情 的 </option> 
<option value-" 微 笑 着 " selected> 微 笑 着 </option> 
<!-- 此 处 省 略 了 添加 其 他 列表 项 的 代码 --> 
<option value=" 无 精 打 采 的 "> 无 精 打 采 的 </option> 
</select> 
说 :悄悄话 
<input name="isPrivate" type="checkbox" class="noborder" id-"isPrivate" value="true" onClick="checkIsPrivate0"></td> 
<td width="189" align="left"> &nbsp:&nbsp: 字 体 颜色 : 
<select name="color" size="1" class="wenbenkuang" id="select"> 
<option selected> 默 认 颜色 </option> 
<option style="color:-#FF0000" value="FF0000"> 红 色 热 情 </option> 
<! 一 此 处 省 略 了 添加 其 他 列表 项 的 代码 -> 
<option style="color:#999999" value="999999"> 烟 雨 蒙蒙 </option> 
</select> 
<input name="content1" type="text" size="70" onKeyDown="iflevent keyCode—13 &é& event.ctrlKey) {sendO;}"> 
<input name="Submit2" type="button" class="btn_grey" value=" 发 送 " onClick="sendO"> 
<input name="button_exit" type="button" class="btn_grey" value=" 退 出 聊天 室 " onClick="Exit0"> 
</form> 
编写 自 定义 的 JavaScript 函数 snd0， 用 于 调用 Ajax 实现 用 户 发 言 。 在 该 函数 中 ， 首 先 验证 用 户 输入 信息 
的 合法 性 ， 然 后 再 将 提交 的 表单 元 素 的 内 容 连接 为 一 个 参数 字符 串 ， 并 实例 化 Ajax 对 象 。sendO 函 数 的 具体 代 
码 如 下 : 
function sendO{ /验证 聊天 信息 并 发 送 
if(form!l .to.value—""){ 


alert(" 请 选择 聊天 对 象 ! ");return false; 


这 forml.contentl.value 一 ""){ 
alert(" 发 送信 息 不 可 以 为 空 ! "):forml.contentl.focusO:returmn false; 


} 

if(forml .isPrivate.checked){ // 确 定 悄悄 话 变量 的 值 
isPrivate="true"; 

Jelse{ 


} 
Var param="from="+form!1 .from.value+"&risPrivate="+isPrivate+"&face="+form!l face.value+"&color="+ 
form!l.color.value+"&to="+forml .to.valuet"&content="+ forml.contentl.value:; 
Var loader=new net.AjaxRequest("Messages?action=sendMessage",deal_send.onerror,"POST".param); 


} 
在 聊天 室 相关 的 Servlet 实现 类 中 ， 添 加 发 送 聊 天 信息 的 方法 sendMessages()。 在 该 方法 中 ， 首 先 获取 并 保 
存 用 户 发 言 相关 信息 到 MessageForm 的 对 象 messageForm 中 ， 在 获取 时 需要 对 可 能 出 现 中 文 的 信息 进行 转 码 ， 
然后 将 messageForm 保存 到 Vector 中 ， 最 后 将 保存 聊天 内 容 的 Vector 保存 到 Application 中 ， 并 重 定向 网 页 。 
sendMessages() 方 法 的 具体 代码 如 下 : 
public void sendMessages(HttpServletRequest request, HttpServletResponse response) 
throws ServletException, IOException { 
response.setContentType("text/html:charset=-GBK"); 
request.setCharacterEncoding("GBK"): 
Chstr chStr=new ChStrO: 
Random random = new Random():; 
MessageForm messageForm—new MessageForm(); 


isPrivate="false"; 


messageForm.setFrom(chStr.toUTF8(request.getParameter("from"))); /发 言 人 
messageForm.setFace(chStr.toUTF8(request.getParameter("face"”))); /表情 
messageForm.setTo(chStr.toUTFS8(request.getParameter("to"))):; /接收 者 
messageForm.setColor(request.getParameter("color")): /字体 颜色 
messageForm.setContent(chStr.toUTFS(request.getParameter("content"))); // 发 言 内 容 
messageForm.setIsPrivate( request.getParameter("isPrivate")); // 是 否 为 悄悄 话 
messageForm.setSendTime( new DateO toLocaleStringO): /发言 时 间 


ServletContext application = getServletContextO: 
Vector sourceMessage=(Vector)application.getAttribute("message”): 
sourceMessage.add(messageForm); 
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application_setAttribute("message". sourceMessage): // 将 聊天 信息 保存 到 Application 中 
Tequest.getRequestDispatcher("Messages?action=getMessagesénocache—" + 
Tandom.nextInt(10000)).forward(request, response):; // 重 定向 页 面 


} 

(6) 实现 实时 显示 聊天 内 容 。 
编写 自 定义 的 JavaScript 函数 showContent0， 用 于 实例 化 Ajax 对 象 。showContent0 函 数 的 具体 代码 如 下 : 
function showContentO{ 


Var loaderl=new net.AjaxRequest("Messages?action=getMessages&-nocache="+ 
new Date().getTime(),deal_content.onerror,"GET"); 
} 


在 聊天 室 相 关 的 Servlet 实现 类 中 ， 编写 getMessages() 方 法 ， 用 于 将 聊天 室 信息 组 合成 字符 串 ， 并 传递 到 显 
示 聊 天 内 容 的 JSP 页 面 。 在 组 合 过 程 中 ， 需 要 对 私 聊 信息 进行 处 理 。getMessages0 方 法 的 具体 代码 如 下 : 


public void getMessages(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException { 
Tesponse.setContentType("text/html;charset=GBK"); 
Tequest.setCharacterEncoding("GBK"); 
ServletContext application = getServietContextO; 
Vector sourceMessage=(Vector)application.getAttribute("message"): 
HttpSession session=request.getSession(); 


for(int i=0:i<sourceMessage.sizeO:i+H){ 
MessageForm f=(MessageForm)sourceMessage.get(D); 
if("true".equals(f.getIsPrivateO)) { 
String from=f.getFrom(); 
String to=f.getToO; 
这 session.getAttribute("username'").equals(to) || session.getAttribute("username").equals(from)){ 
msg += "<font color='Ted>[ 私 人 对 话 ]</font><font color=blue><strong>" + fgetFrom0 十 
"</strong></font><font color=#CC0000'>" + f.getFaceQ| + "</font> 对 <font color= green'>["+fgetTo0 + 
"</font> 说 : "+ "<font color=" +f.getColor0 + ">" 十 fgetContentO + "</font> (" 十 
f.getSendTimeQ| +") <br>"; 


} 
Jelse{ 
ns && "系统 公告 : ".equals(f getFromO)){f 
msg +=f.getContent(); 
we += "<font color='blue'’><strong>" + f.getFrom() + "</strong></font><font color=#CC0000'>"+ 
f.getFaceO + "</font> 对 <font color='green'>[" +fgetTo0 + "]</font> 说 : "+ "<font color=" + 
fgetColor0 + ">" +f.getContent| +"</font> ("+fgetSendTimeO +") <br>"; 
} 
; } 
Tequest.setAttribute("msg", msg): /保存 聊天 信息 
Tequest.getRequestDispatcher("content.jsp").forward(request, response); // 重 定向 页 面 
} 
编写 显示 聊天 内 容 的 contentjsp 页 面 , 在 该 页 面 中 只 需要 应 用 EL 表达 式 将 返回 的 执行 结果 输出 即 可 ,具体 
代码 如 下 : 
<%(Dpage contentType="text/html" pageEncoding="GBK" %> 
S${msg} 
在 聊天 室 的 主 界面 中 ， 在 左 侧 用 于 显示 聊天 内 容 的 单元 格 中 ， 添 加 一 个 id 属性 为 content 的 <div> 标 记 ， 用 
于 实时 显示 聊天 内 容 ， 有 具体 代码 如 下 : 
<div style="height:290px: overflow:hidden" id-"content"> 聊 天 内 容 </div> 
编写 Ajax 的 回调 函数 deal_content0， 在 该 函数 中 ， 首 先 获取 Ajax 处 理 页 的 返回 值 ， 然 后 去 除 字符 串 中 的 
Unicode 空白 符 ， 最 后 判断 在 获取 信息 时 是 否 产 生 错 误 ， 如果 是 ， 则 退出 聊天 室 ， 否则 将 获取 的 聊天 内 容 赋 值 给 
id 为 content 的 <div> 标 记 的 innerHTML 属性 。deal_content0 函 数 的 具体 代码 如 下 : 


function deal_contentO{ 


var returnValue=this.req.responseText: /获取 Ajax 处 理 页 的 返回 值 
var h=returnValue.replace(/\s/g.""): // 去 除 字符 串 中 的 Unicode 空白 符 
ifh 一 "emror{ 
ExitO: 
Jelse{ 


content.innerHTMI=sysBBS+retumValuet+"</span>"; 
// 当 聊天 信息 超过 一 屏 时 ， 设 置 最 先 发 送 的 聊天 信息 不 显示 
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document.getElementById('content).scrollTop = document.getElementById(content).scrollHeight*2: 
} 


} 

为 了 让 页 面 载 入 后 就 调用 Ajax 获取 聊天 内 容 ， 并 且 每 隔 1 秒 钟 便 获取 一 次 数据 ， 还 需要 在 页 面 中 添加 以 下 
JavaScript 代码 : 

windowsetInterval("showContent0:".1000): 

window.onload=functionO{ 

showContentO; // 当 页 面 载 入 后 显示 聊天 内 容 

} 

(7) 实现 退出 聊天 室 。 

编写 自 定义 的 JavaScript 函数 Exit0)， 在 该 函数 中 首先 将 页 面 重 定向 到 退出 聊天 室 页 面 leavejsp， 然 后 再 弹 
出 “欢迎 您 下 次 光临 !” 对 话 框 ， 具 体 代码 如 下 : 

function ExitO{ 

window.location.href="leave.jsp"; 

alert(" 欢 迎 您 下 次 光临 1 "); 


} 

在 “退出 聊天 室 ” 按 钮 的 onClick 事件 中 调用 自 定义 的 JavaScript 函数 Exit0， 关 键 代码 如 下 : 

<input name="button_exit" type="button" class="btn_grey" value=" 退 出 聊天 室 " onClick="Exit0"> 

编写 退出 聊天 室 页 面 leavejsp， 在 该 页 面 中 ， 首 先 销毁 session， 然 后 将 页 面 重 定 向 到 登录 页 面 。leave.jsp 
页 面 的 代码 如 下 : 


<9%G@page contentType="text/html" pageEncodine="GBK" %> 
<% 


session.invalidate(); /清空 session 
Tesponse.sendRedirect("index.jsp"); // 重 定向 页 面 
%> 

国 秘笈 心 法 


HttpBindingListener 接口 的 valueBound0 方 法 在 有 对 象 加 入 session 时 会 被 自动 执行 , 而 valueUnbound0 方 法 
则 是 有 对 象 从 session 中 移 除 时 会 被 自动 执行 。 


实例 598 


图 实例 说 明 

在 实例 596 和 实例 597 中 ， 聊 天 记录 均 保存 在 Application 对 象 中 ， 这 样 当 服务 器 关闭 后 ， 聊 天 记录 将 被 自 
动 删除 。 本 实例 将 介绍 一 种 将 聊天 记录 保存 到 XML 文件 中 的 聊天 室 ， 这 样 聊天 记录 将 不 会 被 自动 删除 ， 方 便 
以 后 进行 查找 。 运 行 本 实例 ， 在 用 户 登 录 页 面 中 输入 用 户 昵称 ， 单 击 “ 登 录 ” 按 钮 ， 可 以 进入 到 聊天 室 的 主 界 
面 ， 在 该 页 面 左 侧 的 在 线 用 户 列表 中 ， 将 显示 最 新 的 用 户 列表 及 在 线 人 数 ; 在 右 侧 的 聊天 内 容 显示 区 中 ， 将 实 
时 显示 最 新 的 聊天 信息 ， 当 聊天 信息 超过 一 屏 后 ， 将 自动 滚屏 ; 在 下 方 的 用 户 发 言 区 ， 用户 可 以 发 送 聊天 信息 。 
实例 运行 结果 如 图 23.26 所 示 。 


图 关键 技术 


本 实例 中 应 用 的 主要 技术 是 Ajax 重 构 、Java 的 文件 操作 类 (java.io.File 类 和 java.io FileOutputStream 类 ) 
和 通过 JDOM 解析 XML 文件 。 

JDOM 因 其 简洁 易 懂 的 API 被 广泛 地 使 用 。JDOM 提供 了 orgjdom、org.jdom.input、org.jdom.output、 
org.jdom.adapters 和 orgjdom ransform 包 。orgjdom 包 中 的 类 是 解析 XML 文件 所 要 用 到 的 所 有 数据 类 型 ， 
org.jdom.input 和 org.jdom.output 两 个 包 分 别 用 来 处 理 XML 内 容 的 输入 、 输 出 。 下 面 介绍 JDOM 解析 XML 文 
件 时 用 到 的 类 。 

口 SAXBuilder 类 : 当 要 读 取 xml 资源 时 ， 要 使 用 input 包 中 的 SAXBuilder 类 从 输入 流 构建 文档 对 象 。 
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= 


图 23.26 ”聊天 室 的 主 界面 


口 Document 类 : 该 类 代表 文档 对 象 。 

口 、Element 类 : 该 类 代表 XML 元 素 。 

口 Comment 类 : 该 类 代表 XML 文件 中 的 注释 。 
例如 ， XML 文件 中 的 内 容 如 下 : 


<?xml version="1.0" encoding="GBK"?> 
<bookroom> 
<book> 


<bookname> 
Java 数据 库 系统 开发 案例 精 选 
</bookname> 


<author> 


</bookroom> 

上 述 文档 用 Document 来 抽象 ，bookroom 是 文档 的 根 元 素 ， 用 Element 类 封装 ， 可 以 通过 Document 对 象 的 
getRootElement() 方 法 获取 Element 对 象 。Element 元 素 可 以 有 子 元 素 ，bookname、author、date、price 都 是 子 元 
素 ， 可 以 通过 Element 对 象 的 getChildren0 方 法 获取 这 些 子 元 素 。“ 王 国 辉 等 ”文本 代表 了 XML 中 的 文本 值 ， 
如 元 素 属性 值 、 元 素 值 、 注 释 的 内 容 等 。 
图 设计 过 程 

(1) 实现 登录 聊天 室 。 

编写 聊天 室 登 录 页 面 indexjsp。 该 页 面 主 要 用 于 收集 用 户 输入 的 登录 信息 ， 以 及 通过 自 定义 的 JavaScript 
函数 验证 输入 信息 是 否 为 空 和 是 否 包 括 非 法 字符 。 

编写 用 来 保存 在 线 用 户 和 对 在 线 用 户 进行 具体 操作 的 类 UserInfo 和 UserListener。 这 两 个 类 的 代码 和 实例 597 
相同 ， 这 里 不 再 资 述 。 

编写 聊天 室 的 Servlet 实现 类 ， 并 在 该 类 中 添加 登录 聊天 室 的 方法 loginRoom0， 在 该 方法 中 ， 首 先 获取 登 
录用 户 ， 然 后 判断 该 用 户 是 否 登 录 。 如 果 已 经 登录 ， 给 出 提示 信息 ， 否 则 将 该 用 户 添加 到 在 线 用 户 列表 中 ， 并 
且 向 Application 对 象 的 聊天 内 容 属性 中 添加 一 条 系统 公告 信息 ， 最 后 将 页 面 重 定向 到 登录 成 功 页 。loginRoom() 
方法 的 具体 代码 如 下 : 


public void loginRoom(HttpServietRequest request, HttpServletResponse response) { 
Tesponse.setContentType("text/html:charset=-GBK"); 
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HttpSession session = Tequest getSession(); 
StringUtils su=new StringUtils0: 
String username=su.toGBK (request.getParameter("username”)); /获得 登录 用 户 名 
UserInfo user=UserInfo.getInstance():; // 获 得 UserInfo 类 的 对 象 
Session .setMaxInactiveInterval(600): /设置 session 的 过 期 时 间 为 10 分 钟 
Vector vector=user. getListO; 
boolean flag=true; 1/ 标记 是 否 登录 的 变量 
/判断 用 户 是 否 登录 
这 vector'-null&c&cvectorsizeO>0){ 
for(int i=0;i<vectorsizeO:i++){ 
if(user.equals(vector.elementAt(i)){ 
PrintWriter out: 
ty{ 


ont = Tesponse .getWiiterO: 


outprintln("<scriptlanguage=javascript>alert(' 该 用 户 已 经 登录 ):window :location href-indexjsp':</script>"); 


} catch IOException ef 
eprintStackTraceO: 


} 
flag=false; 
break; 


. 


} 

/保存 用 户 信息 

if(flag){ 
UserListener ul=new UserListener(); 
ul.setUser(username); 
user.addUser(ul.getUserO); 
session.setAttribute("user",ul); 
session.setAttribute("username",username); 
session.setAttribute("loginTime",new DateO.toLocaleStringO); 


/创建 UserListener 的 对 象 

/添加 用 户 

/添加 用 户 到 UserInfo 类 的 对 象 中 

/将 UserListener 对 象 绑 定 到 session 中 
/保存 当前 登录 的 用 户 名 

/保存 登录 时 间 


DE 公 千本 


String fileURL = createFile(request, response); 
/获取 当前 用 户 
SAXBuilder builder = new SAXBuilder0; 
ty{ 

Document feedDoc = builder. build(fileURL); 
Element root = feedDoc.getRootElement(); 
Element channel = root.getChild("messages"); 
Element newNode = new Element("message"): 
channel.addContent(newNode); 
Element fromNode = new Element("from").setText("[ 系 统 公告 ]"); 
newNode.addContent(fromNode); 
Element faceNode = new Element("face").setText(""); 
newNode.addContent(faceNode); 
Element toNode = new Element("to").setText(™"); 
newNode.addContent(toNode); 


// 当 文件 不 存在 时 创建 该 文件 


/创建 messages 节点 


Element contentNode = new Element("content").setText("<font color='gray>" + username + " 走 进 了 聊天 室 ! </font>"); 


DewNode.addContent(contentNode): 
/登录 时 间 


Element sendTimeNode = new Element("sendTime").setText(new Date().toLocaleString()); 


DewNode.addContent(sendTimeNode): 


request.getRequestDispatcher("login_ok.jsp").forward(request, response); 


XMLOutputter xml = new XMLOutputter(Format.getPrettyFormatO): 
xml.output(feedDoc, new FileOutputStream(fileURL)): 
} catch (Exception e) { 

e.printStackTrace(): 


} 

编写 登录 成 功 页 login_ok.jsp， 在 该 文件 中 将 页 面 了 
<%@ page contentType="text/html;charset=GBK" language="java" %> 
<% response.sendRedirect("main.jsp"): %> 


E 定 向 到 聊天 室 的 主 界面 。 登 录 成 功 页 的 具体 代码 如 下 : 


(2) 编写 聊天 室 主 界面 main.jsp。 该 页 面 共 包括 页 面 头 部 、 聊 天 内 容 显 示 区 、 在 线 人 员 列 表 区 和 用 户 发 言 


区 4 部 分 ， 具 体 布 局 如 图 23.27 所 示 。 
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<table> 
页 面 头 部 
<ltable> 


<td id="online"> | <td> 


<div id="content"> 


在 线 人 员 列 表 区 聊天 内 容 显 示 区 
</div> 
</td> <ptd> 
<table> 
用 户 发 言 区 
<ftable> 


图 23.27 主 界面 的 布局 


布局 后 的 主 界面 的 关键 代码 如 下 : 
oh <!-- 此 处 省 略 了 页 面 头 部 的 HIML 代码 --> 
<table width="779" height="276" border="0" align="center" cellpadding="0" cellspacing="0"> 
<t> 
<td width="613" height="200px" valign="top" bgcolor="#FFFFFF" 
style="padding:Spx; background-image:url(images/right.jpg): background-repeat:no-repeat:"> 
<div style="height:290px; overflow:hidden" id="content"> 聊 天 内 容 </div> 
<ftd> 
<td width="165" valign="top" bgcolor="#F3F3F3" id="online" style="padding:5px"> 
在 线 人 员 列 表 
<td> 
<tr> 
</table> 
<table width="779" height="64" border="0" align="center" cellpadding="0" cellspacing="0" background="images/bottom.jpg"> 
oo <!-- 此 处 省 略 了 用 户 发 言 区 的 代码 ， 该 代码 将 在 实现 用 户 发 言 时 进行 详细 介绍 --> 
</table> 


(3) 实现 用 户 发 言 。 
在 页 面 的 合适 位 置 添加 用 于 收集 用 户 2 息 的 表单 及 表单 元 素 ， 关 键 代 码 如 下 : 
<form action="" name="form1" method="post" > 
<input name="from" type="hidden" value="<%=session.getAttribute("usermmame")%>">[<%=session.getAttribute("usermame")%> ] 对 
<input name="to" type="text" value="" size="35" readonly="readonly"> 
表情 


<select name="face" class="wenbenkuang"> 
<option value=" 无 表情 的 "> 无 表情 的 </option> 
<option value= "微笑 着 " selected> 微 笑 着 </option> 
<!-- 此 处 省 略 了 添加 其 他 列表 项 的 代码 --> 
<option value= "无精打采 的 "> 无 精 打 采 的 </option> 
</select> 
说 : 
字体 颜色 : 
<select name="color" size="1" class—"wenbenkuang" id="select"> 
<option selected> 默 认 颜 色 </option> 
<option style="color:#FF0000" value="FF0000"> 红 色 热 情 </option> 
<!-- 此 处 省 略 了 添加 其 他 列表 项 的 代码 --> 
<option style="color:#999999" value="999999"> 烟 雨 蒙蒙 </option> 
</select> 
<input name="content1" type="text" size="70" onKeyDown="if(event.keyCode—13 &é& eventctrIKey){send0:}"> 
<input name="Submit2" type="button" class="btn_blank" value=" 发 送 " onClick="send0"> 
<input name="button_exit" type="button" class="btn_orange" value=" 退 出 聊天 室 " onClick="Exit0"> 
</form> 


编写 自 定义 的 JavaScript 函数 snd0， 用 于 调用 Ajax 实现 用 户 发 言 。 在 该 函数 中 ， 首 先 验 证 用 户 输入 信息 
的 合法 性 ， 然 后 再 将 提交 的 表单 元 素 的 内 容 连 接 为 一 个 参数 字符 串 ， 并 实例 化 Ajax 对 象 。send0 函 数 的 具体 代 


码 如 下 : 
function send0{ /验证 聊天 信息 并 发 送 
这 foml to value 一 ""){ 


alert(" 请 选择 聊天 对 象 !"):return false: 
中 
if(forml .contentl.value—""){ 
alert(" 发 送信 息 不 可 以 为 空 ! "):forml.contentl.focus0:return false: 
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发 言 
果 不 存 在 ， 则 创建 该 XML 文件 ， 最 后 将 聊天 信息 保存 到 XML 文件 中 ， 并 好 


Ue ftom.valuet"&face—"+forml face.valuet"&:color—"+form1.color.valuet"&to—"+ 

forml.tovaluet"g&content—"+ forml.contentl.value; 

var loader—new net.AjaxRequest("MessagesAction?action=sendMessage".deal._send.onerror,"POST".paran); 

} 

在 聊天 室 相 关 的 Servlet 实现 类 中 ， 添 加 发 送 聊天 信息 的 方法 sendMessages0。 在 该 方法 中 ， 首 先 获取 用 户 
的 相关 信息 ， 并 对 可 能 出 现 中 文 的 信息 进行 转 码 ， 然 后 判断 保存 当天 聊天 信息 的 XML 文件 是 否 存 在 ， 如 
定向 网 页 。sendMessages() 方 法 的 


有 具体 代码 如 下 : 


public void sendMessages(HttpServletRequest request, HttpServletResponse response){ 
Tesponse.setContentType("text/html:charset=GBK"); 

StringUtils su =new StringUtilsO); 

Random random = new Random(); 


String from = su.toUTF8(request.getParameter("from")); /发 言 人 

String face = su.toUTF8(request.getParameter("face")); /表情 

String to = su.toUTFS8(request.getParameter("to")); /接收 者 

String color = request.getParameter("color"); /字体 颜色 
String content = su.toUTF8(request.getParameter("content")): /发 言 内 容 
String sendTime = new Date().toLocaleString(); /发 言 时 间 
/让 可否 上 站 开始; 添 力 了 天 信 司 让 本 中 机 中 机 机 让 本 机 机 本 宙 宙 宙 中 机 相机 本本 
String fileURL = createFile(request, response); // 当 文件 不 存在 时 创建 该 文件 
SAXBuilder builder = new SAXBuilderO; 

Document feedDoc; 

ty{ 


feedDoc = builder.build(fileURL); 

Element root = feedDoc.getRootElement(); 
Element channel = root.getChild("messages"); 
Element newNode = new Element("message"); 


channel.addContent(newNode); // 创 建 messages 节点 
Element fromNode = new Element("from").setText(from); 
newNode.addContent(fromNode); /添加 发 言 人 子 节点 
Element faceNode = new Element("face").setText(face); 

newNode.addContent(faceNode); /添加 表情 子 节点 
Element toNode = new Element("to").setText(to); 

newNode.addContent(toNode); // 添 加 接收 者 子 节点 
Element contentNode = new Element("content").setText("<font color="+ color + ">" + content + "</font>"); 
newNode.addContent(contentNode); /添加 聊天 内 容 子 节点 
/发 言 时 间 

Element sendTimeNode = new Element("sendTime").setText(sendTime); 
newNode.addContent(sendTimeNode); // 添 加 发 言 时 间 子 节点 
Tequest.getRequestDispatcher( 


"MessagesAction?action=getMessages&-nocache="+ random.nextInt(10000)).forward(request, response); 
XMLOutputter xml = new XMLOutputter(Format.getPrettyFormatO): 
Xmloutput(feedDoc. new FileOutputStream(fileURL)); 
/和 中 站 中 中 下 中 丰 相 中 中 下 相 中 中 中 中 中 省 村 下 中 相 相 中 中 中 中 中 中 中 中字 中 看 中 闪闪 灾 中 中 中 中字 不 站 / 
} catch (Exception e) { 
e.printStackTrace(); 
} 


} 
在 上 面 的 代码 中 调用 了 createFile0 方 法 , 该 方法 用 于 根据 当前 日 期 生成 XML 文件 名 , 并 判断 该 文件 是 否 存 


如 果 不 存 在 将 创建 该 文件 ， 具 体 代 码 如 下 : 

public String createFile(HttpServletRequest request, HttpServletResponse response) { 

Date date = new Date(): 

String new Time = new SimpleDateFormat("yyyyMMdd") format(date); 

String fileURL = request.getRealPath("xml/" + newTime + ".xml"); 

/直下 相 相 相 本本 4 本 半 | 肝 i XMI 文件 是 否 存在， 如果 不 存 在 则 创建 该 文件 *+###+#### 可 
File file = new File(fileURL): 


if(!file.exists0) { 1/ 判断 文件 是 否 存在 ， 如 果 不 存在 ， 则 创建 该 文件 
ty{ 
file.createNewFileO: // 创 建文 件 
String dataStr = "<?xml version=\"1.0\" encoding=\"GBK\"?>\r\n"; 


dataStr = dataStr + "<chat>\r\n"; 


dataStr = dataStr + "<messages></messages>"; 
dataStr = dataStr + "</chat>\r\n"; 
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byte[] content = dataStr.getBytes|; 
FileOutputStream fout = new FileOutputStream(file): 


fout write(content): /将 数据 写 入 输出 流 
foutflushO: /刷新 缓冲 区 
foutclose0; /关闭 输出 流 
} catch (IOException e { 
eprintStackTraceO: 
} 
Tetum fileURL; 


} 
(4) 实现 实时 显示 聊天 内 容 。 


编写 自 定义 的 JavaScript 函数 showContent0， 用 于 实例 化 Ajax 对 象 。showContent0 函 数 的 具体 代码 如 下 : 


function showContentO{ 
var loaderl=new net.AjaxRequest("Messages?action=getMessages&nocache="+ 
new Date().getTime(,deal_content,onerror,"GET"); 


} 
在 聊天 室 相关 的 Servlet 实现 类 中 ， 编 写 getMessages0 方 法 。 在 该 方法 中 ， 首 先 判 断 保存 当前 聊天 信息 的 
XML 文件 是 否 存在 。 如 果 不 存 在 ， 则 创建 它 ， 然 后 开始 解析 保存 聊天 信息 的 XML 文件 ， 并 将 聊天 内 容 连 接 为 
-个 字符 串 。 最 后 将 连接 后 的 字符 串 保存 到 HttpServletRequest 对 象 中 ， 并 重 定向 网 页 到 输入 聊天 内 容 的 页 面 


contentjsp。getMessages() 方 法 的 具体 代码 如 下 : 
public void getMessages(HttpServletRequest request,HttpServletResponse response) { 
Tesponse.setContentType("text/html;charset=GBK"); 


String fileURL = createFile(request, response): // 当 文件 不 存在 时 创建 该 文件 
/中 中 中 中 中 中 中 中 和 中 机 四 角 析 保存 聊天 内容 的 XMI， 文件 下 下 
ty{ 


SAXBuilder builder = new SAXBuilder0: 

Document feedDoc = builder.build(fileURL): 

Element root = feedDoc. getRootElementO; /获取 根 节点 
Element channel = root.getChild("messages"); /获取 messages 节点 
Iterator items = channel.getChildren(“message").iterator(); /获取 message 节点 
String messages =""; 

/获取 当前 用 户 

HttpSession session = request.getSession(); 

String userName = ""; 
if (null 一 session.getAttribute("username")) { 


request.setAttribute("messages", "error"); /保存 标记 信息 ， 表 示 用 户 账户 已 经 过 期 


} else { 
UserName = Session.getAttribute("username").toStringO: 
DateFormat df = DateFormat.getDateTimeInstance(); 
while (items.hasNextO) { 
Element item = (Element) items.next(): 
String sendTime = item.getChildText("sendTime”"); 1/ 获取 发 言 时 间 
ty{ 
if (df.parse(sendTime).after( 
df.parse(session.getAttribute("loginTime").toStringO)) 
|| sendTime.equals(session.getAttribute("loginTime").toStringO)) { 
String from = item. getChildText("from”); /获取 发 言 人 


String face = item.getChildText("face"); /获取 表情 
String to = item.getChildText("to"); /获取 接收 者 
String content = item_getChildText("content"); /获取 发 言 内 容 
让 ("[ 系 统 公告 ]".equals(from)) { // 获 取 系 统 公告 信息 
messages += "[ 系 统 公告 ]: " + content+ "&nbsp:<font color= gray>[" 
+ sendTime + "]</font><br>"; 
} else { /获取 普通 发 言 信息 


messages + 一 "<font color-blue><b>" + from+ "</b></font><font color=#CC0000>" 
十 face+ "</font> 对 <font color='green>[" + to+ "]</font> 说 : "+ content 


+ "gnbsp:<font color- gray>["+ sendTime + "]</font><br>"; 
} 


} 
} catch (Exception e) { 

System.out.println("™" + e.getMessageO): 
下 
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Tequest setAttribute("messages", messages): /保存 获取 的 聊天 信息 
Tequest.getRequestDispatcher("content.jsp").forward(request.response): 

} catch (Exception e) { 

; e.printStack Trace(); 

} 

编写 显示 聊天 内 容 的 JSP 页 面 contentjsp， 在 该 页 面 中 只 需要 应 用 out 对 象 的 println0 方 法 将 返回 的 执行 结 
果 输 出 即 可 ， 有 具体 代码 如 下 : 

<%@ page contentType="text/html; charset=gbk" language="java" import="java.util.*+" errorPage="" 96> 

<% request.setCharacterEncoding("gbk"); %> 

本 .getAttribute("messages").toStringO); 

在 其 天 室 的 主 界面 中 ， 在 右 侧 用 于 显示 聊天 内 容 的 单元 格 ， 添 加 一 个 id 属性 为 content 的 <div> 标 记 ， 用 于 
实时 显示 聊天 内 容 ， 具 体 代 码 如 下 : 

<div style="height:290px; overflow:hidden" id=-"content"> 聊 天 内 容 </div> 

编写 Ajax 的 回调 函数 deal_content0， 在 该 函数 中 ， 首 先 获取 Ajax 处 理 页 的 返回 值 ， 然 后 去 除 字符 串 中 的 
Unicode 空白 符 ， 最 后 判断 在 获取 信息 时 是 否 产生 错误 ， 如 果 是 ， 则 退出 聊天 室 ， 否 则 将 获取 的 聊天 内 容 赋 值 给 


id 为 content 的 <div> 标 记 的 innerHTML 属性 。deal_content0 函 数 的 具体 代码 如 下 : 
function deal_contentO{ 


var returnValue=this.req.responseText; /获取 Ajax 处 理 页 的 返回 值 
Var h=returnValue replace(/\s/g.""); 1/ 去除 字符 串 中 的 Unicode 空白 符 
iflh—"eror"){ 

ExitO; 


Jelse{ 
content.innerHTML=sysBBS+returm Value+"</span>". 
// 当 聊天 信息 超过 一 屏 时 ， 设 置 最 先 发 送 的 聊天 信 息 不 显示 
document.getElementById('content').scrollTop = document.getElementById('content).scrollHeighty2: 
} 


} 

为 了 让 页 面 载 入 后 就 调用 Ajax 获取 聊天 内 容 ， 并 且 每 隔 1 秒 钟 便 获 取 一 次 数据 ， 还 需要 在 页 面 中 添加 以 下 
JavaScript 代码 : 

window.setInterval("showContent():",1000); 


window.onload=functionO{ 

showContentO; // 当 页 面 载 入 后 显示 聊天 内 容 

} 

(5) 实现 退出 聊天 室 。 本 实例 中 实现 退出 聊天 室 的 方法 和 实例 597 相同 ， 这 里 不 再 资 述 。 
图 秘笈 心 法 


本 实例 主要 是 应 用 JDOM 组 件 将 用 户 的 聊天 内 容 保存 到 XML 文件 中 ， 然 后 在 聊天 室 中 显示 聊天 内 容 时 ， 
再 应 用 JDOM 读 取保 存在 XML 文件 中 的 聊天 内 容 。 


23.6 万 年 历 


万 年 历 可 以 显示 很 多 年 以 前 或 很 多 年 以 后 的 日 期 、 星 期 数 等 ， 这 对 于 日 常生 活 来 说 是 很 方便 的 。 下 面 将 通 
过 几 个 实例 介绍 如 何 制作 简易 万 年 历 及 带 阴历 的 万 年 历 。 


实例 599 


力 实例 说 明 
在 开发 某 些 网 站 或 系统 时 ， 可 以 借用 万 年 历 实现 填写 日 期 或 日 期 查询 的 功能 。 本 实例 是 一 个 万 年 历 的 程序 ， 
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可 以 显示 所 有 的 日 期 及 日 期 所 对 应 的 星期 数 ， 当 前 日 期 所 在 的 表格 显示 为 灰 蓝 色 (图 23.28 所 示 中 28 日 为 当 
前 日 期 )， 可 以 通过 按钮 查看 上 个 月 和 下 个 月 ， 单 击 “ 上 月 ”按钮 时 显示 上 二 
个 月 的 所 有 日 期 ， 单 击 “ 下 月 ”按钮 则 显示 下 个 月 的 所 有 日 期 ， 如 图 23.28 人 
所 示 。 1 


图 关键 技术 


本 实例 应 用 Calendar 对 象 获取 所 需要 的 时 间 参 数 ， 它 是 一 个 抽象 类 ， 位 [9 
于 java.util.Calendar 包 ， 其 派生 的 一 个 子 类 为 java.util.GregorianCalendar。 23.28 ”简易 万 年 历 

如 果 想 设置 、 获 取 或 操纵 一 个 日 期 对 象 的 各 个 特定 部 分 ， 如 获得 小 时 、 
日 、 分钟 或 计算 一 个 月 的 某 一 天 是 星期 几 等 ,就 需要 使 用 抽象 类 java.util.Calendar 和 它 的 子 类 来 处 理 。 具体 的 使 
用 方法 将 在 实现 过 程 中 介绍 。 
图 设计 过 程 

在 图 23.28 中 显示 的 是 当前 的 日 期 ， 单 击 “ 上 月 ”按钮 后 触发 本 页 面 ， 通 过 传递 参数 显示 2 月 的 日 历 ; 单 
击 “ 下 月 ”按钮 后 触发 本 页 面 ， 通 过 传递 参数 显示 4 月 的 日 历 ， 其 关键 代码 如 下 : 

<%(0 page language="java" import="java.util.*+" 9%> 

<html> 

<head> 

<meta http-equiv="Content-Type" content= "text/html; charset=gb2312"> 

<title> 简 易 万 年 历 </title> 

<link href="css/style.css" type="text/css" rel="stylesheet"> 

</head> 

<%! String days[]; %> 

<body> 


{ 
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<% 
days=new String[42]; 
for(int i=0;i<42;i++) 


{ 

days[i]="; 

所 

<% 

GregorianCalendar currentDay = new GregorianCalendar(); 

int today=currentDay.get(CalendarDAY_ OF MONTHD; // 取 得 当前 日 期 
int month=currentDay.get(Calendar MONTH): // 取 得 当前 月 份 
int year= currentDay.get(Calendar. YEAR); // 取 得 当前 年 份 
// 通 过 Request 取 值 ， 不 为 空 时 ， 程 序 运行 如 下 代码 
if(request.getParameter("month")!=nullé-&request.getParameter("year”)!=null) { 

int requestMonth=Integer.parseInt(request.getParameter("month")); 

int requestYear=Integer.parseInt(request.getParameter("year")): 
if(requestYear——currentDay.get(Calendar. YEAR)é-&requestMonth—month) 

0 // 当 通过 Request 对 象 取得 年 和 月 的 数据 与 当前 的 年 和 月 的 数据 相等 时 ， 不 执行 以 下 代码 
else if(requestMonth—-1){ /1/ 当 通过 Request 对 象 取得 月 为 -1 时 ， 执 行 以 下 代码 的 赋值 
month=11; 

year=requestYear-1; 

}else if(requestMonth—12){ // 当 通过 Request 对 象 取得 月 为 12 时 ， 执 行 以 下 代码 的 赋值 
month=0; 


} else{ /否则 执行 以 下 代码 的 赋值 方法 


Calendar thisMonth=Calendar. getInstance(): 
thisMonth.set(Calendar. MONTH. month ): 

thisMonth.set(Calendar. YEAR. year ): 

thisMonth.setFirstDayOf Week(Calendar. SUNDAY): 

thisMonth.set(CalendarDAY OF MONTH.1): 

int firstIndex=thisMonth.get(Calendar. DAY_OF WEER)-1: /月 份 的 1 日 为 星期 几 
int maxIndex=thisMonth.getActual Maximum(Calendar DAY_OF MONTH): /月 份 为 多 少 天 
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for(int i=0;i<maxIndex:i++) 
{ 
days[firstIndex-+i]=String.valueOf(i+1); 
} 
%> 
<body> 
<table width="294" height="32" border="0" align="center" cellpadding="0" cellspacing="0"> 

<tr align="center"> 

<td background="Image/board left.gif"><b><font color="#FFFFFF"><%=year36> 年 <%=month+1%> 月 </font></b></td> 

</tr> 
</table> 
<table width="294" height="81" border="0" align="center"> 
<div align=center> 
<t> 
<td height="16"> 周 日 </td><td> 周 一 </td><td> 周 二 </td><td> 周 三 </td><td> 周 四 </td><td> 周 五 </td><td> 周 六 </td> 
</> 
<% for(int j=0:j<6:j++) { %> // 列 循环 
<t> 
<% for(int i=j*7;i<G+1)*7:iH) { // 行 循环 
%> 
<%%if((i-firstIndex+1)=——today){ // 当 前 日 期 为 显示 的 日 期 时 ， 执 行 以 下 代码 
%> 
<td width="27" height="16" align="center" bgcolor="#9CA6C6"><font color="#FFFFFF"><b><9%=days[i]%></b></font></td> 
<%}else {%> 
<td width="27" height="16" align="center"><%=days[i]96></td> 
<%} }%></tr><% } 9%6></div> 
</table> 
<table width="294" height="0" border="0" align="center”" cellpadding="0" cellspacing="0"> 

<tr align="center"> 

<td width="98" height="22" 二 type="button” name="Submit1”value=" 上 月 "onClick="javascript:window.location.href= ‘index.jsp?7month= 


<td width="98"> <%iflyear!=currentDay.get(Calendar.YEAR)lImonth!=currentDay.get(Calendar. MONTH)) {%><input type="button" name="Submit2" 
value=" 返 回 当前 月 " onClick="javascript:window.location.href='index.jsp"> <%}%> </td> 

<td width="98"> 

9 type="button"” name="Submit3"” value=" 下 月 "onClick="javascript:window.location.href='index.jsp?month=<%= month+1%>&year= 


</html> 
图 秘笈 心 法 

javautiLCalendar 类 就 是 一 个 用 于 表示 日 历 的 类 , 该 类 提供 了 用 于 获取 有 关 日 历 的 所 有 信息 ， 如 年 、 月 、 日 、 
星期 等。 


实例 600 高 级 


实用 指 吉 友 友 去 


图 实例 说 明 

实例 599 实现 的 万 年 历 可 以 满足 用 户 查 询 公 历 日 期 的 要 求 ， 但 是 不 能 满足 用 户 查 询 阴 历 日 期 的 需要 。 本 实例 
实现 的 是 带 有 阴历 的 万 年 历 ， 并 且 还 提供 了 “上 一 年 ”“ 下 一 年 "”“ 上 一 月 ”“ 下 一 月 ” 超 链接 ， 运 行 结果 如 图 23.29 
所 示 。 
图 关键 技术 

在 万 年 历 的 程序 中 ， 不 管 是 获取 农历 日 期 还 是 公历 日 期 都 离 不 开 时 间 类 的 支持 。 下 面向 读者 介绍 Java 中 处 
理 时 间 日 期 的 类 Calendar。 

Calendar 类 是 一 个 抽象 类 ， 该 类 为 特定 的 瞬间 〈 指 的 就 是 某 一 特定 的 时 刻 ) 与 一 组 诸如 YEAR、MONTH、 
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DAY OF MONTH、HOUR 等 日 历 之 间 的 转换 提供 了 方法 ， 并 提供 了 操作 日 


历 字段 的 常用 方法 。 


日 一 a 三 五 六 
Sm Mn Tw We Th Fi sat 
1 2 3 4 6 7 
五 让 相机 初 ? 十 一 
8 9 10 1 12 13 14 
之 | 4 | 机 | 二 | | | 二 
15 16 17 18 19 加 21 
| | 这 | 二 春分 。 甘 五 
2 了 3 24 阿 26 2 2 
H 六 Ht 检 二 三 月 初 二 
EE 0 31 
初 z= ” 初 四 初 五 


图 23.29 带 阴 历 的 万 年 历 
口 getmstance() 方 法 


该 方法 是 类 方法 ， 以 获得 此 类 型 的 一 个 通用 的 对 象 。getInstance() 方 法 返 


下 语句 获取 Calendar 对 象 : 
Calendar today1 = Calendar getinstance0: 


口 getTime() 方 法 


该 方法 可 获取 表示 此 Calendar 时 间 值 的 Date 对象。 获取 当前 系统 时 间 可 


Calendar rightNow = Calendar.getInstance(); 
Date date = rightNow.getTime(); 
口 setTime0 方 法 


该 方法 参数 为 Date 类 型 对 象 ， 通 过 该 对 象 设置 Calendar 的 时 间 。 
图 设计 过 程 


回 一 个 Calendar 对 象 。 可 以 通过 如 


[通过 如 下 语句 实现 : 


(1) 创建 类 MyCalendar。 该 类 包含 生成 万 年 历时 需要 的 核心 方法 ， 如 获取 农历 年 的 总 天 数 、 获 取 Y 年 


第 n 个 节气 为 几 日 等 方法 。 在 该 类 中 定义 全 局 变量 ， 关 键 代码 如 下 : 

Private int year; 

Private int month; 

private int day: 

private boolean leap; 

final static String chineseNumber[] = { "—", A 

static SimpleDateFormat chineseDateFormat = new SimpleDateFormat("yyyy 年 MM 月 dd 日 "); 

final static long[] lunarInfo = new long[] { Ox04bd8, 0x04ae0. Ox0a570, 
0x054d5. Ox0d260, 0x0d950. Ox16554, Ox056a0, 0x09ad0. Ox055d2. 
Ox04ae0, Ox0a5b6, Ox0a4d0, Ox0d250, Ox1d255, Ox0b540, Ox0d6a0, 
Ox0ada2, Ox095b0, Ox14977, Ox04970, Ox0a4b0, Ox0b4b5, Ox06a50, 
0x06d40. Ox1ab54, Ox02b60, 0x09570. Ox052f2., Ox04970, 0x06566、 
Ox0d4a0, Ox0ea50, Ox06e95. 0x05ad0. Ox02b60, Ox186e3, 0x092e0、 
Oxlc8d7. Ox0c950, 0x0d4a0. Ox1d8a6. 0x0b550. 0x056a0. Ox1a5b4. 

Ox025d0, Ox092d0, 0x0d2b2. 0x0a950, 0x0b557. Ox06ca0, 0x0b550、 

Ox15355, Ox04da0, 0x0a5d0. Ox14573, 0x052d0. Ox0a9a8, Ox0e950, 

Ox06aa0, Ox0aea6. Ox0ab50. 0x04b60. 0x0aae4. 0x0a570. 0x05260. 

0x0 亿 63, 0x0d950. 0x05b57. 0x056a0. 0x096d0. 0x04dd5. 0x04ad0、 

Ox0a4d0, Ox0d4d4, 0x0d250. Ox0d558, 0x0b540. 0x0b5a0. Ox195a6, 

Ox095b0, Ox049b0, Ox0a974, 0x0a4b0. Ox0b27a, Ox06a50, Ox06d40, 

Ox0af46. Ox0ab60. 0x09570. 0x04af5. Ox04970. 0x064b0. Ox074a3, 

0x0ea50, Ox06b58, Ox055c0. Ox0ab60, Ox096d5, Ox092e0, Ox0c960, 

Ox0d954, Ox0d4a0, Ox0da50, 0x07552. Ox056a0. 0x0abb7. Ox025d0, 

0x092d0. 0x0cab5, 0x0a950. Ox0b4a0, 0x0baa4. 0x0ad50. Ox055d9. 

Ox04ba0. 0x0a5b0, 0x15176. 0x052b0. Ox0a930. 0x07954. Ox06aa0. 

0x0ad50. Ox05b52, Ox04b60. 0x0a6e6. Ox0a4e0. 0x0d260. 0x0ea65、 

Ox0d530, Ox05aa0, Ox076a3, Ox096d0, Ox04bd7, Ox04ad0, 0x0a4d0. 

0xld0b6. 0x0d250. 0x0d520. 0x0dd45. 0x0b5a0. 0x056d0. 0x055b2、 

Ox049b0, 0x0a577. Ox0a4b0, 0x0aa50. Ox1b255, 0x06d20. Ox0ada0}:; 

String[] solarTerm = {" 小 塞 "." 大 寒 "." 立 春 "." 雨 水 "." 惊 圾 "," 春 分 "." 清 明 "," 谷 雨 " 
"立夏 "," 小 满 "," 芒 种 "," 夏 至 "小暑"." 大 暑 "," 立 秋 "," 处 暑 "" 白 露 "." 秋 分 ", 
"寒露 "霜降 "," 立 冬 "" 小 雪 "," 大 雪 "," 冬 至 "}: 

int[] sTermInfo ={0.21208.42467.63836.85337.107014.128867.150921.173149.195551. 


/历年 

// 历 月 

/ 历 日 

/ 间 年 
"十 二 "}; /中 文 数字 

/日 期 格式 


/农历 日 期 


/节气 的 中 文 名 称 
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218072.240693.263343.285989.308563.331033.353350.375494.397447.419210. 
440795.462224,483532,.504758}; // 各 节气 与 小 塞 之 间 的 时 间 差 ， 单 位 为 分 钟 
(2) 定义 返回 某 年 的 第 n 个 节气 为 几 日 的 方法 sTemO， 该 方法 包含 两 个 int 型 参数 ， 分 别 代表 农历 年 Y 
和 第 n 个 节气 ， 返 回 值 为 具体 节气 所 在 的 日 期 ， 具 体 代码 如 下 : 
public int sTerm(int y,int n) { 
Calendar offDate = Calendar getInstance(); 
offDate.set(1900. 0. 6. 2, 5, 0); 1/ 设置 基准 日 期 为 1900 年 1 月 6 日 2:05:00AM 
long temp = offDate.getTime().getTime(); 
offDate.setTime(new Date((long) ((31556925974.7 * (y - 1900) + sTermInfo[n] * 60000L) + temp))); 
Tetum offDate.get(CalendarDAY OF MONTH): // 将 具体 的 天 数 返回 
} 
(3) 创建 获取 农历 年 的 总 天 数 方法 yearDays0， 该 方法 有 一 个 int 型 参数 ， 用 于 指定 年 份 ， 返 回 值 为 农 
历 立 年 的 总 天 数 ， 具 体 代码 如 下 : 
final private static int yearDays(int y) { 
inti, sum = 348; /sum 表示 没有 头 月 时 农历 年 的 天 数 
for (i = 0x8000; i> 0x8; i>>— 1) { 
if((lunarInfo[y - 1900] &D (=0) 
sum += 1; 
J (sum + leapDays(y)); 
} 
(4) 编写 获取 农历 立 年 哪个 月 是 半月 的 方法 leapMonthO， 该 方法 有 一 个 int 型 参数 ， 用 于 指定 年 份 ， 如 果 
该 年 中 没有 闽 月 则 返回 0， 和 否则 将 返回 半月 的 月 份 ， 具 体 代 码 如 下 : 
final private static int leapMonth(int y) { 
retum (int) (lunarInfo[y - 1900] & Oxf); 
} 
(5) 编写 获取 农历 Y 年 m 月 的 总 天 数 方法 monthDays0， 该 方法 有 两 个 int 型 参数 ， 分 别 表示 农历 年 Y 和 
月 m。 返 回 值 为 农历 Y 年 m 月 的 总 天 数 ， 具 体 代码 如 下 : 
final private static int monthDays(int y, int m) { 
if ((lunarInfo[y - 1900] & (0x10000 >> m)) — 0) 
Tetum 29; 


else 
Tetum 30; 
} 


(6) 编写 转换 农历 日 期 中 中 文 日 期 的 方法 getChinaDayString0， 该 方法 有 一 个 int 型 参数 ， 用 于 指定 农历 


的 历 日 ， 返 回 值 为 中 文 日 期 ， 具 体 代 码 如 下 : 
public static String getChinaDayString(i nN 


String chineseTen[] = {" 初 ", "十 ", " 廿 /定义 中 文 农历 日 期 需要 的 中 文 日 期 数组 
intn= day% 10 一 0?9:day9% 10-1: 
if(day > 30) // 如 果 指定 的 参数 大 于 30 
Tetum ™; /1/ 运 回 null 
if(day = 10) /参数 等 于 10 
Tetum " 初 十 "; // 返 回 初 十 
else 
Tetum chineseTen[day / 10] + chineseNumberfn]: /返回 对 应 的 中 文 日 期 
} 


(7) 编写 转换 农历 日 期 中 的 中 文 日 期 的 方法 myCalendar0， 该 方法 只 用 一 个 Calendar 类 型 参数 ， 用 于 指定 
农历 的 历 日 ， 返 回 值 为 中 文 日 期 ， 具 体 代码 如 下 : 


public String myCalendar(Calendar cal) { 


int yearCyl, monCyl, dayCyl; // 定 义 int 型 变量 ， 分 别 代表 历年 、 历 月 、 历 日 
intleapMonth = 0; 
Date baseDate = null: // 创 建 Date 类 型 变量 
ty{ 
baseDate = chineseDateFormat.parse("1900 年 1 月 31 日 "); // 将 Date 类 型 变量 进行 初始 化 
} catch (ParseException e) { 
eprintStackTraceO: 


} 

// 求 出 和 1900 年 1 月 31 日 相差 的 天 数 

int offset = (int) ((calLgetTimeO.getTimeO - baseDate.getTimeO) / 86400000L): 
dayCyl = offset + 40; 

monCyl= 14: 
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用 offset 减 去 每 农历 年 的 天 数 计算 当天 是 农历 第 几 天 ， 其 中 ，i 的 最 终 值 为 农历 的 年 份 ，offset 是 当年 的 第 
几 天 ， 具 体 代 码 如 下 : 


intiYear daysOfYear = 0; 

for (iYear = 1900; iYear < 2050 && offset > 0; iYear++) { 
daysOfYear = yearDays(iYear); 
offset -= daysOfYear; 
monCyl 1= 12; 


} 
if(offset <0) { 


offset += daysOf Year: 
iYear--: 
IonCyl -= 12; 
} 
计算 农历 年 份 ， 具 体 代码 如 下 : 
year = iYear; 
yearCyl = iYear - 1864; 
leapMonth = leapMonth(iYear); // 间 哪个 月 ，1 一 12 
leap = false; 


// 用 当年 的 天 数 offset， 逐 个 减 去 每 月 (农历 ) 的 天 数 ， 求 出 当天 是 本 月 的 第 几 天 
int iMonth, daysOfMonth = 0; 
for (iMonth = 1; iMonth < 13 &é& offset > 0; iMonth+t+) { 


/半月 

if (leapMonth > 0 && iMonth 一 (leapMonth + 1) && 'leap) { 
~-iMonth; 
leap = true; 
daysOfMonth = leapDays(year); 

} else 


daysOfMonth = monthDays(year, iMonth); 


offset -= daysOfMonth: 

1/ 解除 图 月 

if (leap &&c iMonth 一 (leapMonth + 1)) 
leap = false; 

if (!leap) 
monCylH+; 


} 
offset 为 0 且 刚 才 计算 的 月 份 是 头 月 时 ， 要 校正 ， 具 体 代 码 如 下 : 
让 (offset 一 0 &&c leapMonth > 0 && iMonth 一 leapMonth+ 1) { 
if (leap) { 
leap = false; 
}else{ 
leap = true; 
~-iMonth: 
~--monCyl:; 
} 


} 
当 offset 小 于 0 时， 也 需要 校正 ， 具 体 代码 如 下 : 
if(offset <0) { 
offset += daysOfMonth:; 
~-iMonth; 
~-monCyl; 


} 
获取 节气 的 具体 代码 如 下 : 

if (d= sTerm(y, (m- 1) * 2)) 

solarTerms = solarTerm[(m - 1) * 2]: 
else if (d=— sTerm(y. (m- 1) +2+1)) 

solarTerms = solarTerm[(m - 1) * 2+ 1]: 
String tempStr="; 

(I"".equals(sFeast)){ 
tempStr=sFeast: 


} 
if(I™".equals(Feast){ 
这 "equals(tempstD){ 
tempStr=IFeast: 
jelsef 


906 


tempStr=tempStr+"/"HFeast; 
} 


} 
if(!"".equals(solarTerms){ 
if("".equals(tempSt)){ 
tempStr=solar Terms; 
jelsef 
tempStr=tempStr+"/"+solarTerms; 
} 
} 


判断 是 否 为 头 月 的 具体 代码 如 下 : 


这 gequalsttempStD){ 
Tetum "<font color='red>"+tempStr+"</font>"; 


Jelse{ 
这 day 一 1){ 
retum (leap ? " 间 " : "") + chineseNumber[month - 1]+" 月 "; 
jelsef{ 
return getChinaDayString(day); 


} 
} 
(8) 在 JSP 页 面 中 编写 显示 万 年 历代 码 。 首 先 在 index.jsp 页 面 中 通过 <jsp:useBean> 动 作 标记 在 Request 范 


围 内 应 用 JavaBean MyCalendar 类 ， 具 体 代码 如 下 : 
<jsp:useBean class="com.tools.MyCalendar" id="calendar" scope="request"/> 


(9) 创建 一 个 42 个 元 素 的 一 维 数组 ， 用 于 初始 化 万 年 历 中 的 单元 格 ， 并 将 该 数组 的 各 元 素 设置 为 空 字符 
串 ， 二 人 人 

Sting ys Serine 
// 将 数组 中 的 元 素 值 设置 为 空 


(10) 根据 要 显示 的 日 历 日 期 信息 生成 日 历 中 的 公历 日 期 具体 代码 如 下 : 
<% Calendar todayl = Calendar.getInstanceO; /获取 Calendar 类 对 象 
SimpleDateFormat chineseDateFormat = new SimpleDateFormat("yyyy-MM-dd"); 。 “ // 指 定 日 期 格式 为 yyyy-MM-dd 
int month = 0; 
int year = 0; 
GregorianCalendar currentDay = new GregorianCalendar(); 
// 当 参数 year 不 为 空 时 ， 表 示 通 过 控制 区 对 日 历 中 显示 的 日 期 进行 改变 
if (request.getParameter("year") != null &é& !"".equals(request.getParameter("year"))) { 
month = Integer.parseInt(request.getParameter("month")) - 1: 
year = Integer.parseInt(request.getParameter("year")); 


}else{ // 采 用 默认 值 
month = currentDay.get(Calendar. MONTH): // 获 取 当 前 月 
year = currentDay.get(Calendar.YEAR): /获取 当前 年 

} 

int today = currentDay.get(Calendar. DAY_OF_MONTH): /获取 当前 日 


Calendar thisMonth = Calendar getInstance(); 
thisMonth.set(Calendar.MONTH, month): 
thisMonth.set(Calendar. YEAR, year): 
thisMonth.setFirstDayOf Week(Calendar. SUNDAY): 
thisMonth.set(Calendar DAY_OF_MONTH. 1); 


int firstIndex = thisMonth.get(Calendar. DAY_ OF WEEK)- 1: // 获 取 显 示 月 历 中 的 第 一 天 所 在 的 星期 
int maxIndex = thisMonth.getActualMaximum(Calendar DAY_OF MONTH): /获取 显示 月 历 的 总 天 数 
for (inti= 0; i< maxIndex: it+) { // 生 成 显示 月 历 中 的 公历 日 期 


days[firstIndex + i] = String.valueOf(i + 1): 
%> 
(11) 在 页 面 中 添加 下 拉 列 表 ， 用 户 可 根据 下 拉 列 表 值 选择 1901 一 2049 年 间 的 任意 年 份 进行 查询 ， 下 拉 列 
表 值 的 选中 状态 为 当前 年 份 ， 具 体 代 码 如 下 : 


‘<select name="year" onChange="this .form .submit0:"> 
<%for (int i= 2049: i>= 1901; i--) {%> /循环 获取 年 份 
<option value="<%=i%>" <%if (i 一 year) { // 将 年 份 添加 到 下 拉 列 表 中 
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‘out.printin("selected"): // 当 前 年 份 是 下 拉 列 表 的 默认 值 
jsc>> 
<9%6out printin():96> 
</option> 
<%}%> 
</select> 


(12) 在 页 面 中 设计 下 拉 列 表 ， 用 户 可 根据 下 拉 列 表 值 选择 任意 月 份 进行 查询 ， 并 设置 当前 月 份 为 下 拉 列 


表 值 的 默认 选中 状态 ， 具 体 代 码 如 下 : 
‘<select name="month" onChange="this.form.submit|):"> 
<% 
for (inti=1;i<=12;iH) { /循环 向 下 拉 列 表 中 添加 值 
%> 
<option value="<%=i%>" 


<%if (i— month+ 1) { 
out:printin("selected"):}96>> // 设 置 当前 月 份 为 默认 值 


out.printin(D); 


(13) 在 页 面 的 合适 位 置 创建 一 个 3 行 7 列 的 表格 ， 用 于 显示 万 年 历 。 其 中 ， 第 一 行 用 于 显示 控制 区 ， 第 


二 行 用 于 显示 日 历 的 标 头 ， 第 3 行 用 于 显示 日 期 ， 关 键 代码 如 下 : 
<table width="443" border="0" align="left" style="float:left" cellpadding="0" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#F2F1EF"> 
<tr bgcolor="FFFCF1"> 
<td height="36" colspan="7" align="center" valign="middle" bgcolor="#AC8F67"> 
Er <!-- 此 处 省 略 了 显示 控制 区 的 代码 --> 


</t> 
<tr bgcolor="C9B65A'"> 
<td width="44" height="40" align="center" bgcolor="#EBDFC9" class="word_ red"> 日 <br> 
SUN </font></td> 
<td width="44" height="40" align="center" bgcolor="#EBDFC9" class= "word_darkGray"> 一 <br> 
MON</td> 
ee <!-- 此 处 省 略 了 显示 星期 二 至 星期 五 的 其 他 单元 格 的 代码 --> 
<td width="44" height="40" align="center" bgcolor="#EBDFC9" class="word blue"> 六 <br> 
SAT</font></td> 
</a> 
<tr bgcolor="FFFCF1"> 
<td align="center" bgcolor="<%=bgcolor%>" valign="middle"></td> 
<t> 
</table> 


(14) 编写 循环 生成 日 历 中 日 期 代码 。 在 生成 日 历 内 容 时 ， 需 要 调用 MyCalendar 类 的 myCalendar0 方 法 生 


成 农历 日 期 ， 具 体 代码 如 下 : 
<% 


String color = "#000000"; 
String bgcolor = "FFFFFF"; 
for (intj=0;j<6:jH) { 
%> 
<trbgcolor="FFFCF1"> 
<% 
for (inti=j*7:i<(G+1)*7:ith) { 
switch ((i+ 1) % 7) { 
case 6: 
Case 2: 
Case 3: 
Case 4: 
Case 5: 
color = "#000000"; 
break: 
case 1: 
color = "#FF0000": 
break: 
case 0: 
color = "#1B789D"; 
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break: 
} 
if((i- firstIndex +1)— today) { 
bgcolor = "#C8E3F3"; /设置 当天 日 期 的 背景 颜色 
}else{ 
bgcolor = "FFFFFF": 
} 
%> 
<td align="center”" bgcolor="<%=bgcolor%>" valign="middle" <%if (1"".equals(days[i])) {%%> 
<%int d = Integer. parseInt(days[i]):%> 
<%out.printin("style=\"cursor:hand:\” date=" + year 
+"-"+(month+1)+"-"+d 
十 "Tetum false;\"><font color=\"" 
+color+"\">"+d+"<br>"); 
if (days[i] =") { 
String str =year + "-"+ (month+ 1)+"-"+d; 
todayl.setTime(chineseDateFormat.parse(str)); 
out.printin(calendar.myCalendar(today1)); // 获 取 农 历 日 期 或 是 节气 日 


} 
out.printin("</font>"):96> 
<%}%> 
</td> 
<% 
+ 
9%> 
</tr> 
<% 
%> 
</table> 


图 秘笈 心 法 
在 本 实例 中 多 次 用 到 了 0x， 使 用 该 字符 作为 前 缀 表示 为 十 六 进 制 数 。 


